Graphical Primitives

JSAV supports the following graphical primitives:

• Circle API
• Ellipse API
• Line, Polygon, and Polyline API
• Path API
• Rectangle API
• Set API

The primitive-specific pages give more details on what functions are available for each type, while this page gives an overview of their common functionality. All the types are in the JSAV.g namespace. A rectangle, for example, can be initialized like follows.

var rect = av.g.rect(70, 60, 50, 40);

This would initialize a rectangle with upper-left corner at point (70, 60) that is 50 pixels wide and 40 pixels tall.

Note: Make sure you load Raphaël.js when using the graphical primitives.

Here is a cute example cat drawn using the polyline and path primitives.

All the graphical primitives have the following functions.

.show()

Make the shape visible. Essentially the same as calling .css({opacity: 1}).

.hide()

Make the shape invisible. Essentially the same as calling .css({opacity: 0}).

.isVisible()

Return true if the shape is visible, false if hidden.

.rotate(deg)

Rotates the object by the given amount of degrees around the center of the shape.

.scale(sx, sy), .scaleX(sx), .scaleY(sy)

Scales the object by given amount. The shortcuts for X/Y scaling only are the same as calling .scale(sx, 0) and .scale(0, sy). For example

rect.scale(2, 1.5)

would make the rectangle from the previous example to have width of 100 pixels and height of 60px. Note, that the position of the rectangle would also change, since the scaling is done relative to the center of the shape.

.translate(dx, dy), .translateX(dx), .translateY(dy)

Translates the shape by the given amount. Again, X/Y versions are shortcuts to the main translation function.

.css(propname)

Returns the value of the attribute with the name propname.

.css(propname, propvalue), .css(propsObj)

Like the .css functions of the other JSAV objects, these can be used to animate attributes of the shape. Technically, what is changed is not CSS properties but attributes of the SVG element visualizing the shape. For a list of valid values, see Raphaël JS documentation.

Events

There are functions to attach event handlers for the graphical primitives. The events that can be listened for are: click, dblclick, mousedown, mousemove, mouseup, mouseenter, and mouseleave. See jQuery documentation for details on the events. The last parameter for the event handler is the jQuery event object. Inside the event handler function, this will refer to the JSAV graphical primitive object.

Here’s an example of attaching event handlers to different primitives. Try clicking the circle, hovering over the arc, and double clicking the line.

In general, the event handlers for graphical primitives work similarly to events on an array, so refer to the array documentation.