PERGOLA LOGO

Shapes Library

pergola.shapes (defined in lib/shapes.js) is an object whose properties represent a collection of shapes. Each object property defines the element string property –typically "path", "polyline", "polygon", but can be any primitive– and the corresponding geometrical attribute(s) ("d", "points"). A shape object does not define paint attributes.

To use a library shape you invoke pergola.use() passing an object specifying the properties: parent node, shape reference, and attributes object. For example, to use the triangle shape:

 pergola.use({
  parent : node,
  shape : pergola.shapes.triangle,
  attributes : {
    transform : "translate(80 -.5) scale(4)",
    fill : "#FFFFC0",
    stroke : "black",
    "stroke-width" : .25
  }
});
Notice how you can control the stroke width in respect to the scale factor.

Examples page.

A shape can also be referenced when instantiating a class that implements the shape property, for example pergola.Button, to override the default <rect> shape. Example:

 var shapeButton = new pergola.Button()
  .build({
    parent : node,
    x : 272,
    y : 214.5,
    fill : "#FF5000",
    stroke : "lightsteelblue",
    maskFill : "white",
    shape : pergola.shapes.triangle,
    extra : {transform : "scale(2 .5) rotate(180)"},
    quickTip : {tip : "library shape with transformations"}
  });
Note: rotations are always applied about the shape's center and only the shape is rotated, keeping symbols, images, and text upright.

Read also the Shapes library chapter in the tutorial.

pergola.shapes

triangle

pentagon

hexagon

heptagon

octagon

nonagon

decagon

dodecagon

rhombus

semicircle

star

heart

pied_de_poule