JSignage:Shapes

Description

The jSignage library provides the following functions for drawing SVG paths and SVG shapes:

Effects and custom animations, as well as frame decoration attributes cannot be used for shapes, because these are requiring a jSignage layer. Therefore, the solution is to add the shape into a jSignage layer (typically a group) and then apply the effect, the custom animation or the frame decoration - something like:

$.g({ frame: { frameColor: 'red'} }).add($.<shape>).<effect>

Parameters

These functions are taking one parameter (type: Plain Object) containing the specific attributes required by each function, along with the fill and stroke attributes, which are common to all of them.

Note that frame decoration attributes cannot be used for shapes (see the notes section below).

Fill and stroke attributes

The jSignage shapes can be filled (which means painting the interior of the shape) and stroked (which means painting along the outline of the shape). The following attributes are supported for these painting operations:

fill
Type: Paint. Default: 'black'.

Specifies how the interior of the given shape should be painted; can be 'none' for a transparent interior, a solid color or a gradient.

fillOpacity
Type: Number. Default: 1.

Specifies the opacity of the painting operation for the interior the shape. The accepted values are between 0.0 (fully transparent) and 1.0 (fully opaque).

fillRule
Type: String. Default: 'nonzero'.

Indicates the filling rule to be used to determine what parts of the canvas are included inside the shape. Can be 'nonzero', 'evenodd' or 'inherit'.

stroke
Type: Paint. Default: 'none'.

Specifies how the exterior of the given shape should be painted; can be 'none' for no frame, a solid color or a gradient.

strokeDashArray
Type: String. Default: 'none'.

Specifies the pattern of dashes and gaps used to stroke the outline; can be 'none' or a list that specifies the lengths of alternating dashes and gaps separated by comas (e.g. '5,3,2,5,3,2').

strokeDashOffset
Type: Number. Default: 0.

Specifies the distance into the dash pattern used to start the dash. The length can also be negative.

strokeLineCap
Type: String. Default: 'butt'.

Specifies the shape used at the end of open sub-paths; can be 'butt', 'round' or 'square'.

strokeLineJoin
Type: String. Default: 'miter'.

Specifies the shape used at the corners of shapes when they are stroked; can be 'miter', 'round' or 'bevel'.

strokeMiterLimit
Type: Number. Default: 4.

Specifies the limit on the ratio of the miter length to the stroke width when strokeLineJoin: 'miter'.

strokeOpacity
Type: Number. Default: 1.

Specifies the opacity of the painting operation for the stroke. The accepted values are between 0.0 (fully transparent) and 1.0 (fully opaque).

strokeWidth
Type: Number . Default: 1.

The width of the stroke in pixels. No stroke is painted for a zero value.

Examples

Rectangle example

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

Circle example

// 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');

Line example

// draw a dashed blue line and add it to the document
$.line({ 
    x1: 80, y1: 400, x2: 1200, y2: 400, 
    stroke: 'blue', strokeWidth: 20, strokeLineCap: 'round', strokeDashArray: '40, 50' 
}).addTo('svg');

Polygon example

// draw a blue-stroked red star and add it to the document
$.polygon( {
    fill:'red', stroke: 'blue', strokeWidth: 5,
    points: [ '350,  75', '379, 161', '469, 161', '397, 215', '423, 301', 
              '350, 250', '277, 301', '303, 215', '231, 161', '321, 161' ]
}).addTo('svg');

Path example

// draw a red triangle with blue outline and add it to the document
$.path( {
    fill:'red', stroke: 'blue', strokeWidth: 3,
    d: new $.pathData().moveTo( 100, 100 ).lineTo( 300, 100).lineTo( 200, 300).close()
}).addTo('svg');

Gradient rectangle example

// add a blue to red horizontal gradient to the document
var gradient = $.linearGradient({ 
    x1: 320, y1: 0, x2: 960, y2: 0, 
    stops: [ { offset: 0, color: 'blue' }, 
             { offset: 1, color: 'red' } ] 
}).addTo('svg');

