Shape factory

A factory for generating shape-based entitys from SVG path Strings

Path-defined entitys represent a diverse range of shapes rendered onto a DOM <canvas> element using the Canvas API’s Path2D interface. They use the shapeBasic and shapePathCalculation (some also use shapeCurve) mixins to define much of their functionality.

All path-defined entitys can be positioned, cloned, filtered etc:

• Positioning functionality for the entity is supplied by the position mixin, while rendering functionality comes from the entity mixin.
• Dimensions, however, have little meaning for path-defined entitys - their width and height are determined by their SVG path data Strings; use scale instead.
• Path-defined entitys can use CSS color Strings for their fillStyle and strokeStyle values, alongside Gradient, RadialGradient, Color and Pattern objects.
• They will also accept Filter objects.
• They can use Anchor objects for user navigation.
• They can be rendered to the canvas by including them in a Cell object’s Group.
• They can be animated directly, or using delta animation, or act as the target for Tween animations.
• Path-defined entitys can be cloned, and killed.

Using path-defined entitys as Scrawl-canvas paths

A path is a track - straight, or curved, or as complex as required - placed across a container which artefacts can use as a source of their positioning data. We can animate an artifact to move along the path:

• To enable a path-defined entity to be used as a path by other artefacts, set its useAsPath flag to true.
• The artefact can then set its path attribute to the path-defined entity’s name-String (or the entity itself), and set its lockTo Array values to "path".
• We position the artefact by setting its pathPosition attribute to a float Number value between 0.0 - 1.0, with 0 being the start of the path, and 1 being its end.
• Path-defined entitys can use other path-defined entitys as a path.
• Phrase entitys can use a path to position their text block; they can also use a path to position each letter individually along the path.
• Artefacts (and letters) can be rotated so that they match the rotation at that point along the path - tangential rotation by setting their addPathRotation flag to true.
• Animate an artefact along the path by either using the artefact’s delta object, or triggering a Tween to perform the movement.

Demos:

• Canvas-011 - Shape entity (make, clone, method); drag and drop shape entitys
• Canvas-012 - Shape entity position; shape entity as a path for other artefacts to follow
• Canvas-013 - Path-defined entitys: oval, rectangle, line, quadratic, bezier, tetragon, polygon, star, spiral
• Canvas-014 - Line, quadratic and bezier entitys - control lock alternatives
• Canvas-018 - Phrase entity - text along a path
• Canvas-024 - Loom entity functionality
• Canvas-030 - Polyline entity functionality
• Canvas-038 - Responsive Shape-based entitys
• DOM-015 - Use stacked DOM artefact corners as pivot points
• Component-004 - Scrawl-canvas packets - save and load a range of different entitys

Imports

Shape constructor

Shape prototype

Mixins

• base
• shapeBasic

Shape attributes

• Attributes defined in the base mixin: name.
• Attributes defined in the position mixin: group, visibility, order, start, startX, startY, handle, handleX, handleY, offset, offsetX, offsetY, dimensions, width, height, pivoted, mimicked, lockTo, lockXTo, lockYTo, scale, roll, noUserInteraction, noPositionDependencies, noCanvasEngineUpdates, noFilters, noPathUpdates, purge, bringToFrontOnDrag.
• Attributes defined in the delta mixin: delta, noDeltaUpdates.
• Attributes defined in the pivot mixin: pivot, pivotCorner, addPivotHandle, addPivotOffset, addPivotRotation.
• Attributes defined in the mimic mixin: mimic, useMimicDimensions, useMimicScale, useMimicStart, useMimicHandle, useMimicOffset, useMimicRotation, useMimicFlip, addOwnDimensionsToMimic, addOwnScaleToMimic, addOwnStartToMimic, addOwnHandleToMimic, addOwnOffsetToMimic, addOwnRotationToMimic.
• Attributes defined in the path mixin: path, pathPosition, addPathHandle, addPathOffset, addPathRotation, constantPathSpeed.
• Attributes defined in the entity mixin: method, pathObject, winding, flipReverse, flipUpend, scaleOutline, lockFillStyleToEntity, lockStrokeStyleToEntity, onEnter, onLeave, onDown, onUp, fillStyle, strokeStyle, globalAlpha, globalCompositeOperation, lineWidth, lineCap, lineJoin, lineDash, lineDashOffset, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, filter.
• Attributes defined in the anchor mixin: anchor.
• Attributes defined in the filter mixin: filters, isStencil.
• Attributes defined in the shapeBasic mixin: species, useAsPath, precision, pathDefinition, showBoundingBox, boundingBoxColor, minimumBoundingBoxDimensions, constantPathSpeed.

No additional attributes defined here.

Packet management

No additional packet functionality required

Clone management

No additional clone functionality required

Kill management

No additional kill functionality required

Get, Set, deltaSet

let S = P.setters;

Prototype functions

cleanSpecies - internal helper function - called by prepareStamp

Factories

makeShape

Accepts argument with attributes:

• pathDefinition (required) - an SVG d attribute String

scrawl.makeShape({

    name: 'myArrow',

    pathDefinition: 'M266.2,703.1 h-178 L375.1,990 l287-286.9 H481.9 C507.4,365,683.4,91.9,911.8,25.5 877,15.4,840.9,10,803.9,10 525.1,10,295.5,313.4,266.2,703.1 z',

    startX: 300,
    startY: 200,
    handleX: '50%',
    handleY: '50%',

    scale: 0.2,
    scaleOutline: false,

    fillStyle: 'lightgreen',

    method: 'fill',
});

Exports