Combining GFX,DND and Dijit to create Web graphics applications based on Dojo

GFX (DOJOX.GFX), as one of the Dojo extension components, encapsulates the actual graphics engine in the underlying browser, giving developers the basic capabilities of WEB graphics and the basis for such applications. At the same time, as the Dojo core component of the DnD (DOJO.DND), it implements the browser-based mouse drag and drop operation, thus provides the technical support for the graphics component selection, the component wiring and so on advanced drawing operation. Furthermore, by introducing a custom Dojo widget (Dijit), developers can extend the existing application in a way that allows users to manipulate graphics in a more flexible manner. First of all, this paper will introduce the principle of the browser-based drawing, and then show the readers how to combine gfx,dnd and Dijit in a layered way, and finish the common operation of drawing class application in the browser, and finally, through a practical Web Drawing applications to give readers a further understanding of the content described in this article.

The basics of browser drawing

HTML and JavaScript-based browser drawing relies on the graphics engine provided within each browser. However, because different browsers support the network Graphics standards are not the same, to the compatibility of software caused great difficulties. Dojo as one of the current popular JavaScript framework, although to some extent, for developers to shield these differences, but when encountered some special needs of the drawing, still seem powerless, so it is necessary to the basic principles of browser drawing understanding, so as to write more stable performance, Excellent code with high efficiency. Several major web graphics standards currently include IE-supported Vml,firefox,safari and Opera-supported SVG and Canvas supported by HTML5.

VML is an xml-based markup language developed by Microsoft and supported in IE version 5.0, using the vector graphics described by VML, defined by shape and group two basic elements, shape describes a vector graphic element, and shape sets the graphic elements together , so that it can be processed as a whole. By using simple text to represent an image, VML can use a small number of bytes to represent a relatively complex image.

SVG is the same xml-based vector graphic Description language developed by the world's web, and SVG elements are instructions for how to draw images, which are interpreted by the graphics engine to display SVG images in the browser. Using SVG to display a wide variety of high-quality vector graphics on the Web page, the most obvious feature is the flexible file format, vector graphics, bitmaps and text together form an SVG graphic, and have the ability to make real-time changes to the Web page images in the running.

Canvas is the new Canvas element in HTML 5, originally introduced by Apple's Safari browser, and then widely supported by Firefox and Opera. One important difference between Canvas elements relative to VML and SVG is that Canvas provides a way to draw graphics through JavaScript, with each Canvas element having a context in which arbitrary graphics can be drawn, while SVG and VML use XML documents to describe Graphics, developers typically modify the image by modifying the XML tags in it.

By clarifying the differences between the different standards, you will be more aware of the JAVASCRIPT framework for developers to bring convenience, the following section of Dojo code, can be in IE and Firefox rendering the same effect of graphics. But through the phenomenon to send

In essence, we use Firebug not difficult to see the same graphics in different browsers behind the implementation of the different.

var　surface　=　dojox.gfx.createSurface(gTestContainer,　300,　300);
　 var　line　=　surface.createLine({　x1:　20,　y1:　20,　x2:　100,　y2:　100　})
　 .setFill([255,　0,　0,　0.5]).setStroke({color:　"red",　width:　5})
　 .setTransform({　dx:70,　dy:　100　});
　 var　circle　=　surface.createCircle({　cx:　170,　cy:　200,　r:　50　})
　 .setFill([0,　255,　0,　0.5]);

Figure 1 is the Internet under IE VML graphics DOM structure, Firefox under the SVG graphics DOM structure is as shown in Figure 2. Therefore, it should be understood that Dojo provides the upper layer of the drawing API, can be based on different browser selection to generate the appropriate standard of drawing elements, this encapsulation of the way naturally can not take into account the uniqueness of the various drawing standards, So when we're working on a more complex drawing operation or debugging a cross-browser code flaw, let's make sure that Dojo takes care of the problem, and if not, we need to write code for different browsers to mask the differences.

Figure 1. DOM structure of VML graphics under IE