JSignage:Rectangle

From SpinetiX Support Wiki

Jump to: navigation, search

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

Rectangle1.png
// draw a blue rectangle and add it to the document
$.rect({ 
    x: 200, y: 100, width: 600, height: 400, fill:'blue'
}).addTo('svg');
Rectangle2.png
// 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');
Rectangle3.png
// 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');
    }
}
This page was last modified on 26 March 2019, at 15:50.