JSignage:Rectangle

This page is related to JSignage:Shapes.

jSignage.rect()

jSignage.rect( attributesObject );

Returns: jSignage Object

Description

Draws a rectangular shape which can be filled, can have a stroked-frame and can have rounded or square corners. See the rect element in the SVG specification for reference.

Parameters

• attributesObject

  Type: Plain Object.

  An object containing any of the following attributes:

  • fill, fillOpacity, stroke, strokeOpacity, strokeWidth, ...

    Fill and stroke attributes (common to all shapes).

  • x, y

    Type: Number. Default: 0.

    x and y coordinates of the top-left corner.

  • width, height

    Type: Number. Default: 0.

    Width and height of the rectangle.

  • rx, ry

    Type: Number. Default: 0.

    Specifies the x-axis radius, respectively y-axis radius, of the ellipse used to round off the corners of the rectangle. If only one of these is provided, the missing one is implicitly equal to the one specified, thus the corners have a circular shape.

Examples

// draw a blue rectangle and add it to the document
$.rect({ 
    x: 200, y: 100, width: 600, height: 400, fill:'blue'
}).addTo('svg');

// draw a black rectangle with red border and rounded corners
$.rect({ 
    x: 320, y: 180, width: 640, height: 360, rx: 100, 
    stroke:'red', strokeWidth: 50 
}).addTo('svg');

// create an 8x8 chessboard using rectangles.
var n = 8, size = 600, d = size / n;
for ( var i=0; i<n; i++ ) {
    for ( var j=0; j<n; j++ ) {
        $.rect({ 
            x: 340 + ( i * d ), 
            y: 60 + ( j * d ), 
            width: d, 
            height: d,  
            fill: i%2 == j%2 ? 'black' : 'white'
        }).addTo('svg');
    }
}