521 lines
21 KiB
JavaScript
521 lines
21 KiB
JavaScript
import { Circle } from '../../../../maths/shapes/Circle.mjs';
|
|
import { Ellipse } from '../../../../maths/shapes/Ellipse.mjs';
|
|
import { Polygon } from '../../../../maths/shapes/Polygon.mjs';
|
|
import { Rectangle } from '../../../../maths/shapes/Rectangle.mjs';
|
|
import { RoundedRectangle } from '../../../../maths/shapes/RoundedRectangle.mjs';
|
|
import { Bounds } from '../../../container/bounds/Bounds.mjs';
|
|
import { buildAdaptiveBezier } from '../buildCommands/buildAdaptiveBezier.mjs';
|
|
import { buildAdaptiveQuadratic } from '../buildCommands/buildAdaptiveQuadratic.mjs';
|
|
import { buildArc } from '../buildCommands/buildArc.mjs';
|
|
import { buildArcTo } from '../buildCommands/buildArcTo.mjs';
|
|
import { buildArcToSvg } from '../buildCommands/buildArcToSvg.mjs';
|
|
import { roundedShapeQuadraticCurve, roundedShapeArc } from './roundShape.mjs';
|
|
|
|
"use strict";
|
|
const tempRectangle = new Rectangle();
|
|
class ShapePath {
|
|
constructor(graphicsPath2D) {
|
|
/** The list of shape primitives that make up the path. */
|
|
this.shapePrimitives = [];
|
|
this._currentPoly = null;
|
|
this._bounds = new Bounds();
|
|
this._graphicsPath2D = graphicsPath2D;
|
|
}
|
|
/**
|
|
* Sets the starting point for a new sub-path. Any subsequent drawing commands are considered part of this path.
|
|
* @param x - The x-coordinate for the starting point.
|
|
* @param y - The y-coordinate for the starting point.
|
|
* @returns The instance of the current object for chaining.
|
|
*/
|
|
moveTo(x, y) {
|
|
this.startPoly(x, y);
|
|
return this;
|
|
}
|
|
/**
|
|
* Connects the current point to a new point with a straight line. This method updates the current path.
|
|
* @param x - The x-coordinate of the new point to connect to.
|
|
* @param y - The y-coordinate of the new point to connect to.
|
|
* @returns The instance of the current object for chaining.
|
|
*/
|
|
lineTo(x, y) {
|
|
this._ensurePoly();
|
|
const points = this._currentPoly.points;
|
|
const fromX = points[points.length - 2];
|
|
const fromY = points[points.length - 1];
|
|
if (fromX !== x || fromY !== y) {
|
|
points.push(x, y);
|
|
}
|
|
return this;
|
|
}
|
|
/**
|
|
* Adds an arc to the path. The arc is centered at (x, y)
|
|
* position with radius `radius` starting at `startAngle` and ending at `endAngle`.
|
|
* @param x - The x-coordinate of the arc's center.
|
|
* @param y - The y-coordinate of the arc's center.
|
|
* @param radius - The radius of the arc.
|
|
* @param startAngle - The starting angle of the arc, in radians.
|
|
* @param endAngle - The ending angle of the arc, in radians.
|
|
* @param counterclockwise - Specifies whether the arc should be drawn in the anticlockwise direction. False by default.
|
|
* @returns The instance of the current object for chaining.
|
|
*/
|
|
arc(x, y, radius, startAngle, endAngle, counterclockwise) {
|
|
this._ensurePoly(false);
|
|
const points = this._currentPoly.points;
|
|
buildArc(points, x, y, radius, startAngle, endAngle, counterclockwise);
|
|
return this;
|
|
}
|
|
/**
|
|
* Adds an arc to the path with the arc tangent to the line joining two specified points.
|
|
* The arc radius is specified by `radius`.
|
|
* @param x1 - The x-coordinate of the first point.
|
|
* @param y1 - The y-coordinate of the first point.
|
|
* @param x2 - The x-coordinate of the second point.
|
|
* @param y2 - The y-coordinate of the second point.
|
|
* @param radius - The radius of the arc.
|
|
* @returns The instance of the current object for chaining.
|
|
*/
|
|
arcTo(x1, y1, x2, y2, radius) {
|
|
this._ensurePoly();
|
|
const points = this._currentPoly.points;
|
|
buildArcTo(points, x1, y1, x2, y2, radius);
|
|
return this;
|
|
}
|
|
/**
|
|
* Adds an SVG-style arc to the path, allowing for elliptical arcs based on the SVG spec.
|
|
* @param rx - The x-radius of the ellipse.
|
|
* @param ry - The y-radius of the ellipse.
|
|
* @param xAxisRotation - The rotation of the ellipse's x-axis relative
|
|
* to the x-axis of the coordinate system, in degrees.
|
|
* @param largeArcFlag - Determines if the arc should be greater than or less than 180 degrees.
|
|
* @param sweepFlag - Determines if the arc should be swept in a positive angle direction.
|
|
* @param x - The x-coordinate of the arc's end point.
|
|
* @param y - The y-coordinate of the arc's end point.
|
|
* @returns The instance of the current object for chaining.
|
|
*/
|
|
arcToSvg(rx, ry, xAxisRotation, largeArcFlag, sweepFlag, x, y) {
|
|
const points = this._currentPoly.points;
|
|
buildArcToSvg(
|
|
points,
|
|
this._currentPoly.lastX,
|
|
this._currentPoly.lastY,
|
|
x,
|
|
y,
|
|
rx,
|
|
ry,
|
|
xAxisRotation,
|
|
largeArcFlag,
|
|
sweepFlag
|
|
);
|
|
return this;
|
|
}
|
|
/**
|
|
* Adds a cubic Bezier curve to the path.
|
|
* It requires three points: the first two are control points and the third one is the end point.
|
|
* The starting point is the last point in the current path.
|
|
* @param cp1x - The x-coordinate of the first control point.
|
|
* @param cp1y - The y-coordinate of the first control point.
|
|
* @param cp2x - The x-coordinate of the second control point.
|
|
* @param cp2y - The y-coordinate of the second control point.
|
|
* @param x - The x-coordinate of the end point.
|
|
* @param y - The y-coordinate of the end point.
|
|
* @param smoothness - Optional parameter to adjust the smoothness of the curve.
|
|
* @returns The instance of the current object for chaining.
|
|
*/
|
|
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y, smoothness) {
|
|
this._ensurePoly();
|
|
const currentPoly = this._currentPoly;
|
|
buildAdaptiveBezier(
|
|
this._currentPoly.points,
|
|
currentPoly.lastX,
|
|
currentPoly.lastY,
|
|
cp1x,
|
|
cp1y,
|
|
cp2x,
|
|
cp2y,
|
|
x,
|
|
y,
|
|
smoothness
|
|
);
|
|
return this;
|
|
}
|
|
/**
|
|
* Adds a quadratic curve to the path. It requires two points: the control point and the end point.
|
|
* The starting point is the last point in the current path.
|
|
* @param cp1x - The x-coordinate of the control point.
|
|
* @param cp1y - The y-coordinate of the control point.
|
|
* @param x - The x-coordinate of the end point.
|
|
* @param y - The y-coordinate of the end point.
|
|
* @param smoothing - Optional parameter to adjust the smoothness of the curve.
|
|
* @returns The instance of the current object for chaining.
|
|
*/
|
|
quadraticCurveTo(cp1x, cp1y, x, y, smoothing) {
|
|
this._ensurePoly();
|
|
const currentPoly = this._currentPoly;
|
|
buildAdaptiveQuadratic(
|
|
this._currentPoly.points,
|
|
currentPoly.lastX,
|
|
currentPoly.lastY,
|
|
cp1x,
|
|
cp1y,
|
|
x,
|
|
y,
|
|
smoothing
|
|
);
|
|
return this;
|
|
}
|
|
/**
|
|
* Closes the current path by drawing a straight line back to the start.
|
|
* If the shape is already closed or there are no points in the path, this method does nothing.
|
|
* @returns The instance of the current object for chaining.
|
|
*/
|
|
closePath() {
|
|
this.endPoly(true);
|
|
return this;
|
|
}
|
|
/**
|
|
* Adds another path to the current path. This method allows for the combination of multiple paths into one.
|
|
* @param path - The `GraphicsPath` object representing the path to add.
|
|
* @param transform - An optional `Matrix` object to apply a transformation to the path before adding it.
|
|
* @returns The instance of the current object for chaining.
|
|
*/
|
|
addPath(path, transform) {
|
|
this.endPoly();
|
|
if (transform && !transform.isIdentity()) {
|
|
path = path.clone(true);
|
|
path.transform(transform);
|
|
}
|
|
for (let i = 0; i < path.instructions.length; i++) {
|
|
const instruction = path.instructions[i];
|
|
this[instruction.action](...instruction.data);
|
|
}
|
|
return this;
|
|
}
|
|
/**
|
|
* Finalizes the drawing of the current path. Optionally, it can close the path.
|
|
* @param closePath - A boolean indicating whether to close the path after finishing. False by default.
|
|
*/
|
|
finish(closePath = false) {
|
|
this.endPoly(closePath);
|
|
}
|
|
/**
|
|
* Draws a rectangle shape. This method adds a new rectangle path to the current drawing.
|
|
* @param x - The x-coordinate of the top-left corner of the rectangle.
|
|
* @param y - The y-coordinate of the top-left corner of the rectangle.
|
|
* @param w - The width of the rectangle.
|
|
* @param h - The height of the rectangle.
|
|
* @param transform - An optional `Matrix` object to apply a transformation to the rectangle.
|
|
* @returns The instance of the current object for chaining.
|
|
*/
|
|
rect(x, y, w, h, transform) {
|
|
this.drawShape(new Rectangle(x, y, w, h), transform);
|
|
return this;
|
|
}
|
|
/**
|
|
* Draws a circle shape. This method adds a new circle path to the current drawing.
|
|
* @param x - The x-coordinate of the center of the circle.
|
|
* @param y - The y-coordinate of the center of the circle.
|
|
* @param radius - The radius of the circle.
|
|
* @param transform - An optional `Matrix` object to apply a transformation to the circle.
|
|
* @returns The instance of the current object for chaining.
|
|
*/
|
|
circle(x, y, radius, transform) {
|
|
this.drawShape(new Circle(x, y, radius), transform);
|
|
return this;
|
|
}
|
|
/**
|
|
* Draws a polygon shape. This method allows for the creation of complex polygons by specifying a sequence of points.
|
|
* @param points - An array of numbers, or or an array of PointData objects eg [{x,y}, {x,y}, {x,y}]
|
|
* representing the x and y coordinates of the polygon's vertices, in sequence.
|
|
* @param close - A boolean indicating whether to close the polygon path. True by default.
|
|
* @param transform - An optional `Matrix` object to apply a transformation to the polygon.
|
|
* @returns The instance of the current object for chaining.
|
|
*/
|
|
poly(points, close, transform) {
|
|
const polygon = new Polygon(points);
|
|
polygon.closePath = close;
|
|
this.drawShape(polygon, transform);
|
|
return this;
|
|
}
|
|
/**
|
|
* Draws a regular polygon with a specified number of sides. All sides and angles are equal.
|
|
* @param x - The x-coordinate of the center of the polygon.
|
|
* @param y - The y-coordinate of the center of the polygon.
|
|
* @param radius - The radius of the circumscribed circle of the polygon.
|
|
* @param sides - The number of sides of the polygon. Must be 3 or more.
|
|
* @param rotation - The rotation angle of the polygon, in radians. Zero by default.
|
|
* @param transform - An optional `Matrix` object to apply a transformation to the polygon.
|
|
* @returns The instance of the current object for chaining.
|
|
*/
|
|
regularPoly(x, y, radius, sides, rotation = 0, transform) {
|
|
sides = Math.max(sides | 0, 3);
|
|
const startAngle = -1 * Math.PI / 2 + rotation;
|
|
const delta = Math.PI * 2 / sides;
|
|
const polygon = [];
|
|
for (let i = 0; i < sides; i++) {
|
|
const angle = i * delta + startAngle;
|
|
polygon.push(
|
|
x + radius * Math.cos(angle),
|
|
y + radius * Math.sin(angle)
|
|
);
|
|
}
|
|
this.poly(polygon, true, transform);
|
|
return this;
|
|
}
|
|
/**
|
|
* Draws a polygon with rounded corners.
|
|
* Similar to `regularPoly` but with the ability to round the corners of the polygon.
|
|
* @param x - The x-coordinate of the center of the polygon.
|
|
* @param y - The y-coordinate of the center of the polygon.
|
|
* @param radius - The radius of the circumscribed circle of the polygon.
|
|
* @param sides - The number of sides of the polygon. Must be 3 or more.
|
|
* @param corner - The radius of the rounding of the corners.
|
|
* @param rotation - The rotation angle of the polygon, in radians. Zero by default.
|
|
* @param smoothness - Optional parameter to adjust the smoothness of the rounding.
|
|
* @returns The instance of the current object for chaining.
|
|
*/
|
|
roundPoly(x, y, radius, sides, corner, rotation = 0, smoothness) {
|
|
sides = Math.max(sides | 0, 3);
|
|
if (corner <= 0) {
|
|
return this.regularPoly(x, y, radius, sides, rotation);
|
|
}
|
|
const sideLength = radius * Math.sin(Math.PI / sides) - 1e-3;
|
|
corner = Math.min(corner, sideLength);
|
|
const startAngle = -1 * Math.PI / 2 + rotation;
|
|
const delta = Math.PI * 2 / sides;
|
|
const internalAngle = (sides - 2) * Math.PI / sides / 2;
|
|
for (let i = 0; i < sides; i++) {
|
|
const angle = i * delta + startAngle;
|
|
const x0 = x + radius * Math.cos(angle);
|
|
const y0 = y + radius * Math.sin(angle);
|
|
const a1 = angle + Math.PI + internalAngle;
|
|
const a2 = angle - Math.PI - internalAngle;
|
|
const x1 = x0 + corner * Math.cos(a1);
|
|
const y1 = y0 + corner * Math.sin(a1);
|
|
const x3 = x0 + corner * Math.cos(a2);
|
|
const y3 = y0 + corner * Math.sin(a2);
|
|
if (i === 0) {
|
|
this.moveTo(x1, y1);
|
|
} else {
|
|
this.lineTo(x1, y1);
|
|
}
|
|
this.quadraticCurveTo(x0, y0, x3, y3, smoothness);
|
|
}
|
|
return this.closePath();
|
|
}
|
|
/**
|
|
* Draws a shape with rounded corners. This function supports custom radius for each corner of the shape.
|
|
* Optionally, corners can be rounded using a quadratic curve instead of an arc, providing a different aesthetic.
|
|
* @param points - An array of `RoundedPoint` representing the corners of the shape to draw.
|
|
* A minimum of 3 points is required.
|
|
* @param radius - The default radius for the corners.
|
|
* This radius is applied to all corners unless overridden in `points`.
|
|
* @param useQuadratic - If set to true, rounded corners are drawn using a quadraticCurve
|
|
* method instead of an arc method. Defaults to false.
|
|
* @param smoothness - Specifies the smoothness of the curve when `useQuadratic` is true.
|
|
* Higher values make the curve smoother.
|
|
* @returns The instance of the current object for chaining.
|
|
*/
|
|
roundShape(points, radius, useQuadratic = false, smoothness) {
|
|
if (points.length < 3) {
|
|
return this;
|
|
}
|
|
if (useQuadratic) {
|
|
roundedShapeQuadraticCurve(this, points, radius, smoothness);
|
|
} else {
|
|
roundedShapeArc(this, points, radius);
|
|
}
|
|
return this.closePath();
|
|
}
|
|
/**
|
|
* Draw Rectangle with fillet corners. This is much like rounded rectangle
|
|
* however it support negative numbers as well for the corner radius.
|
|
* @param x - Upper left corner of rect
|
|
* @param y - Upper right corner of rect
|
|
* @param width - Width of rect
|
|
* @param height - Height of rect
|
|
* @param fillet - accept negative or positive values
|
|
*/
|
|
filletRect(x, y, width, height, fillet) {
|
|
if (fillet === 0) {
|
|
return this.rect(x, y, width, height);
|
|
}
|
|
const maxFillet = Math.min(width, height) / 2;
|
|
const inset = Math.min(maxFillet, Math.max(-maxFillet, fillet));
|
|
const right = x + width;
|
|
const bottom = y + height;
|
|
const dir = inset < 0 ? -inset : 0;
|
|
const size = Math.abs(inset);
|
|
return this.moveTo(x, y + size).arcTo(x + dir, y + dir, x + size, y, size).lineTo(right - size, y).arcTo(right - dir, y + dir, right, y + size, size).lineTo(right, bottom - size).arcTo(right - dir, bottom - dir, x + width - size, bottom, size).lineTo(x + size, bottom).arcTo(x + dir, bottom - dir, x, bottom - size, size).closePath();
|
|
}
|
|
/**
|
|
* Draw Rectangle with chamfer corners. These are angled corners.
|
|
* @param x - Upper left corner of rect
|
|
* @param y - Upper right corner of rect
|
|
* @param width - Width of rect
|
|
* @param height - Height of rect
|
|
* @param chamfer - non-zero real number, size of corner cutout
|
|
* @param transform
|
|
*/
|
|
chamferRect(x, y, width, height, chamfer, transform) {
|
|
if (chamfer <= 0) {
|
|
return this.rect(x, y, width, height);
|
|
}
|
|
const inset = Math.min(chamfer, Math.min(width, height) / 2);
|
|
const right = x + width;
|
|
const bottom = y + height;
|
|
const points = [
|
|
x + inset,
|
|
y,
|
|
right - inset,
|
|
y,
|
|
right,
|
|
y + inset,
|
|
right,
|
|
bottom - inset,
|
|
right - inset,
|
|
bottom,
|
|
x + inset,
|
|
bottom,
|
|
x,
|
|
bottom - inset,
|
|
x,
|
|
y + inset
|
|
];
|
|
for (let i = points.length - 1; i >= 2; i -= 2) {
|
|
if (points[i] === points[i - 2] && points[i - 1] === points[i - 3]) {
|
|
points.splice(i - 1, 2);
|
|
}
|
|
}
|
|
return this.poly(points, true, transform);
|
|
}
|
|
/**
|
|
* Draws an ellipse at the specified location and with the given x and y radii.
|
|
* An optional transformation can be applied, allowing for rotation, scaling, and translation.
|
|
* @param x - The x-coordinate of the center of the ellipse.
|
|
* @param y - The y-coordinate of the center of the ellipse.
|
|
* @param radiusX - The horizontal radius of the ellipse.
|
|
* @param radiusY - The vertical radius of the ellipse.
|
|
* @param transform - An optional `Matrix` object to apply a transformation to the ellipse. This can include rotations.
|
|
* @returns The instance of the current object for chaining.
|
|
*/
|
|
ellipse(x, y, radiusX, radiusY, transform) {
|
|
this.drawShape(new Ellipse(x, y, radiusX, radiusY), transform);
|
|
return this;
|
|
}
|
|
/**
|
|
* Draws a rectangle with rounded corners.
|
|
* The corner radius can be specified to determine how rounded the corners should be.
|
|
* An optional transformation can be applied, which allows for rotation, scaling, and translation of the rectangle.
|
|
* @param x - The x-coordinate of the top-left corner of the rectangle.
|
|
* @param y - The y-coordinate of the top-left corner of the rectangle.
|
|
* @param w - The width of the rectangle.
|
|
* @param h - The height of the rectangle.
|
|
* @param radius - The radius of the rectangle's corners. If not specified, corners will be sharp.
|
|
* @param transform - An optional `Matrix` object to apply a transformation to the rectangle.
|
|
* @returns The instance of the current object for chaining.
|
|
*/
|
|
roundRect(x, y, w, h, radius, transform) {
|
|
this.drawShape(new RoundedRectangle(x, y, w, h, radius), transform);
|
|
return this;
|
|
}
|
|
/**
|
|
* Draws a given shape on the canvas.
|
|
* This is a generic method that can draw any type of shape specified by the `ShapePrimitive` parameter.
|
|
* An optional transformation matrix can be applied to the shape, allowing for complex transformations.
|
|
* @param shape - The shape to draw, defined as a `ShapePrimitive` object.
|
|
* @param matrix - An optional `Matrix` for transforming the shape. This can include rotations,
|
|
* scaling, and translations.
|
|
* @returns The instance of the current object for chaining.
|
|
*/
|
|
drawShape(shape, matrix) {
|
|
this.endPoly();
|
|
this.shapePrimitives.push({ shape, transform: matrix });
|
|
return this;
|
|
}
|
|
/**
|
|
* Starts a new polygon path from the specified starting point.
|
|
* This method initializes a new polygon or ends the current one if it exists.
|
|
* @param x - The x-coordinate of the starting point of the new polygon.
|
|
* @param y - The y-coordinate of the starting point of the new polygon.
|
|
* @returns The instance of the current object for chaining.
|
|
*/
|
|
startPoly(x, y) {
|
|
let currentPoly = this._currentPoly;
|
|
if (currentPoly) {
|
|
this.endPoly();
|
|
}
|
|
currentPoly = new Polygon();
|
|
currentPoly.points.push(x, y);
|
|
this._currentPoly = currentPoly;
|
|
return this;
|
|
}
|
|
/**
|
|
* Ends the current polygon path. If `closePath` is set to true,
|
|
* the path is closed by connecting the last point to the first one.
|
|
* This method finalizes the current polygon and prepares it for drawing or adding to the shape primitives.
|
|
* @param closePath - A boolean indicating whether to close the polygon by connecting the last point
|
|
* back to the starting point. False by default.
|
|
* @returns The instance of the current object for chaining.
|
|
*/
|
|
endPoly(closePath = false) {
|
|
const shape = this._currentPoly;
|
|
if (shape && shape.points.length > 2) {
|
|
shape.closePath = closePath;
|
|
this.shapePrimitives.push({ shape });
|
|
}
|
|
this._currentPoly = null;
|
|
return this;
|
|
}
|
|
_ensurePoly(start = true) {
|
|
if (this._currentPoly)
|
|
return;
|
|
this._currentPoly = new Polygon();
|
|
if (start) {
|
|
const lastShape = this.shapePrimitives[this.shapePrimitives.length - 1];
|
|
if (lastShape) {
|
|
let lx = lastShape.shape.x;
|
|
let ly = lastShape.shape.y;
|
|
if (lastShape.transform && !lastShape.transform.isIdentity()) {
|
|
const t = lastShape.transform;
|
|
const tempX = lx;
|
|
lx = t.a * lx + t.c * ly + t.tx;
|
|
ly = t.b * tempX + t.d * ly + t.ty;
|
|
}
|
|
this._currentPoly.points.push(lx, ly);
|
|
} else {
|
|
this._currentPoly.points.push(0, 0);
|
|
}
|
|
}
|
|
}
|
|
/** Builds the path. */
|
|
buildPath() {
|
|
const path = this._graphicsPath2D;
|
|
this.shapePrimitives.length = 0;
|
|
this._currentPoly = null;
|
|
for (let i = 0; i < path.instructions.length; i++) {
|
|
const instruction = path.instructions[i];
|
|
this[instruction.action](...instruction.data);
|
|
}
|
|
this.finish();
|
|
}
|
|
/** Gets the bounds of the path. */
|
|
get bounds() {
|
|
const bounds = this._bounds;
|
|
bounds.clear();
|
|
const shapePrimitives = this.shapePrimitives;
|
|
for (let i = 0; i < shapePrimitives.length; i++) {
|
|
const shapePrimitive = shapePrimitives[i];
|
|
const boundsRect = shapePrimitive.shape.getBounds(tempRectangle);
|
|
if (shapePrimitive.transform) {
|
|
bounds.addRect(boundsRect, shapePrimitive.transform);
|
|
} else {
|
|
bounds.addRect(boundsRect);
|
|
}
|
|
}
|
|
return bounds;
|
|
}
|
|
}
|
|
|
|
export { ShapePath };
|
|
//# sourceMappingURL=ShapePath.mjs.map
|