import { constructors } from '../core/library.js';
import { mergeOver } from '../core/utilities.js';
import { requestVector, releaseVector } from './vector.js';
import baseMix from '../mixin/base.js';
import shapeMix from '../mixin/shapeBasic.js';A factory for generating various straight-edged polygon shape-based entitys
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:
scale instead.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:
useAsPath flag to true.path attribute to the path-defined entity’s name-String (or the entity itself), and set its lockTo Array values to "path".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.addPathRotation flag to true.delta object, or triggering a Tween to perform the movement.import { constructors } from '../core/library.js';
import { mergeOver } from '../core/utilities.js';
import { requestVector, releaseVector } from './vector.js';
import baseMix from '../mixin/base.js';
import shapeMix from '../mixin/shapeBasic.js';const Polygon = function (items = {}) {
this.shapeInit(items);
return this;
};let P = Polygon.prototype = Object.create(Object.prototype);
P.type = 'Polygon';
P.lib = 'entity';
P.isArtefact = true;
P.isAsset = false;P = baseMix(P);
P = shapeMix(P);let defaultAttributes = {
sides: 0,
radius: 0,
};
P.defs = mergeOver(P.defs, defaultAttributes);let S = P.setters,
D = P.deltaSetters;sides
S.sides = function (item) {
this.sides = item;
this.updateDirty();
};
D.sides = function (item) {
this.sides += item;
this.updateDirty();
};sideLength
S.radius = function (item) {
this.radius = item;
this.updateDirty();
};
D.radius = function (item) {
this.radius += item;
this.updateDirty();
};cleanSpecies - internal helper function - called by prepareStamp
P.cleanSpecies = function () {
this.dirtySpecies = false;
let p = 'M0,0';
p = this.makePolygonPath();
this.pathDefinition = p;
};makePolygonPath - internal helper function - called by cleanSpecies
P.makePolygonPath = function () {
let radius = this.radius,
sides = this.sides,
turn = 360 / sides,
myPath = ``,
yPts = [],
currentY = 0,
myMax, myMin, myYoffset;
let v = requestVector({x: 0, y: -radius});
for (let i = 0; i < sides; i++) {
v.rotate(turn);
currentY += v.y;
yPts.push(currentY);
myPath += `${v.x.toFixed(1)},${v.y.toFixed(1)} `;
}
releaseVector(v);
myMin = Math.min(...yPts);
myMax = Math.max(...yPts);
myYoffset = (((Math.abs(myMin) + Math.abs(myMax)) - radius) / 2).toFixed(1);
myPath = `m0,${myYoffset}l${myPath}z`;
return myPath;
};Accepts argument with attributes:
scrawl.makePolygon({
name: 'triangle',
startX: 20,
startY: 935,
radius: 60,
sides: 3,
fillStyle: 'lightblue',
method: 'fillAndDraw',
});const makePolygon = function (items = {}) {
items.species = 'polygon';
return new Polygon(items);
};
constructors.Polygon = Polygon;export {
makePolygon,
};