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
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Animation</title>
<script src="../dist/zrender.js"></script>
</head>
<body>
<div id="main" style="width:600px;height:600px;"></div>
<script type="text/javascript">
// 初始化zrender
var zr = zrender.init(document.getElementById('main'));
var points = [[118.6963,28.3118],[118.6963,28.3228],[118.7292,28.3392],[118.7402,28.3612],[118.7402,28.3722],[118.7622,28.4052],[118.7512,28.4161],[118.7183,28.4106],[118.7292,28.4491],[118.7292,28.4985],[118.7512,28.526],[118.7732,28.515],[118.7842,28.526],[118.8171,28.548],[118.8501,28.5425],[118.8611,28.5205],[118.8831,28.526],[118.916,28.5645],[118.905,28.5754],[118.905,28.5919],[118.927,28.6414],[118.949,28.6469],[118.96,28.6414],[119.0039,28.6963],[119.0369,28.7128],[119.0588,28.7347],[119.0808,28.7402],[119.0918,28.7347],[119.1028,28.7402],[119.1357,28.7347],[119.1687,28.7457],[119.1907,28.7677],[119.2456,28.7622],[119.2676,28.7842],[119.2786,28.8062],[119.3005,28.8062],[119.3115,28.8116],[119.3225,28.8007],[119.3335,28.8007],[119.3225,28.7787],[119.3335,28.7622],[119.3445,28.7567],[119.3774,28.7842],[119.3884,28.7842],[119.4214,28.7512],[119.4653,28.7622],[119.4763,28.7457],[119.4653,28.7402],[119.4653,28.7073],[119.4543,28.6469],[119.4653,28.6359],[119.4873,28.6359],[119.4873,28.6249],[119.5093,28.6139],[119.4983,28.5809],[119.4983,28.5535],[119.5093,28.559],[119.5313,28.559],[119.5422,28.5315],[119.5642,28.5315],[119.5752,28.5205],[119.6301,28.526],[119.6411,28.5425],[119.6631,28.5425],[119.6741,28.5315],[119.707,28.5315],[119.718,28.5645],[119.74,28.5809],[119.74,28.5919],[119.762,28.5864],[119.7729,28.6029],[119.751,28.6249],[119.751,28.6359],[119.762,28.6414],[119.7839,28.6304],[119.8059,28.6523],[119.8169,28.6853],[119.8499,28.7128],[119.8718,28.7183],[119.8718,28.7402],[119.8938,28.7512],[119.9158,28.7842],[119.9158,28.7952],[119.9597,28.7842],[119.9817,28.7952],[120.0366,28.7567],[120.0916,28.7897],[120.0916,28.7732],[120.1245,28.7622],[120.1355,28.7677],[120.1465,28.7842],[120.1685,28.7732],[120.1794,28.7842],[120.2014,28.7842],[120.2124,28.7952],[120.2014,28.8062],[120.2014,28.8116],[120.2454,28.8611],[120.2563,28.8666],[120.2673,28.8995],[120.2563,28.9325],[120.2673,28.949],[120.2893,28.9325],[120.3113,28.938],[120.3003,28.927],[120.3113,28.8885],[120.3223,28.8721],[120.3442,28.8556],[120.3552,28.8391],[120.3882,28.8281],[120.3992,28.8556],[120.4102,28.8501],[120.4211,28.8501],[120.4211,28.8336],[120.4211,28.8281],[120.4102,28.7897],[120.3882,28.7842],[120.3662,28.7622],[120.3772,28.7457],[120.3552,28.7292],[120.3552,28.7073],[120.3223,28.6963],[120.3223,28.6688],[120.3333,28.6633],[120.3223,28.6578],[120.3552,28.6414],[120.3662,28.6249],[120.3662,28.6029],[120.3772,28.5974],[120.3772,28.5809],[120.3662,28.5699],[120.3662,28.5809],[120.3333,28.5754],[120.3223,28.5535],[120.3113,28.5535],[120.2893,28.5315],[120.3003,28.5095],[120.3333,28.4985],[120.3772,28.4985],[120.3882,28.4711],[120.3772,28.4546],[120.3772,28.4491],[120.3772,28.4271],[120.3772,28.4161],[120.3442,28.4326],[120.3442,28.4106],[120.3333,28.4052],[120.3442,28.3832],[120.3442,28.3722],[120.3552,28.3722],[120.3662,28.3557],[120.3552,28.3337],[120.4102,28.3008],[120.4211,28.2733],[120.4211,28.2513],[120.4431,28.2404],[120.4321,28.2294],[120.4211,28.2074],[120.4321,28.1854],[120.4211,28.1689],[120.4211,28.1525],[120.3882,28.147],[120.3992,28.1305],[120.4102,28.114],[120.3662,28.0811],[120.3772,28.0591],[120.3442,28.0481],[120.3442,28.0261],[120.3333,27.9932],[120.3552,27.9822],[120.3333,27.9657],[120.3223,27.9767],[120.2893,27.9767],[120.2673,27.9547],[120.2454,27.9602],[120.2454,27.9327],[120.2014,27.9382],[120.1685,27.9602],[120.1794,27.9712],[120.1135,27.9877],[120.1025,27.9822],[120.1135,27.9657],[120.0696,27.9657],[120.0696,27.9602],[120.0696,27.9437],[120.0366,27.9492],[120.0256,27.9382],[119.9597,27.9382],[119.9707,27.9712],[119.9597,27.9767],[119.9158,27.9657],[119.9158,27.9492],[119.8938,27.9547],[119.8718,27.9712],[119.8718,27.9657],[119.8718,27.9492],[119.8279,27.9602],[119.8389,27.9327],[119.8389,27.9108],[119.8059,27.9218],[119.7839,27.9108],[119.7949,27.8888],[119.7839,27.8613],[119.7839,27.8119],[119.7839,27.7954],[119.7729,27.7954],[119.7729,27.8064],[119.751,27.7954],[119.74,27.7734],[119.74,27.7515],[119.729,27.746],[119.696,27.757],[119.6851,27.746],[119.6741,27.7295],[119.6521,27.7185],[119.6521,27.691],[119.6301,27.6691],[119.6082,27.6746],[119.5972,27.6636],[119.5752,27.6691],[119.5642,27.6581],[119.5532,27.6691],[119.5203,27.6581],[119.5203,27.6526],[119.4983,27.6581],[119.4983,27.6361],[119.4983,27.6141],[119.4873,27.5977],[119.4653,27.5262],[119.4324,27.5098],[119.4214,27.5317],[119.3774,27.5372],[119.3445,27.5153],[119.3445,27.5098],[119.3445,27.4933],[119.3335,27.4768],[119.2786,27.4548],[119.2786,27.4329],[119.2456,27.4164],[119.1907,27.4219],[119.1797,27.4274],[119.1467,27.4274],[119.1248,27.4384],[119.1357,27.4658],[119.1248,27.4823],[119.0808,27.4658],[119.0808,27.4713],[119.0698,27.4658],[119.0479,27.4768],[119.0149,27.4933],[118.9929,27.4933],[118.9819,27.4768],[118.96,27.4768],[118.96,27.4603],[118.96,27.4493],[118.938,27.4658],[118.905,27.4603],[118.894,27.4768],[118.8831,27.4823],[118.8831,27.5043],[118.8721,27.5153],[118.8611,27.5153],[118.8611,27.5208],[118.8831,27.5317],[118.894,27.5317],[118.916,27.5757],[118.905,27.5922],[118.916,27.6141],[118.905,27.6251],[118.905,27.6416],[118.8721,27.6855],[118.8721,27.702],[118.894,27.713],[118.8721,27.735],[118.8611,27.7679],[118.8501,27.8119],[118.8281,27.8448],[118.8391,27.8668],[118.8171,27.9163],[118.8062,27.9163],[118.8062,27.9272],[118.7512,27.9437],[118.7292,27.9657],[118.7292,28.0096],[118.7292,28.0316],[118.7183,28.0481],[118.7183,28.0701],[118.7402,28.092],[118.7622,28.092],[118.7732,28.1085],[118.7842,28.1085],[118.8062,28.1195],[118.8062,28.158],[118.7952,28.1689],[118.7842,28.1744],[118.7622,28.1635],[118.7622,28.1689],[118.7732,28.1909],[118.8062,28.2074],[118.8171,28.2239],[118.7952,28.2404],[118.7512,28.2513],[118.7402,28.2788],[118.7292,28.2788],[118.7292,28.3008],[118.7183,28.3118],[118.6963,28.3118]];
var polygon = new zrender.Polygon({
shape: {
points: points
},
style: {
stroke: '#f00',
fill: 'none'
}
});
var min = points[0].slice();
var max = points[0].slice();
for (let i = 1; i < points.length; i++) {
min[0] = Math.min(points[i][0], min[0]);
min[1] = Math.min(points[i][1], min[1]);
max[0] = Math.max(points[i][0], max[0]);
max[1] = Math.max(points[i][1], max[1]);
}
var cx = (min[0] + max[0]) / 2;
var cy = (min[1] + max[1]) / 2;
var width = max[0] - min[0];
var height = max[1] - min[1];
var r = (width + height) / 4;
var firstAngle = Math.atan2(points[0][1] - cy, points[0][0] - cx);
if (firstAngle < 0) {
firstAngle += Math.PI * 2;
}
var unitAngle = Math.PI * 2 / points.length;
var circlePoints = points.map(function (pt, idx) {
var angle = firstAngle + unitAngle * idx;
return [Math.cos(angle) * r + cx, -Math.sin(angle) * r + cy];
});
polygon.scale = [
400 / width,
400 / width
];
polygon.position = [
200 - min[0] * polygon.scale[0],
100 - min[1] * polygon.scale[1]
];
polygon.style.lineWidth = 3 / polygon.scale[0];
zr.add(polygon);
setTimeout(function () {
polygon.animateTo({
shape: {
points: circlePoints
}
}, { duration: 1500, easing: 'elasticOut' });
}, 1000);
</script>
<div id="main" style="width:1000px;height:600px;"></div>
</body>
</html>
|
