JSignage:Circle

.circle()

$.circle( attributes );

Returns: jSignage Object

Description

Draws a circular shape based on a center point and a radius. The shape can be filled and can have an outline. See the circle element in the SVG specification for reference.

Parameters

• attributes

  Type: Plain Object.

  Contains the circle attributes.

Attributes

The following attributes can be specified:

• fill, stroke etc.

  Fill and stroke attributes (common to all shapes).

• cx, cy

  Type: Number. Default: 0.

  Specifies the x and y coordinates of the center of the circle.

• r

  Type: Number. Default: 0.

  Specifies the radius of the circle.

Examples

// draw a red circle and add it to the document
$.circle( { cx: 640, cy: 360, r: 200, fill:'red' }).addTo('svg');

// draw a red-stroked transparent circle and add it to the document
$.circle( { cx: 640, cy: 360, r: 200, fill:'none', stroke:'red', strokeWidth: '20' }).addTo('svg');

// draw a transparent circle with a green dashed outline and add it to the document
$.circle( { cx: 640, cy: 360, r: 200, fill:'none', stroke:'green', strokeWidth: '20', 
            strokeDashArray:'30' 
}).addTo('svg');

// draw a circle and add it to the document
var c = $.circle( { cx: 640, cy: 360, r: 200 }).addTo('svg');

// animate the fill color from blue to red during 10 seconds
c.animateColor( 'fill', { from: 'blue', to: 'red', begin: 1, dur: 10, repeatCount: 'indefinite' } );