Merge pull request #79 from armano2/fix/correct-skew-x-y

fix: correct skew functions to use tan for angle calculations

Author: NaridaL

src/SVGPathDataTransformer.ts

@@ -571,12 +571,12 @@ function SCALE(dX: number, dY = dX) {
 
 function SKEW_X(a: number) {
   assertNumbers(a);
-  return MATRIX(1, 0, Math.atan(a), 1, 0, 0);
+  return MATRIX(1, 0, Math.tan(a), 1, 0, 0);
 }
 
 function SKEW_Y(a: number) {
   assertNumbers(a);
-  return MATRIX(1, Math.atan(a), 0, 1, 0, 0);
+  return MATRIX(1, Math.tan(a), 0, 1, 0, 0);
 }
 
 function X_AXIS_SYMMETRY(xOffset = 0) {

src/tests/arc.test.ts

@@ -278,9 +278,13 @@ describe('Transforming elliptical arc commands', () => {
     );
   });
 
-  test('should skew', () => {
+  test('should skew by -45deg', () => {
+    function degToRad(deg: number): number {
+      return deg * (Math.PI / 180);
+    }
+
     assertDeepCloseTo(
-      new SVGPathData('M 0,0 A 50,100 0 0 1 50,100z').skewX(Math.tan(-1))
+      new SVGPathData('M 0,0 A 50,100 0 0 1 50,100z').skewX(degToRad(-45))
         .commands,
       new SVGPathData('M 0,0 A 34.2,146.0 48.6 0 1 -50,100 Z').commands,
       0.1,

src/tests/skew.test.ts

@@ -2,6 +2,10 @@ import { describe, test, expect } from '@jest/globals';
 import { SVGPathData } from '../index.js';
 import { assertThrows } from './testUtils.js';
 
+function degToRad(deg: number): number {
+  return deg * (Math.PI / 180);
+}
+
 describe('X axis skew', () => {
   test('should fail with bad args', () => {
     assertThrows(
@@ -15,21 +19,36 @@ describe('X axis skew', () => {
     );
   });
 
-  test('should work with relative path', () => {
+  test('should work with relative path | 90deg', () => {
+    expect(
+      new SVGPathData('m100 75l-50 -45l0 90z').skewX(degToRad(90)).encode(),
+    ).toEqual(
+      'm1224842951489652700 75l-734905770893791600 -45l1469811541787583200 90z',
+    );
+  });
+
+  test('should work with absolute path | 90deg', () => {
     expect(
-      new SVGPathData('m100 75l-50 -45l0 90z').skewX(Math.PI / 2).encode(),
+      new SVGPathData('M 100,75 50,30 50,120 z').skewX(degToRad(90)).encode(),
     ).toEqual(
-      'm175.29136163904155 75l-95.17481698342493 -45l90.34963396684985 90z',
+      'M1224842951489652700 75L489937180595861200 30L1959748722383444500 120z',
     );
   });
 
-  test('should work with absolute path', () => {
+  test('should work with relative path | 30deg', () => {
     expect(
-      new SVGPathData('M 100,75 50,30 50,120 z').skewX(Math.PI / 2).encode(),
+      new SVGPathData('m100 75l-50 -45l0 90z').skewX(degToRad(30)).encode(),
     ).toEqual(
-      'M175.29136163904155 75L80.11654465561662 30L170.46617862246646 120z',
+      'm143.30127018922192 75l-75.98076211353316 -45l51.96152422706631 90z',
     );
   });
+  test('should work with absolute path | 30deg', () => {
+    expect(
+      new SVGPathData('M 100,75 50,30 50,120 z').skewX(degToRad(30)).encode(),
+    ).toEqual(
+      'M143.30127018922192 75L67.32050807568876 30L119.28203230275508 120z',
+    );
+  })
 });
 
 describe('Y axis skew', () => {
@@ -45,17 +64,31 @@ describe('Y axis skew', () => {
     );
   });
 
-  test('should work with relative path', () => {
+  test('should work with relative path | 90deg', () => {
     expect(
-      new SVGPathData('m100 75l-50 -45l0 90z').skewY(Math.PI / 2).encode(),
-    ).toEqual('m100 175.3884821853887l-50 -95.19424109269436l0 90z');
+      new SVGPathData('m100 75l-50 -45l0 90z').skewY(degToRad(90)).encode(),
+    ).toEqual('m100 1633123935319537000l-50 -816561967659768400l0 90z');
   });
 
-  test('should work with absolute path', () => {
+  test('should work with absolute path | 90deg', () => {
     expect(
-      new SVGPathData('M 100,75 50,30 50,120 z').skewY(Math.PI / 2).encode(),
+      new SVGPathData('M 100,75 50,30 50,120 z').skewY(degToRad(90)).encode(),
     ).toEqual(
-      'M100 175.3884821853887L50 80.19424109269436L50 170.19424109269437z',
+      'M100 1633123935319537000L50 816561967659768400L50 816561967659768600z',
     );
   });
+
+  test('should work with relative path | 30deg', () => {
+    expect(
+      new SVGPathData('m100 75l-50 -45l0 90z').skewY(degToRad(30)).encode(),
+    ).toEqual('m100 132.73502691896257l-50 -73.86751345948129l0 90z');
+  });
+
+  test('should work with absolute path | 30deg', () => {
+    expect(
+      new SVGPathData('M 100,75 50,30 50,120 z').skewY(degToRad(30)).encode(),
+    ).toEqual(
+      'M100 132.73502691896257L50 58.86751345948129L50 148.8675134594813z',
+    );
+  })
 });