// draw a rectangle filled with the linear gradient created above
$.rect({ 
    x: 320, y: 180, width: 640, height: 360, 
    stroke: 'black', 
    fill: gradient.ref() 
}).addTo('svg');

Advanced examples

Drawing a complete graph

Draw a complete graph using axis and labels.

This example uses:

Lines for the axis
TextArea for the labels
Paths and circles for the graph of the data.

In this example the data is hard coded into the file. However the AJAX framework could be used to retrieve data from external file or remote servers.

var label = [ 'Jan 2010', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec',
              'Jan 2011', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep' ];
               
var rate1 = [ 1.47652, 1.46712, 1.44824, 1.43362, 1.41811, 1.37674, 1.34603, 1.34257, 1.30888, 1.34524, 1.3442, 1.28107, 
              1.27907, 1.29758, 1.28666, 1.29704, 1.25372, 1.20917, 1.17659, 1.12028, 1.18173 ];
 
var rate2 = [ 1.42721, 1.36857, 1.35685, 1.34095, 1.25653, 1.22085, 1.277, 1.29029, 1.3067, 1.38978, 1.3661, 1.32201, 
              1.33654, 1.36452, 1.39992, 1.44484, 1.43486, 1.43884, 1.42643, 1.43432, 1.39692 ];
 
function graph( data, min, max, width, height, offx, delta, clr){
   var path = new $.pathData();
   for ( i in data ) {
     val = (data[i]-min) * height/(max-min);
     if ( i==0 )
       path.moveTo( offx+i*delta, height-val );
     else
       path.lineTo( offx+i*delta, height-val );
     $.circle( { cx: offx+i*delta, cy: height-val, r: 10 } ).addTo('svg');
   }
   $.path( { fill:'none', stroke: clr, strokeWidth: 5, d: path }).addTo('svg');
}
function fullGraph( data, label, min, max, width, height ) {
    var offx = 80, offy = 70;
    var ticksx=8;
    var tw =7;
    var clr = [ 'red', 'blue' ], strokeC = 'black';
    
    width-=offx;
    height-=offy;
    var delta = width/(data[0].length-1);
    
    // the frame
    $.line( { x1: offx, y1: 0, x2: offx, y2: height, stroke: strokeC, strokeWidth: 5  } ).addTo('svg');
    $.line( { x1: offx, y1: height, x2: offx+width, y2: height, stroke: strokeC, strokeWidth: 5  } ).addTo('svg');
    
    // the ticks
    var g1 = $.g().addTo( 'svg' );
    // the ticks
    for ( i=0; i<ticksx+1; i++ ){
        y = i*height/ticksx;
        $.line( { x1: offx-tw, y1: y, x2: offx+tw, y2: y, stroke: strokeC, strokeWidth: 3 } ).addTo( g1 );
        v = ( max-i*(max-min)/ticksx ).toFixed(2);
        $.textArea( { top: y-18, left: 0, height: 25, width: offx, fontSize: 20 } ).tspan( v ).addTo( g1 );
    }
    var g2 = $.g().addTo( 'svg' );
    for ( i=0; i<data[0].length; i++ ){
        x = i*delta+offx;
        $.line( { x1: x, y1: height-tw, x2: x, y2: height+tw, stroke: strokeC, strokeWidth: 3  } ).addTo( g2 );
        $.textArea( { top: height, left: x-delta/2, height: offy, width: delta, fontSize: 20 } ).tspan( label[i] ).addTo( g1 );
    }
    
    // the data
    for ( k in data ) {
      graph( data[k], min, max, width, height, offx, delta, clr[k] ); 
    }
}
$(function(){ 
    fullGraph( [rate1, rate2], label, 1.1, 1.5, 1280, 720 );
});

Chart pie with highlight

Draw a pie chart with one slice being highlighted with some zoom effects.