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

630
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",
"version": "2.5.0",
"name": "@aha-app/svgcanvas",
"version": "2.5.0-a11",
"lockfileVersion": 1,
"requires": true,
"dependencies": {

2
package.json
View File

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

191
path2d.js
View File

@ -1,4 +1,4 @@
import { format } from './utils';
import { format } from "./utils";
export default (function () {
"use strict";
@ -9,10 +9,10 @@ export default (function () {
if (!ctx) {
console.error("Path2D must be passed the context");
}
if (typeof arg === 'string') {
if (typeof arg === "string") {
// Initialize from string path.
this.__pathString = arg;
} else if (typeof arg === 'object') {
} else if (typeof arg === "object") {
// Initialize by copying another path.
this.__pathString = arg.__pathString;
} else {
@ -22,17 +22,18 @@ export default (function () {
this.ctx = ctx;
this.__currentPosition = { x: undefined, y: undefined };
}
};
Path2D.prototype.__matrixTransform = function (x, y) {
return this.ctx.__matrixTransform(x, y);
}
};
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;
}
};
/**
* Closes the current path
@ -48,28 +49,33 @@ export default (function () {
Path2D.prototype.moveTo = function (x, y) {
// creates a new subpath with the given point
this.__currentPosition = { x: x, y: y };
this.addPath(format("M {x} {y}", {
this.addPath(
format("M {x} {y}", {
x: this.__matrixTransform(x, y).x,
y: this.__matrixTransform(x, y).y
}));
y: this.__matrixTransform(x, y).y,
})
);
};
/**
* Adds a line to command
*/
Path2D.prototype.lineTo = function (x, y) {
this.__currentPosition = { x: x, y: y };
if (this.__pathString.indexOf('M') > -1) {
this.addPath(format("L {x} {y}", {
if (this.__pathString.indexOf("M") > -1) {
this.addPath(
format("L {x} {y}", {
x: this.__matrixTransform(x, y).x,
y: this.__matrixTransform(x, y).y
}));
y: this.__matrixTransform(x, y).y,
})
);
} else {
this.addPath(format("M {x} {y}", {
this.addPath(
format("M {x} {y}", {
x: this.__matrixTransform(x, y).x,
y: this.__matrixTransform(x, y).y
}));
y: this.__matrixTransform(x, y).y,
})
);
}
};
@ -77,15 +83,11 @@ export default (function () {
* Adds a rectangle to the path.
*/
Path2D.prototype.rect = function (x, y, width, height) {
if (this.__currentElement.nodeName !== "path") {
this.beginPath();
}
this.moveTo(x, y);
this.lineTo(x + width, y);
this.lineTo(x + width, y + height);
this.lineTo(x, y + height);
this.lineTo(x, y);
this.closePath();
};
/**
@ -93,15 +95,16 @@ export default (function () {
*/
Path2D.prototype.bezierCurveTo = function (cp1x, cp1y, cp2x, cp2y, x, 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,
cp1y: this.__matrixTransform(cp1x, cp1y).y,
cp2x: this.__matrixTransform(cp2x, cp2y).x,
cp2y: this.__matrixTransform(cp2x, cp2y).y,
x: this.__matrixTransform(x, y).x,
y: this.__matrixTransform(x, y).y
}));
y: this.__matrixTransform(x, y).y,
})
);
};
/**
@ -109,20 +112,27 @@ export default (function () {
*/
Path2D.prototype.quadraticCurveTo = function (cpx, cpy, x, 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,
cpy: this.__matrixTransform(cpx, cpy).y,
x: this.__matrixTransform(x, y).x,
y: this.__matrixTransform(x, y).y
}));
y: this.__matrixTransform(x, y).y,
})
);
};
/**
* 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.
if (startAngle === endAngle) {
return;
@ -131,7 +141,9 @@ export default (function () {
endAngle = endAngle % (2 * Math.PI);
if (startAngle === endAngle) {
//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),
endY = y + radius * Math.sin(endAngle),
@ -152,11 +164,19 @@ export default (function () {
largeArcFlag = diff > Math.PI ? 1 : 0;
}
var scaleX = Math.hypot(this.ctx.__transformMatrix.a, this.ctx.__transformMatrix.b);
var scaleY = Math.hypot(this.ctx.__transformMatrix.c, this.ctx.__transformMatrix.d);
var scaleX = Math.hypot(
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.addPath(format("A {rx} {ry} {xAxisRotation} {largeArcFlag} {sweepFlag} {endX} {endY}",
this.addPath(
format(
"A {rx} {ry} {xAxisRotation} {largeArcFlag} {sweepFlag} {endX} {endY}",
{
rx: radius * scaleX,
ry: radius * scaleY,
@ -164,13 +184,14 @@ export default (function () {
largeArcFlag: largeArcFlag,
sweepFlag: sweepFlag,
endX: this.__matrixTransform(endX, endY).x,
endY: this.__matrixTransform(endX, endY).y
}));
endY: this.__matrixTransform(endX, endY).y,
}
)
);
this.__currentPosition = { x: endX, y: endY };
};
/**
* 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.
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),
@ -204,9 +227,7 @@ export default (function () {
// or if the radius radius is zero,
// 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.
if (((x0 === x1) && (y0 === y1))
|| ((x1 === x2) && (y1 === y2))
|| (radius === 0)) {
if ((x0 === x1 && y0 === y1) || (x1 === x2 && y1 === y2) || radius === 0) {
this.lineTo(x1, y1);
return;
}
@ -216,7 +237,10 @@ export default (function () {
// 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_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);
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.
// 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));
// Calculate origin
var unit_vec_p1_origin = normalize([
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 x = x1 + len_p1_origin * unit_vec_p1_origin[0];
@ -241,20 +267,15 @@ export default (function () {
// Calculate start angle and end angle
// rotate 90deg clockwise (note that y axis points to its down)
var unit_vec_origin_start_tangent = [
-unit_vec_p1_p0[1],
unit_vec_p1_p0[0]
];
var unit_vec_origin_start_tangent = [-unit_vec_p1_p0[1], unit_vec_p1_p0[0]];
// rotate 90deg counter clockwise (note that y axis points to its down)
var unit_vec_origin_end_tangent = [
unit_vec_p1_p2[1],
-unit_vec_p1_p2[0]
];
var unit_vec_origin_end_tangent = [unit_vec_p1_p2[1], -unit_vec_p1_p2[0]];
var getAngle = function (vector) {
// get angle (clockwise) between vector and (1, 0)
var x = vector[0];
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);
} else {
return -Math.acos(x);
@ -264,19 +285,29 @@ export default (function () {
var endAngle = getAngle(unit_vec_origin_end_tangent);
// Connect the point (x0, y0) to the start tangent point by a straight line
this.lineTo(x + unit_vec_origin_start_tangent[0] * radius,
y + unit_vec_origin_start_tangent[1] * radius);
this.lineTo(
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
// and adding the end tangent point to the subpath.
this.arc(x, y, radius, startAngle, endAngle);
};
/**
* 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) {
return;
}
@ -287,21 +318,31 @@ export default (function () {
var scale = this.ctx.__getTransformScale();
radiusX = radiusX * scale.x;
radiusY = radiusY * scale.y;
rotation = rotation + this.ctx.__getTransformRotation()
rotation = rotation + this.ctx.__getTransformRotation();
startAngle = startAngle % (2 * Math.PI);
endAngle = endAngle % (2 * Math.PI);
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)
+ Math.sin(-rotation) * radiusY * Math.sin(endAngle),
endY = y - Math.sin(-rotation) * radiusX * Math.cos(endAngle)
+ 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),
var endX =
x +
Math.cos(-rotation) * radiusX * Math.cos(endAngle) +
Math.sin(-rotation) * radiusY * Math.sin(endAngle),
endY =
y -
Math.sin(-rotation) * radiusX * Math.cos(endAngle) +
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,
largeArcFlag = 0,
diff = endAngle - startAngle;
@ -323,7 +364,9 @@ export default (function () {
this.lineTo(startX, startY);
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,
ry: radiusY,
@ -331,11 +374,13 @@ export default (function () {
largeArcFlag: largeArcFlag,
sweepFlag: sweepFlag,
endX: endX,
endY:endY
}));
endY: endY,
}
)
);
this.__currentPosition = { x: endX, y: endY };
};
return Path2D;
}());
})();

2
test/tests/clip.js
View File

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