Raphaeljs BASICS (2)

Raphaeljs BASICS (2)

This section describes the attributes and events of elements in Raphaeljs.

    <Script src = "Script/raphael. js"> </script><Script> // create a canvas var paper = new Raphael ("paper", 500,500); // draw a circle var circle = paper. circle (50, 50, 40); circle. attr ({"stroke": "red", "stroke-width": 4, "fill": "blue"}); // or use circle. attr ("opacity", 0.5); // draw a square var rect = paper. rect (90, 90, 50, 50, 10); </script>

The attr method is used to add attributes to an element in paper. You can add multiple attributes at a time, or add attributes at a time.

Element attributes include:

Cursor (cursor color), cx, cy (coordinate of the center of the Garden or elliptical circle), fill (fill color), fill-opacity (filter), font, font-family, font-size, font-weight, height

Href, opacity, path, src, stroke, stroke-dasharray, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width

Target, text, text-anchor, title, transform, width, x, y, etc.

If you want to set the style of an element, you can use the element. node attribute to obtain the tag after the current element is parsed to the browser, and then use jquery to set it.

Element event:

Raphaeljs elements generally have the following events:

1. click an event;

2. Double-click the dbclick event;

3. drag event, element drag event;

3. hide events;

4. hover suspension events;

5. mousedown

6. mouseout mouse removal event

7. mouseover and mouseup send events;

The event relief method is as follows:

1. unclick

2. undbclick

3. unmousedown

4. Just add the prefix un to the word bound to the event.

Of course, element events and attributes are also set through element. node.

Next, let's look at a specific case. When the mouse moves into the circle, the filled color of the circle is changed, and the original color is restored when the mouse moves out.

    <Script src = "Script/raphael. js"> </script><Script> // create a canvas var paper = new Raphael ("paper", 500,500); // draw a circle var circle = paper. circle (50, 50, 40); circle. attr ({"stroke": "red", "stroke-width": 4, "fill": "blue"}); circle. mousedown (function () {circle. attr ("fill", "red") ;}); circle. mouseup (function () {this. attr ("fill", "blue") ;}); // or use circle. attr ("opacity", 0.5); // draw a square var rect = paper. rect (90, 90, 50, 50, 10); rect. attr ({"stroke": "red", "stroke-width": 4, "fill": "blue"}); rect. attr ("opacity", 0.5); rect. mousemove (function () {rect. attr ("fill", "gray") ;}); rect. mouseout (function () {this. attr ("fill", "blue") ;}); </script>

As follows: