evert/svgcanvas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed clipping behavior and handling of save/restore around stroke and fill.

Browse Source
This commit is contained in:
k1w1 2022-12-24 14:49:29 -08:00
parent fd024674c0
commit 4f7bcfec4c
5 changed files with 1669 additions and 1418 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

762
context.js
View File

File diff suppressed because it is too large Load Diff

4
package-lock.json generated
View File

@ -1,6 +1,6 @@
{ {
"name": "svgcanvas", "name": "@aha-app/svgcanvas",
"version": "2.5.0", "version": "2.5.0-a11",
"lockfileVersion": 1, "lockfileVersion": 1,
"requires": true, "requires": true,
"dependencies": { "dependencies": {

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@aha-app/svgcanvas", "name": "@aha-app/svgcanvas",
"version": "2.5.0-a6", "version": "2.5.0-a11",
"description": "svgcanvas", "description": "svgcanvas",
"main": "dist/svgcanvas.js", "main": "dist/svgcanvas.js",
"scripts": { "scripts": {

265
path2d.js
View File

@ -1,4 +1,4 @@
import { format } from './utils'; import { format } from "./utils";
export default (function () { export default (function () {
"use strict"; "use strict";
@ -9,10 +9,10 @@ export default (function () {
if (!ctx) { if (!ctx) {
console.error("Path2D must be passed the context"); console.error("Path2D must be passed the context");
} }
if (typeof arg === 'string') { if (typeof arg === "string") {
// Initialize from string path. // Initialize from string path.
this.__pathString = arg; this.__pathString = arg;
} else if (typeof arg === 'object') { } else if (typeof arg === "object") {
// Initialize by copying another path. // Initialize by copying another path.
this.__pathString = arg.__pathString; this.__pathString = arg.__pathString;
} else { } else {
@ -21,18 +21,19 @@ export default (function () {
} }
this.ctx = ctx; this.ctx = ctx;
this.__currentPosition = {x: undefined, y: undefined}; this.__currentPosition = { x: undefined, y: undefined };
} };
Path2D.prototype.__matrixTransform = function(x, y) { Path2D.prototype.__matrixTransform = function (x, y) {
return this.ctx.__matrixTransform(x, y); return this.ctx.__matrixTransform(x, y);
} };
Path2D.prototype.addPath = function(path, transform) { Path2D.prototype.addPath = function (path, transform) {
if (transform) console.error("transform argument to addPath is not supported"); if (transform)
console.error("transform argument to addPath is not supported");
this.__pathString = this.__pathString + " " + path; this.__pathString = this.__pathString + " " + path;
} };
/** /**
* Closes the current path * Closes the current path
@ -45,31 +46,36 @@ export default (function () {
* Adds the move command to the current path element, * Adds the move command to the current path element,
* if the currentPathElement is not empty create a new path element * if the currentPathElement is not empty create a new path element
*/ */
Path2D.prototype.moveTo = function (x,y) { Path2D.prototype.moveTo = function (x, y) {
// creates a new subpath with the given point // creates a new subpath with the given point
this.__currentPosition = {x: x, y: y}; this.__currentPosition = { x: x, y: y };
this.addPath(format("M {x} {y}", { this.addPath(
format("M {x} {y}", {
x: this.__matrixTransform(x, y).x, x: this.__matrixTransform(x, y).x,
y: this.__matrixTransform(x, y).y y: this.__matrixTransform(x, y).y,
})); })
);
}; };
/** /**
* Adds a line to command * Adds a line to command
*/ */
Path2D.prototype.lineTo = function (x, y) { Path2D.prototype.lineTo = function (x, y) {
this.__currentPosition = {x: x, y: y}; this.__currentPosition = { x: x, y: y };
if (this.__pathString.indexOf('M') > -1) { if (this.__pathString.indexOf("M") > -1) {
this.addPath(format("L {x} {y}", { this.addPath(
format("L {x} {y}", {
x: this.__matrixTransform(x, y).x, x: this.__matrixTransform(x, y).x,
y: this.__matrixTransform(x, y).y y: this.__matrixTransform(x, y).y,
})); })
);
} else { } else {
this.addPath(format("M {x} {y}", { this.addPath(
format("M {x} {y}", {
x: this.__matrixTransform(x, y).x, x: this.__matrixTransform(x, y).x,
y: this.__matrixTransform(x, y).y y: this.__matrixTransform(x, y).y,
})); })
);
} }
}; };
@ -77,73 +83,79 @@ export default (function () {
* Adds a rectangle to the path. * Adds a rectangle to the path.
*/ */
Path2D.prototype.rect = function (x, y, width, height) { Path2D.prototype.rect = function (x, y, width, height) {
if (this.__currentElement.nodeName !== "path") {
this.beginPath();
}
this.moveTo(x, y); this.moveTo(x, y);
this.lineTo(x+width, y); this.lineTo(x + width, y);
this.lineTo(x+width, y+height); this.lineTo(x + width, y + height);
this.lineTo(x, y+height); this.lineTo(x, y + height);
this.lineTo(x, y); this.lineTo(x, y);
this.closePath();
}; };
/** /**
* Add a bezier command * Add a bezier command
*/ */
Path2D.prototype.bezierCurveTo = function (cp1x, cp1y, cp2x, cp2y, x, y) { Path2D.prototype.bezierCurveTo = function (cp1x, cp1y, cp2x, cp2y, x, y) {
this.__currentPosition = {x: x, y: y}; this.__currentPosition = { x: x, y: y };
this.addPath(format("C {cp1x} {cp1y} {cp2x} {cp2y} {x} {y}", this.addPath(
{ format("C {cp1x} {cp1y} {cp2x} {cp2y} {x} {y}", {
cp1x: this.__matrixTransform(cp1x, cp1y).x, cp1x: this.__matrixTransform(cp1x, cp1y).x,
cp1y: this.__matrixTransform(cp1x, cp1y).y, cp1y: this.__matrixTransform(cp1x, cp1y).y,
cp2x: this.__matrixTransform(cp2x, cp2y).x, cp2x: this.__matrixTransform(cp2x, cp2y).x,
cp2y: this.__matrixTransform(cp2x, cp2y).y, cp2y: this.__matrixTransform(cp2x, cp2y).y,
x: this.__matrixTransform(x, y).x, x: this.__matrixTransform(x, y).x,
y: this.__matrixTransform(x, y).y y: this.__matrixTransform(x, y).y,
})); })
);
}; };
/** /**
* Adds a quadratic curve to command * Adds a quadratic curve to command
*/ */
Path2D.prototype.quadraticCurveTo = function (cpx, cpy, x, y) { Path2D.prototype.quadraticCurveTo = function (cpx, cpy, x, y) {
this.__currentPosition = {x: x, y: y}; this.__currentPosition = { x: x, y: y };
this.addPath(format("Q {cpx} {cpy} {x} {y}", { this.addPath(
format("Q {cpx} {cpy} {x} {y}", {
cpx: this.__matrixTransform(cpx, cpy).x, cpx: this.__matrixTransform(cpx, cpy).x,
cpy: this.__matrixTransform(cpx, cpy).y, cpy: this.__matrixTransform(cpx, cpy).y,
x: this.__matrixTransform(x, y).x, x: this.__matrixTransform(x, y).x,
y: this.__matrixTransform(x, y).y y: this.__matrixTransform(x, y).y,
})); })
);
}; };
/** /**
* Arc command! * Arc command!
*/ */
Path2D.prototype.arc = function (x, y, radius, startAngle, endAngle, counterClockwise) { Path2D.prototype.arc = function (
x,
y,
radius,
startAngle,
endAngle,
counterClockwise
) {
// in canvas no circle is drawn if no angle is provided. // in canvas no circle is drawn if no angle is provided.
if (startAngle === endAngle) { if (startAngle === endAngle) {
return; return;
} }
startAngle = startAngle % (2*Math.PI); startAngle = startAngle % (2 * Math.PI);
endAngle = endAngle % (2*Math.PI); endAngle = endAngle % (2 * Math.PI);
if (startAngle === endAngle) { if (startAngle === endAngle) {
//circle time! subtract some of the angle so svg is happy (svg elliptical arc can't draw a full circle) //circle time! subtract some of the angle so svg is happy (svg elliptical arc can't draw a full circle)
endAngle = ((endAngle + (2*Math.PI)) - 0.001 * (counterClockwise ? -1 : 1)) % (2*Math.PI); endAngle =
(endAngle + 2 * Math.PI - 0.001 * (counterClockwise ? -1 : 1)) %
(2 * Math.PI);
} }
var endX = x+radius*Math.cos(endAngle), var endX = x + radius * Math.cos(endAngle),
endY = y+radius*Math.sin(endAngle), endY = y + radius * Math.sin(endAngle),
startX = x+radius*Math.cos(startAngle), startX = x + radius * Math.cos(startAngle),
startY = y+radius*Math.sin(startAngle), startY = y + radius * Math.sin(startAngle),
sweepFlag = counterClockwise ? 0 : 1, sweepFlag = counterClockwise ? 0 : 1,
largeArcFlag = 0, largeArcFlag = 0,
diff = endAngle - startAngle; diff = endAngle - startAngle;
// https://github.com/gliffy/canvas2svg/issues/4 // https://github.com/gliffy/canvas2svg/issues/4
if (diff < 0) { if (diff < 0) {
diff += 2*Math.PI; diff += 2 * Math.PI;
} }
if (counterClockwise) { if (counterClockwise) {
@ -152,25 +164,34 @@ export default (function () {
largeArcFlag = diff > Math.PI ? 1 : 0; largeArcFlag = diff > Math.PI ? 1 : 0;
} }
var scaleX = Math.hypot(this.ctx.__transformMatrix.a, this.ctx.__transformMatrix.b); var scaleX = Math.hypot(
var scaleY = Math.hypot(this.ctx.__transformMatrix.c, this.ctx.__transformMatrix.d); this.ctx.__transformMatrix.a,
this.ctx.__transformMatrix.b
);
var scaleY = Math.hypot(
this.ctx.__transformMatrix.c,
this.ctx.__transformMatrix.d
);
this.lineTo(startX, startY); this.lineTo(startX, startY);
this.addPath(format("A {rx} {ry} {xAxisRotation} {largeArcFlag} {sweepFlag} {endX} {endY}", this.addPath(
format(
"A {rx} {ry} {xAxisRotation} {largeArcFlag} {sweepFlag} {endX} {endY}",
{ {
rx:radius * scaleX, rx: radius * scaleX,
ry:radius * scaleY, ry: radius * scaleY,
xAxisRotation:0, xAxisRotation: 0,
largeArcFlag:largeArcFlag, largeArcFlag: largeArcFlag,
sweepFlag:sweepFlag, sweepFlag: sweepFlag,
endX: this.__matrixTransform(endX, endY).x, endX: this.__matrixTransform(endX, endY).x,
endY: this.__matrixTransform(endX, endY).y endY: this.__matrixTransform(endX, endY).y,
})); }
)
);
this.__currentPosition = {x: endX, y: endY}; this.__currentPosition = { x: endX, y: endY };
}; };
/** /**
* Return a new normalized vector of given vector * Return a new normalized vector of given vector
*/ */
@ -196,7 +217,9 @@ export default (function () {
// Negative values for radius must cause the implementation to throw an IndexSizeError exception. // Negative values for radius must cause the implementation to throw an IndexSizeError exception.
if (radius < 0) { if (radius < 0) {
throw new Error("IndexSizeError: The radius provided (" + radius + ") is negative."); throw new Error(
"IndexSizeError: The radius provided (" + radius + ") is negative."
);
} }
// If the point (x0, y0) is equal to the point (x1, y1), // If the point (x0, y0) is equal to the point (x1, y1),
@ -204,9 +227,7 @@ export default (function () {
// or if the radius radius is zero, // or if the radius radius is zero,
// then the method must add the point (x1, y1) to the subpath, // then the method must add the point (x1, y1) to the subpath,
// and connect that point to the previous point (x0, y0) by a straight line. // and connect that point to the previous point (x0, y0) by a straight line.
if (((x0 === x1) && (y0 === y1)) if ((x0 === x1 && y0 === y1) || (x1 === x2 && y1 === y2) || radius === 0) {
|| ((x1 === x2) && (y1 === y2))
|| (radius === 0)) {
this.lineTo(x1, y1); this.lineTo(x1, y1);
return; return;
} }
@ -216,7 +237,10 @@ export default (function () {
// and connect that point to the previous point (x0, y0) by a straight line. // and connect that point to the previous point (x0, y0) by a straight line.
var unit_vec_p1_p0 = normalize([x0 - x1, y0 - y1]); var unit_vec_p1_p0 = normalize([x0 - x1, y0 - y1]);
var unit_vec_p1_p2 = normalize([x2 - x1, y2 - y1]); var unit_vec_p1_p2 = normalize([x2 - x1, y2 - y1]);
if (unit_vec_p1_p0[0] * unit_vec_p1_p2[1] === unit_vec_p1_p0[1] * unit_vec_p1_p2[0]) { if (
unit_vec_p1_p0[0] * unit_vec_p1_p2[1] ===
unit_vec_p1_p0[1] * unit_vec_p1_p2[0]
) {
this.lineTo(x1, y1); this.lineTo(x1, y1);
return; return;
} }
@ -227,13 +251,15 @@ export default (function () {
// The points at which this circle touches these two lines are called the start and end tangent points respectively. // The points at which this circle touches these two lines are called the start and end tangent points respectively.
// note that both vectors are unit vectors, so the length is 1 // note that both vectors are unit vectors, so the length is 1
var cos = (unit_vec_p1_p0[0] * unit_vec_p1_p2[0] + unit_vec_p1_p0[1] * unit_vec_p1_p2[1]); var cos =
unit_vec_p1_p0[0] * unit_vec_p1_p2[0] +
unit_vec_p1_p0[1] * unit_vec_p1_p2[1];
var theta = Math.acos(Math.abs(cos)); var theta = Math.acos(Math.abs(cos));
// Calculate origin // Calculate origin
var unit_vec_p1_origin = normalize([ var unit_vec_p1_origin = normalize([
unit_vec_p1_p0[0] + unit_vec_p1_p2[0], unit_vec_p1_p0[0] + unit_vec_p1_p2[0],
unit_vec_p1_p0[1] + unit_vec_p1_p2[1] unit_vec_p1_p0[1] + unit_vec_p1_p2[1],
]); ]);
var len_p1_origin = radius / Math.sin(theta / 2); var len_p1_origin = radius / Math.sin(theta / 2);
var x = x1 + len_p1_origin * unit_vec_p1_origin[0]; var x = x1 + len_p1_origin * unit_vec_p1_origin[0];
@ -241,20 +267,15 @@ export default (function () {
// Calculate start angle and end angle // Calculate start angle and end angle
// rotate 90deg clockwise (note that y axis points to its down) // rotate 90deg clockwise (note that y axis points to its down)
var unit_vec_origin_start_tangent = [ var unit_vec_origin_start_tangent = [-unit_vec_p1_p0[1], unit_vec_p1_p0[0]];
-unit_vec_p1_p0[1],
unit_vec_p1_p0[0]
];
// rotate 90deg counter clockwise (note that y axis points to its down) // rotate 90deg counter clockwise (note that y axis points to its down)
var unit_vec_origin_end_tangent = [ var unit_vec_origin_end_tangent = [unit_vec_p1_p2[1], -unit_vec_p1_p2[0]];
unit_vec_p1_p2[1],
-unit_vec_p1_p2[0]
];
var getAngle = function (vector) { var getAngle = function (vector) {
// get angle (clockwise) between vector and (1, 0) // get angle (clockwise) between vector and (1, 0)
var x = vector[0]; var x = vector[0];
var y = vector[1]; var y = vector[1];
if (y >= 0) { // note that y axis points to its down if (y >= 0) {
// note that y axis points to its down
return Math.acos(x); return Math.acos(x);
} else { } else {
return -Math.acos(x); return -Math.acos(x);
@ -264,19 +285,29 @@ export default (function () {
var endAngle = getAngle(unit_vec_origin_end_tangent); var endAngle = getAngle(unit_vec_origin_end_tangent);
// Connect the point (x0, y0) to the start tangent point by a straight line // Connect the point (x0, y0) to the start tangent point by a straight line
this.lineTo(x + unit_vec_origin_start_tangent[0] * radius, this.lineTo(
y + unit_vec_origin_start_tangent[1] * radius); x + unit_vec_origin_start_tangent[0] * radius,
y + unit_vec_origin_start_tangent[1] * radius
);
// Connect the start tangent point to the end tangent point by arc // Connect the start tangent point to the end tangent point by arc
// and adding the end tangent point to the subpath. // and adding the end tangent point to the subpath.
this.arc(x, y, radius, startAngle, endAngle); this.arc(x, y, radius, startAngle, endAngle);
}; };
/** /**
* Ellipse command! * Ellipse command!
*/ */
Path2D.prototype.ellipse = function(x, y, radiusX, radiusY, rotation, startAngle, endAngle, counterClockwise) { Path2D.prototype.ellipse = function (
x,
y,
radiusX,
radiusY,
rotation,
startAngle,
endAngle,
counterClockwise
) {
if (startAngle === endAngle) { if (startAngle === endAngle) {
return; return;
} }
@ -287,30 +318,40 @@ export default (function () {
var scale = this.ctx.__getTransformScale(); var scale = this.ctx.__getTransformScale();
radiusX = radiusX * scale.x; radiusX = radiusX * scale.x;
radiusY = radiusY * scale.y; radiusY = radiusY * scale.y;
rotation = rotation + this.ctx.__getTransformRotation() rotation = rotation + this.ctx.__getTransformRotation();
startAngle = startAngle % (2*Math.PI); startAngle = startAngle % (2 * Math.PI);
endAngle = endAngle % (2*Math.PI); endAngle = endAngle % (2 * Math.PI);
if(startAngle === endAngle) { if (startAngle === endAngle) {
endAngle = ((endAngle + (2*Math.PI)) - 0.001 * (counterClockwise ? -1 : 1)) % (2*Math.PI); endAngle =
(endAngle + 2 * Math.PI - 0.001 * (counterClockwise ? -1 : 1)) %
(2 * Math.PI);
} }
var endX = x + Math.cos(-rotation) * radiusX * Math.cos(endAngle) var endX =
+ Math.sin(-rotation) * radiusY * Math.sin(endAngle), x +
endY = y - Math.sin(-rotation) * radiusX * Math.cos(endAngle) Math.cos(-rotation) * radiusX * Math.cos(endAngle) +
+ Math.cos(-rotation) * radiusY * Math.sin(endAngle), Math.sin(-rotation) * radiusY * Math.sin(endAngle),
startX = x + Math.cos(-rotation) * radiusX * Math.cos(startAngle) endY =
+ Math.sin(-rotation) * radiusY * Math.sin(startAngle), y -
startY = y - Math.sin(-rotation) * radiusX * Math.cos(startAngle) Math.sin(-rotation) * radiusX * Math.cos(endAngle) +
+ Math.cos(-rotation) * radiusY * Math.sin(startAngle), Math.cos(-rotation) * radiusY * Math.sin(endAngle),
startX =
x +
Math.cos(-rotation) * radiusX * Math.cos(startAngle) +
Math.sin(-rotation) * radiusY * Math.sin(startAngle),
startY =
y -
Math.sin(-rotation) * radiusX * Math.cos(startAngle) +
Math.cos(-rotation) * radiusY * Math.sin(startAngle),
sweepFlag = counterClockwise ? 0 : 1, sweepFlag = counterClockwise ? 0 : 1,
largeArcFlag = 0, largeArcFlag = 0,
diff = endAngle - startAngle; diff = endAngle - startAngle;
if(diff < 0) { if (diff < 0) {
diff += 2*Math.PI; diff += 2 * Math.PI;
} }
if(counterClockwise) { if (counterClockwise) {
largeArcFlag = diff > Math.PI ? 0 : 1; largeArcFlag = diff > Math.PI ? 0 : 1;
} else { } else {
largeArcFlag = diff > Math.PI ? 1 : 0; largeArcFlag = diff > Math.PI ? 1 : 0;
@ -323,19 +364,23 @@ export default (function () {
this.lineTo(startX, startY); this.lineTo(startX, startY);
this.ctx.__transformMatrix = currentTransform; this.ctx.__transformMatrix = currentTransform;
this.addPath(format("A {rx} {ry} {xAxisRotation} {largeArcFlag} {sweepFlag} {endX} {endY}", this.addPath(
format(
"A {rx} {ry} {xAxisRotation} {largeArcFlag} {sweepFlag} {endX} {endY}",
{ {
rx:radiusX, rx: radiusX,
ry:radiusY, ry: radiusY,
xAxisRotation:rotation*(180/Math.PI), xAxisRotation: rotation * (180 / Math.PI),
largeArcFlag:largeArcFlag, largeArcFlag: largeArcFlag,
sweepFlag:sweepFlag, sweepFlag: sweepFlag,
endX:endX, endX: endX,
endY:endY endY: endY,
})); }
)
);
this.__currentPosition = {x: endX, y: endY}; this.__currentPosition = { x: endX, y: endY };
}; };
return Path2D; return Path2D;
}()); })();

2
test/tests/clip.js
View File

@ -19,7 +19,7 @@ export default function clip(ctx) {
ctx.beginPath(); ctx.beginPath();
ctx.rect(20, 30, 30, 10); ctx.rect(20, 30, 30, 10);
ctx.rect(0, 0, 300, 300); ctx.rect(0, 0, 300, 300);
// ctx.stroke(); // Uncomment for debugging clip. ctx.stroke();
ctx.clip("evenodd"); ctx.clip("evenodd");
// Draw line. // Draw line.