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(); var pathElement = this.__createPathElement();
this.__applyStyleToElement(pathElement, action); this.__applyStyleToElement(pathElement, action);
pathElement.setAttribute("paint-order", "fill stroke markers"); 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); pathElement.setAttribute("d", path.__pathString);
if (path2d) { if (path2d) {
this.__applyTransformation(pathElement); this.__applyTransformation(pathElement);
@ -790,6 +792,7 @@ export default (function () {
var pathElement = this.__createPathElement(); var pathElement = this.__createPathElement();
this.__applyStyleToElement(pathElement, action); this.__applyStyleToElement(pathElement, action);
pathElement.setAttribute("paint-order", "fill stroke markers"); pathElement.setAttribute("paint-order", "fill stroke markers");
pathElement.setAttribute("vector-effect", "non-scaling-stroke");
pathElement.setAttribute("d", subPath.path.__pathString); pathElement.setAttribute("d", subPath.path.__pathString);
if (subPath.transform) { if (subPath.transform) {
this.__applyTransformation(pathElement, this.getTransform().multiply(subPath.transform)); this.__applyTransformation(pathElement, this.getTransform().multiply(subPath.transform));

2
package.json
View File

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

7
test/tests/path2D.js
View File

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