新增svgEditor

xyc

2024-05-17 6b24f642b01cf3cd1be0d5833273fa2867d389e1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
/* eslint-env qunit */
import {NS} from '../editor/namespaces.js';
import * as math from '../editor/math.js';
 
// log function
QUnit.log((details) => {
  if (window.console && window.console.log) {
    window.console.log(details.result + ' :: ' + details.message);
  }
});
 
const svg = document.createElementNS(NS.SVG, 'svg');
 
QUnit.module('svgedit.math');
 
QUnit.test('Test svgedit.math package', function (assert) {
  assert.expect(7);
 
  assert.ok(math);
  assert.ok(math.transformPoint);
  assert.ok(math.isIdentity);
  assert.ok(math.matrixMultiply);
  assert.equal(typeof math.transformPoint, typeof function () {});
  assert.equal(typeof math.isIdentity, typeof function () {});
  assert.equal(typeof math.matrixMultiply, typeof function () {});
});
 
QUnit.test('Test svgedit.math.transformPoint() function', function (assert) {
  assert.expect(6);
  const {transformPoint} = math;
 
  const m = svg.createSVGMatrix();
  m.a = 1; m.b = 0;
  m.c = 0; m.d = 1;
  m.e = 0; m.f = 0;
  let pt = transformPoint(100, 200, m);
  assert.equal(pt.x, 100);
  assert.equal(pt.y, 200);
 
  m.e = 300; m.f = 400;
  pt = transformPoint(100, 200, m);
  assert.equal(pt.x, 400);
  assert.equal(pt.y, 600);
 
  m.a = 0.5; m.b = 0.75;
  m.c = 1.25; m.d = 2;
  pt = transformPoint(100, 200, m);
  assert.equal(pt.x, 100 * m.a + 200 * m.c + m.e);
  assert.equal(pt.y, 100 * m.b + 200 * m.d + m.f);
});
 
QUnit.test('Test svgedit.math.isIdentity() function', function (assert) {
  assert.expect(2);
 
  assert.ok(math.isIdentity(svg.createSVGMatrix()));
 
  const m = svg.createSVGMatrix();
  m.a = 1; m.b = 0;
  m.c = 0; m.d = 1;
  m.e = 0; m.f = 0;
  assert.ok(math.isIdentity(m));
});
 
QUnit.test('Test svgedit.math.matrixMultiply() function', function (assert) {
  assert.expect(5);
  const mult = math.matrixMultiply;
  const {isIdentity} = math;
 
  // translate there and back
  const tr1 = svg.createSVGMatrix().translate(100, 50),
    tr2 = svg.createSVGMatrix().translate(-90, 0),
    tr3 = svg.createSVGMatrix().translate(-10, -50);
  let I = mult(tr1, tr2, tr3);
  assert.ok(isIdentity(I), 'Expected identity matrix when translating there and back');
 
  // rotate there and back
  // TODO: currently Mozilla fails this when rotating back at -50 and then -40 degrees
  // (b and c are *almost* zero, but not zero)
  const rotThere = svg.createSVGMatrix().rotate(90),
    rotBack = svg.createSVGMatrix().rotate(-90), // TODO: set this to -50
    rotBackMore = svg.createSVGMatrix().rotate(0); // TODO: set this to -40
  I = mult(rotThere, rotBack, rotBackMore);
  assert.ok(isIdentity(I), 'Expected identity matrix when rotating there and back');
 
  // scale up and down
  const scaleUp = svg.createSVGMatrix().scale(4),
    scaleDown = svg.createSVGMatrix().scaleNonUniform(0.25, 1),
    scaleDownMore = svg.createSVGMatrix().scaleNonUniform(1, 0.25);
  I = mult(scaleUp, scaleDown, scaleDownMore);
  assert.ok(isIdentity(I), 'Expected identity matrix when scaling up and down');
 
  // test multiplication with its inverse
  I = mult(rotThere, rotThere.inverse());
  assert.ok(isIdentity(I), 'Expected identity matrix when multiplying a matrix by its inverse');
  I = mult(rotThere.inverse(), rotThere);
  assert.ok(isIdentity(I), 'Expected identity matrix when multiplying a matrix by its inverse');
});
 
QUnit.test('Test svgedit.math.transformBox() function', function (assert) {
  assert.expect(12);
  const {transformBox} = math;
 
  const m = svg.createSVGMatrix();
  m.a = 1; m.b = 0;
  m.c = 0; m.d = 1;
  m.e = 0; m.f = 0;
 
  const r = transformBox(10, 10, 200, 300, m);
  assert.equal(r.tl.x, 10);
  assert.equal(r.tl.y, 10);
  assert.equal(r.tr.x, 210);
  assert.equal(r.tr.y, 10);
  assert.equal(r.bl.x, 10);
  assert.equal(r.bl.y, 310);
  assert.equal(r.br.x, 210);
  assert.equal(r.br.y, 310);
  assert.equal(r.aabox.x, 10);
  assert.equal(r.aabox.y, 10);
  assert.equal(r.aabox.width, 200);
  assert.equal(r.aabox.height, 300);
});