Use Raphael to Draw (ii) extended graphics (JavaScript)

Before looking at this article, it is recommended to first read the first article, "Using Raphael to Draw (a) basic graphics (JavaScript)."

Graphics that are expanded on a Raphael basis:

To run the example to introduce an attachment to the 2 JS packets. (G.raphael.rar)

<Scripttype= "Text/javascript"src= "Raphael.js"CharSet= "Utf-8"></Script><Scripttype= "Text/javascript"src= "Plugins/g.raphael.js"CharSet= "Utf-8"></Script>

Here is the set (), the first article has a brief introduction. This is just for unified management of graphs with the same properties, such as shapes with the same border color can be put together. Of course you can also add properties to each graph without using set () management.

varpaper = Raphael ("mydiv", 580, 600);//Create a View areavarSet =Paper.set (); Set.push (Paper.g.flower (18, 50, 20), Paper.g.disc (58, 50, 20), Paper.g.line (108, 50, 20), Paper.g.square (158, 50, 20), Paper.g.triangle (208, 50, 20), Paper.g.star (258, 50, 20), Paper.g.cross (308, 50, 20), Paper.g.plus (358, 50, 20), Paper.g.arrow (408, 50, 20), Paper.g.diamond (458, 50, 20), Paper.g.tag (500, 250, "$9.99", 130), Paper.g.popup (250, 250, "$9.99"), Paper.g.flag (300, 250, "$9.99", 60), Paper.g.label (350, 250, "$9.99"), Paper.g.drop (400, 290, "$"), Paper.g.blob (450, 290, "$9.99")    ); Set.attr ({fill:' Orange ', Stroke: ' black '});

Note: Paper.g.flower (18, 50, 20) is the first "flower" graph, and so on.

Set.attr ({fill: ' Orange ', Stroke: ' Black '), set the background color, border color for the graphics inside the set.

Original address: http://czpae86.iteye.com/blog/819002

Use Raphael to Draw (ii) extended graphics (JavaScript)