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
122
123
124
125
126
127
128
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Path Contain</title>
<script src="lib/config.js"></script>
</head>
<body>
<script type="importmap">
{
"imports": {
"zrender/": "../",
"tslib": "../node_modules/tslib/tslib.es6.js"
}
}
</script>
<script type="module">
import * as zrender from 'zrender/lib/zrender.js';
import * as pathTool from 'zrender/lib/tool/path.js';
import Circle from 'zrender/lib/graphic/shape/Circle.js';
import Sector from 'zrender/lib/graphic/shape/Sector.js';
import Rect from 'zrender/lib/graphic/shape/Rect.js';
import * as pathContain from 'zrender/lib/contain/path.js';
var path = pathTool.createFromString('M237.541,328.897c25.128,0,46.632-8.946,64.523-26.83c17.888-17.884,26.833-39.399,26.833-64.525V91.365c0-25.126-8.938-46.632-26.833-64.525C284.173,8.951,262.669,0,237.541,0c-25.125,0-46.632,8.951-64.524,26.84c-17.893,17.89-26.838,39.399-26.838,64.525v146.177c0,25.125,8.949,46.641,26.838,64.525C190.906,319.951,212.416,328.897,237.541,328.897zM396.563,188.15c-3.606-3.617-7.898-5.426-12.847-5.426c-4.944,0-9.226,1.809-12.847,5.426c-3.613,3.616-5.421,7.898-5.421,12.845v36.547c0,35.214-12.518,65.333-37.548,90.362c-25.022,25.03-55.145,37.545-90.36,37.545c-35.214,0-65.334-12.515-90.365-37.545c-25.028-25.022-37.541-55.147-37.541-90.362v-36.547c0-4.947-1.809-9.229-5.424-12.845c-3.617-3.617-7.895-5.426-12.847-5.426c-4.952,0-9.235,1.809-12.85,5.426c-3.618,3.616-5.426,7.898-5.426,12.845v36.547c0,42.065,14.04,78.659,42.112,109.776c28.073,31.118,62.762,48.961,104.068,53.526v37.691h-73.089c-4.949,0-9.231,1.811-12.847,5.428c-3.617,3.614-5.426,7.898-5.426,12.847c0,4.941,1.809,9.233,5.426,12.847c3.616,3.614,7.898,5.428,12.847,5.428h182.719c4.948,0,9.236-1.813,12.847-5.428c3.621-3.613,5.431-7.905,5.431-12.847c0-4.948-1.81-9.232-5.431-12.847c-3.61-3.617-7.898-5.428-12.847-5.428h-73.08v-37.691c41.299-4.565,75.985-22.408,104.061-53.526c28.076-31.117,42.12-67.711,42.12-109.776v-36.547C401.998,196.049,400.185,191.77,396.563,188.15z',
{
style: {
brushType: 'both',
lineWidth: 10,
strokeColor: 'blue'
}
});
// var path = new Rect({
// shape: {
// x: 0,
// y: 0,
// width: 100,
// height: 100,
// r: [10, 1000, 1000, 0]
// },
// style: {
// fill: 'green'
// // stroke: 'blue',
// // lineWidth: 0.3
// },
// // scale: [10, 10],
// position: [100, 100]
// });
console.log(path.getBoundingRect());
path.updateTransform();
// console.log(path.contain(144, 117));
// return;
// 随机散落点测试
var pointsDom = document.getElementById('points');
var ctx = pointsDom.getContext('2d');
// path.brush(ctx);
var points = [];
var N_ITER = 1e5;
for (var i = 0; i < N_ITER; i++) {
var x = Math.random() * pointsDom.width;
var y = Math.random() * pointsDom.height;
points.push([x, y, false]);
}
var time = Date.now();
for (var i = 0; i < points.length; i++) {
// if (pathContain.containStroke(
// path.path.data, 10, points[i][0], points[i][1]
// )) {
// points[i][2] = 2;
// }
// else if (pathContain.contain(
// path.path.data, points[i][0], points[i][1]
// )) {
// points[i][2] = 1;
// }
// else {
// points[i][2] = 0;
// }
if (path.contain(points[i][0], points[i][1])) {
// console.log(points[i][0], points[i][1]);
points[i][2] = 1;
}
else {
points[i][2] = 0;
}
}
var cost = Date.now() - time;
for (var i = 0; i < points.length; i++) {
switch(points[i][2]) {
case 0:
ctx.fillStyle = 'red';
break;
case 1:
ctx.fillStyle = 'green';
break;
case 2:
ctx.fillStyle = 'blue';
break;
}
ctx.fillRect(points[i][0], points[i][1], 2, 2);
}
document.getElementById('log').innerHTML = Math.round(1000 / cost * N_ITER) + ' ops/sec';
// 原生isPointInPath测试
var time = Date.now();
for (var i = 0; i < 1000; i++) {
path.path.rebuildPath(ctx);
ctx.isPointInPath(points[i][0], points[i][1]);
}
var cost = Date.now() - time;
document.getElementById('log').innerHTML += '<br />原生: ' + Math.round(1000 / cost * 1000) + ' ops/sec';
document.body.onclick = function(e) {
console.log(e.offsetX, e.offsetY);
}
</script>
<div id="main" style="width:1000px;height:600px;position:absolute;left:0px;top:0px;"></div>
<canvas id="points" width="1000" height="600" style="position:absolute;left:0px;top:0px;"></canvas>
<div id="log" style="font-size:30px;color:blue;position:absolute;z-index:1;background-color:grey;"></div>
</body>
</html>
|
