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

Add hack to prevent incorrectly scaled stroke

Browse Source
This commit is contained in:
k1w1 2024-04-18 17:02:55 -07:00
parent a891b0ad58
commit 2e5bd80cdb
3 changed files with 7 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
context.js
View File

@ -779,6 +779,8 @@ export default (function () {
var pathElement = this.__createPathElement();
this.__applyStyleToElement(pathElement, action);
pathElement.setAttribute("paint-order", "fill stroke markers");
// This is a hack to replicate the behavior of Fabric.
pathElement.setAttribute("vector-effect", "non-scaling-stroke");
pathElement.setAttribute("d", path.__pathString);
if (path2d) {
this.__applyTransformation(pathElement);
@ -790,6 +792,7 @@ export default (function () {
var pathElement = this.__createPathElement();
this.__applyStyleToElement(pathElement, action);
pathElement.setAttribute("paint-order", "fill stroke markers");
pathElement.setAttribute("vector-effect", "non-scaling-stroke");
pathElement.setAttribute("d", subPath.path.__pathString);
if (subPath.transform) {
this.__applyTransformation(pathElement, this.getTransform().multiply(subPath.transform));

2
package.json
View File

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

7
test/tests/path2D.js
View File

@ -79,9 +79,8 @@ export default function path2D(ctx) {
ctx.fill(path2);
ctx.strokeStyle = "red";
let pNext = makePath(ctx);
// add first path, transform path, twice size, move 100,10
pNext.addPath(path2, new DOMMatrix([
let scaledPath = makePath(ctx);
scaledPath.addPath(path2, new DOMMatrix([
2, 0,
0, 1,
0,
@ -89,6 +88,6 @@ export default function path2D(ctx) {
]));
ctx.scale(1 / 2, 1); // Reset scale so that stroke is not scaled.
ctx.stroke(pNext);
ctx.stroke(scaledPath);
ctx.restore();
}