Merge pull request #1034 from ChepteaCatalin/fix-1033

feat(matrix): allow rotating relative to a point different than the origin

Author: Ovilia

src/core/matrix.ts

@@ -79,7 +79,12 @@ export function translate(out: MatrixArray, a: MatrixArray, v: VectorArray): Mat
 /**
  * 旋转变换
  */
-export function rotate(out: MatrixArray, a: MatrixArray, rad: number): MatrixArray {
+export function rotate(
+    out: MatrixArray,
+    a: MatrixArray,
+    rad: number,
+    pivot: VectorArray = [0, 0]
+): MatrixArray {
     const aa = a[0];
     const ac = a[2];
     const atx = a[4];
@@ -93,8 +98,8 @@ export function rotate(out: MatrixArray, a: MatrixArray, rad: number): MatrixArr
     out[1] = -aa * st + ab * ct;
     out[2] = ac * ct + ad * st;
     out[3] = -ac * st + ct * ad;
-    out[4] = ct * atx + st * aty;
-    out[5] = ct * aty - st * atx;
+    out[4] = ct * (atx - pivot[0]) + st * (aty - pivot[1]) + pivot[0];
+    out[5] = ct * (aty - pivot[1]) - st * (atx - pivot[0]) + pivot[1];
     return out;
 }
 

src/tool/parseSVG.ts

@@ -845,7 +845,10 @@ function parseTransformAttribute(xmlNode: SVGElement, node: Element): void {
                     break;
                 case 'rotate':
                     // TODO: zrender use different hand in coordinate system.
-                    matrix.rotate(mt, mt, -parseFloat(valueArr[0]) * DEGREE_TO_ANGLE);
+                    matrix.rotate(mt, mt, -parseFloat(valueArr[0]) * DEGREE_TO_ANGLE, [
+                        parseFloat(valueArr[1] || '0'),
+                        parseFloat(valueArr[2] || '0')
+                    ]);
                     break;
                 case 'skewX':
                     const sx = Math.tan(parseFloat(valueArr[0]) * DEGREE_TO_ANGLE);

test/ut/spec/core/matrix.test.ts

@@ -0,0 +1,21 @@
+import { rotate } from '../../../../src/core/matrix';
+
+describe('matrix', function () {
+    it('should rotate relative to a pivot point', function () {
+        const matrix = [
+            0.9659258262890683, 0.25881904510252074, -0.25881904510252074, 0.9659258262890683,
+            40.213201392710246, -26.96358986452364
+        ];
+        const rad = -0.2617993877991494;
+        const pivot = [122.511, 139.243];
+
+        const result = rotate(matrix, matrix, rad, pivot);
+
+        expect(result[0]).toBeCloseTo(0.8660254037844387, 5);
+        expect(result[1]).toBeCloseTo(0.49999999999999994, 5);
+        expect(result[2]).toBeCloseTo(-0.49999999999999994, 5);
+        expect(result[3]).toBeCloseTo(0.8660254037844387, 5);
+        expect(result[4]).toBeCloseTo(86.03486175696463, 5);
+        expect(result[5]).toBeCloseTo(-42.600475299156585, 5);
+    });
+});