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
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>cubic 函数测试</title>
<script src="lib/config.js"></script>
</head>
<body style="margin:0px;">
<script type="importmap">
{
"imports": {
"zrender/": "../",
"tslib": "../node_modules/tslib/tslib.es6.js"
}
}
</script>
<script type="module">
import * as curve from 'zrender/lib/core/curve.js';
function initCubic() {
var dom = document.getElementById('cubic');
var ctx = dom.getContext('2d');
var p = [120.481, 235.242, 120.481, 235.242, 289.27, -169.589, 108.534, 101.57];
// var p = [100, 20, 200, 300, 300, -100, 400, 200];
dom.onmousemove = function(e) {
var roots = [];
var projection = [];
curve.cubicRootAt(p[1], p[3], p[5], p[7], e.offsetY, roots);
curve.cubicProjectPoint(
p[0], p[1], p[2], p[3], p[4], p[5], p[6], p[7],
e.offsetX, e.offsetY, projection
);
ctx.clearRect(0, 0, dom.width, dom.height);
drawBezier();
ctx.lineWidth = 1;
ctx.moveTo(0, e.offsetY);
ctx.lineTo(1000, e.offsetY);
ctx.stroke();
for (var i = 0; i < roots.length; i++) {
var x = curve.cubicAt(p[0], p[2], p[4], p[6], roots[i]);
ctx.fillStyle = 'red';
ctx.beginPath();
ctx.arc(x, e.offsetY, 5, 0, Math.PI * 2, true);
ctx.fill();
}
ctx.moveTo(projection[0], projection[1]);
ctx.lineTo(e.offsetX, e.offsetY);
ctx.stroke();
}
function drawBezier() {
ctx.beginPath();
ctx.lineWidth = 5;
ctx.moveTo(p[0], p[1]);
ctx.bezierCurveTo(p[2], p[3], p[4], p[5], p[6], p[7]);
ctx.stroke();
}
drawBezier();
}
function initQuadratic() {
var dom = document.getElementById('quadratic');
var ctx = dom.getContext('2d');
dom.onmousemove = function(e) {
var roots = [];
var projection = [];
curve.quadraticRootAt(20, 300, 100, e.offsetY, roots);
curve.quadraticProjectPoint(
40, 20, 200, 300, 400, 100,
e.offsetX, e.offsetY, projection
);
ctx.clearRect(0, 0, dom.width, dom.height);
drawBezier();
ctx.lineWidth = 1;
ctx.moveTo(0, e.offsetY);
ctx.lineTo(1000, e.offsetY);
ctx.stroke();
for (var i = 0; i < roots.length; i++) {
var x = curve.quadraticAt(40, 200, 400, roots[i]);
ctx.fillStyle = 'red';
ctx.beginPath();
ctx.arc(x, e.offsetY, 5, 0, Math.PI * 2, true);
ctx.fill();
}
ctx.moveTo(projection[0], projection[1]);
ctx.lineTo(e.offsetX, e.offsetY);
ctx.stroke();
}
function drawBezier() {
ctx.beginPath();
ctx.lineWidth = 5;
ctx.moveTo(40, 20);
ctx.quadraticCurveTo(200, 300, 400, 100);
ctx.stroke();
}
drawBezier();
}
initCubic();
initQuadratic();
</script>
<canvas id="cubic" width="500" height="300"></canvas>
<canvas id="quadratic" width="500" height="300"></canvas>
</body>
</html>
|
