Merge pull request #17 from aha-app/issue-arc-scaling

Fix rendering of arcTo when a scale is applied
This commit is contained in:
Zeno Zeng 2022-07-17 15:42:06 +08:00 committed by GitHub
commit 135c9c358a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 24 additions and 3 deletions

3
.gitignore vendored
View File

@ -1,3 +1,4 @@
node_modules
dist
coverage
coverage
.vscode

View File

@ -1015,11 +1015,14 @@ export default (function () {
largeArcFlag = diff > Math.PI ? 1 : 0;
}
var scaleX = Math.hypot(this.__transformMatrix.a, this.__transformMatrix.b);
var scaleY = Math.hypot(this.__transformMatrix.c, this.__transformMatrix.d);
this.lineTo(startX, startY);
this.__addPathCommand(format("A {rx} {ry} {xAxisRotation} {largeArcFlag} {sweepFlag} {endX} {endY}",
{
rx:radius,
ry:radius,
rx:radius * scaleX,
ry:radius * scaleY,
xAxisRotation:0,
largeArcFlag:largeArcFlag,
sweepFlag:sweepFlag,

View File

@ -2,6 +2,7 @@ import {Element} from '../index'
import arc from './tests/arc'
import arcTo from './tests/arcTo'
import arcTo2 from './tests/arcTo2'
import arcToScaled from './tests/arcToScaled'
import emptyArc from './tests/emptyArc'
import fillstyle from './tests/fillstyle'
import globalAlpha from './tests/globalalpha'
@ -22,6 +23,7 @@ const tests = [
arc,
arcTo,
arcTo2,
arcToScaled,
emptyArc,
fillstyle,
globalAlpha,

View File

@ -3,6 +3,7 @@ import { expect } from 'chai'
import arc from './tests/arc'
import arcTo from './tests/arcTo'
import arcTo2 from './tests/arcTo2'
import arcToScaled from './tests/arcToScaled'
import emptyArc from './tests/emptyArc'
import fillstyle from './tests/fillstyle'
import globalAlpha from './tests/globalalpha'
@ -23,6 +24,7 @@ const tests = {
arc,
arcTo,
arcTo2,
arcToScaled,
emptyArc,
fillstyle,
globalAlpha,

13
test/tests/arcToScaled.js Normal file
View File

@ -0,0 +1,13 @@
export default function arcToScaled(ctx) {
ctx.scale(2, 0.5);
ctx.beginPath();
ctx.moveTo(100, 50);
ctx.arcTo(150, 50, 150, 100, 50);
ctx.arcTo(150, 150, 100, 150, 50);
ctx.arcTo(50, 150, 50, 100, 50);
ctx.arcTo(50, 50, 100, 50, 50);
// Reset the scale before we stroke since SVG stroke is not scaled.
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.stroke();
};