Shape Class

An instance of this class represents a shape defined through a series of arc, line and Bezier segments. The segments can be a part of the shape outline, in which case they define the part of the shape is filled, used for hit-testing and for aligning links to the node edges. Segments can also be added as decoration elements, in which case they only affect the appearance of a ShapeNode.

Namespace: MindFusion.Diagramming
Package: Shape.js

 Syntax

JavaScript

// class
Shape.prototype = {}

 Remarks

The Shape class can also be used as a component in composite nodes. When its isOutline attribute is set, the shape will control CompositeNode's geometry, defining hit test and clip area, and link alignment points along node's border. If isOutline is disabled, the shape will serve mostly as a decorative element. The code below shows a sample fragment specifying shape component in template:

JavaScript

{
    component: "Shape",
    id: "Cloud",
    autoProperty: true,
    name: "OutlineShape",
    pen: "gray",
    brush: "Transparent",
    isOutline: true
},

 Example

Custom shapes can be defined using SVG Path syntax. The following code creates custom shape geoometry and assigns it to a ShapeNode:

JavaScript

var shape = new MindFusion.Diagramming.Shape({
   id: "DoubleEllipse",
   outline: "M100,50 A50,50,0,1,1,0,50 A50,50,0,1,1,100,50",
   decoration: "M98,50 A48,48,0,1,1,2,50 A48,48,0,1,1,98,50",
   fillMode: "nonzero"});node.shape = shape;

 Inheritance Hierarchy

MindFusion.Drawing.ComponentBase
    MindFusion.Diagramming.Shape