Fixed clipping behavior and handling of save/restore around stroke and fill.
This commit is contained in:
k1w1
parent
fd024674c0
commit
4f7bcfec4c
762
context.js
762
context.js
File diff suppressed because it is too large
Load Diff
4
package-lock.json
generated
4
package-lock.json
generated
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "svgcanvas",
|
||||
"version": "2.5.0",
|
||||
"name": "@aha-app/svgcanvas",
|
||||
"version": "2.5.0-a11",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
|
||||
@ -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": {
|
||||
|
||||
265
path2d.js
265
path2d.js
@ -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 {
|
||||
@ -21,18 +21,19 @@ export default (function () {
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
};
|
||||
|
||||
Path2D.prototype.addPath = function(path, transform) {
|
||||
if (transform) console.error("transform argument to addPath is not supported");
|
||||
Path2D.prototype.addPath = function (path, transform) {
|
||||
if (transform)
|
||||
console.error("transform argument to addPath is not supported");
|
||||
|
||||
this.__pathString = this.__pathString + " " + path;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Closes the current path
|
||||
@ -45,31 +46,36 @@ export default (function () {
|
||||
* Adds the move command to the current 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
|
||||
this.__currentPosition = {x: x, y: y};
|
||||
this.addPath(format("M {x} {y}", {
|
||||
this.__currentPosition = { x: x, y: 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}", {
|
||||
this.__currentPosition = { x: x, y: 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,73 +83,79 @@ 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 + width, y);
|
||||
this.lineTo(x + width, y + height);
|
||||
this.lineTo(x, y + height);
|
||||
this.lineTo(x, y);
|
||||
this.closePath();
|
||||
};
|
||||
|
||||
/**
|
||||
* Add a bezier command
|
||||
*/
|
||||
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.__currentPosition = { x: x, y: 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,
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* Adds a quadratic curve to command
|
||||
*/
|
||||
Path2D.prototype.quadraticCurveTo = function (cpx, cpy, x, y) {
|
||||
this.__currentPosition = {x: x, y: y};
|
||||
this.addPath(format("Q {cpx} {cpy} {x} {y}", {
|
||||
this.__currentPosition = { x: x, y: 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;
|
||||
}
|
||||
startAngle = startAngle % (2*Math.PI);
|
||||
endAngle = endAngle % (2*Math.PI);
|
||||
startAngle = startAngle % (2 * Math.PI);
|
||||
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),
|
||||
startX = x+radius*Math.cos(startAngle),
|
||||
startY = y+radius*Math.sin(startAngle),
|
||||
var endX = x + radius * Math.cos(endAngle),
|
||||
endY = y + radius * Math.sin(endAngle),
|
||||
startX = x + radius * Math.cos(startAngle),
|
||||
startY = y + radius * Math.sin(startAngle),
|
||||
sweepFlag = counterClockwise ? 0 : 1,
|
||||
largeArcFlag = 0,
|
||||
diff = endAngle - startAngle;
|
||||
|
||||
// https://github.com/gliffy/canvas2svg/issues/4
|
||||
if (diff < 0) {
|
||||
diff += 2*Math.PI;
|
||||
diff += 2 * Math.PI;
|
||||
}
|
||||
|
||||
if (counterClockwise) {
|
||||
@ -152,25 +164,34 @@ 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,
|
||||
xAxisRotation:0,
|
||||
largeArcFlag:largeArcFlag,
|
||||
sweepFlag:sweepFlag,
|
||||
rx: radius * scaleX,
|
||||
ry: radius * scaleY,
|
||||
xAxisRotation: 0,
|
||||
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};
|
||||
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,30 +318,40 @@ 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);
|
||||
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);
|
||||
}
|
||||
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;
|
||||
|
||||
if(diff < 0) {
|
||||
diff += 2*Math.PI;
|
||||
if (diff < 0) {
|
||||
diff += 2 * Math.PI;
|
||||
}
|
||||
|
||||
if(counterClockwise) {
|
||||
if (counterClockwise) {
|
||||
largeArcFlag = diff > Math.PI ? 0 : 1;
|
||||
} else {
|
||||
largeArcFlag = diff > Math.PI ? 1 : 0;
|
||||
@ -323,19 +364,23 @@ 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,
|
||||
xAxisRotation:rotation*(180/Math.PI),
|
||||
largeArcFlag:largeArcFlag,
|
||||
sweepFlag:sweepFlag,
|
||||
endX:endX,
|
||||
endY:endY
|
||||
}));
|
||||
rx: radiusX,
|
||||
ry: radiusY,
|
||||
xAxisRotation: rotation * (180 / Math.PI),
|
||||
largeArcFlag: largeArcFlag,
|
||||
sweepFlag: sweepFlag,
|
||||
endX: endX,
|
||||
endY: endY,
|
||||
}
|
||||
)
|
||||
);
|
||||
|
||||
this.__currentPosition = {x: endX, y: endY};
|
||||
this.__currentPosition = { x: endX, y: endY };
|
||||
};
|
||||
|
||||
return Path2D;
|
||||
}());
|
||||
})();
|
||||
|
||||
@ -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.
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user