forked from 15001217168/mojs
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathtest.html
More file actions
174 lines (152 loc) · 14.6 KB
/
Copy pathtest.html
File metadata and controls
174 lines (152 loc) · 14.6 KB
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
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>mo · js</title>
</head>
<body>
<style>
body, html {
height: 100%;
margin: 0;
padding: 0;
}
/*div {
outline: 1px solid red;
}*/
.el {
position: absolute;
left: 50%;
top: 50%;
width: 25px;
height: 25px;
margin-top: -12.5px;
margin-left: -12.5px;
background: #F54F0D;
}
.circle {
position: absolute;
left: 0;
top: 0;
width: 20px;
height: 20px;
margin-top: -10px;
margin-left: -10px;
border-radius: 50%;
background: deeppink;
}
.circle--small {
width: 10px;
height: 10px;
margin-top: -5px;
margin-left: -5px;
}
.circle--smaller {
width: 5px;
height: 5px;
margin-top: -2.5px;
margin-left: -2.5px;
background: purple;
}
.hand {
position: absolute;
width: 0;
height: 0;
left: 0;
top: 0;
/*margin-top: -38px;*/
/*margin-left: -15px;*/
/*transform-origin: center bottom;*/
z-index: 1;
}
.hand svg {
position: absolute;
width: 27px;
height: 36px;
left: -16px;
top: -36px;
}
</style>
<svg viewBox="0 0 1280 900" style="width: 1280px; height: 900px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="" stroke="#333" fill="none" id="js-path-gen"></path>
<path d="" stroke="cyan" fill="none" id="js-path1"></path>
<path d="" stroke="cyan" fill="none" id="js-path2"></path>
</svg>
<div class="circle" id="js-circle1"></div>
<!-- <div class="circle" id="js-circle2" style="cursor: move"></div>
<div class="circle circle--small" id="js-circle3"></div>
<div class="circle circle--small" id="js-circle4"></div>
<div class="circle circle--smaller" id="js-circle5"></div>
<div class="circle circle--smaller" id="js-circle6"></div> -->
<!-- <div class="hand" id="js-hand1">
<svg viewBox="0 0 382 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="hold" transform="translate(0.000000, -1.000000)" fill-rule="nonzero">
<path d="M381.067,137.265 C381.063,113.188 362.736,93.687 339.102,92.847 C332.66,92.636 327.464,93.784 320.902,96.188 L320.902,93.697 C320.902,91.944 320.494,90.273 319.869,88.744 C317.22,67.351 299.622,50.768 277.882,49.995 C271.434,49.785 265.787,50.932 259.226,53.337 L259.226,44.725 C259.226,42.972 259.049,41.301 258.424,39.773 C255.775,18.38 238.466,1.797 216.727,1.024 C204.747,0.626 193.341,4.941 184.725,13.258 C176.107,21.575 171.306,32.75 171.306,44.725 L171.306,53.583 C166.057,51 159.333,49.775 152.664,49.995 C129.03,50.836 110.942,70.355 110.942,94.431 L110.942,244.008 L95.123,217.254 C87.882,204.714 76.02,195.762 62.021,192.045 C48.052,188.337 33.377,190.281 20.843,197.519 C11.756,202.765 5.156,211.219 2.335,221.327 C-0.523,231.567 0.787,242.235 6.049,251.349 L73.877,369.319 C80.093,380.131 83.386,392.44 83.386,404.915 L83.386,404.939 C83.386,405.459 83.374,405.994 83.382,406.527 C83.788,435.138 95.314,461.96 115.858,482.054 C136.331,502.078 163.378,512.97 192.023,512.997 L272.499,512.924 L272.609,512.924 C300.975,512.924 327.836,502.229 348.249,482.529 C368.723,462.769 380.275,436.333 381.136,407.944 C381.174,406.594 381.067,137.265 381.067,137.265 Z M354.898,407.085 C353.541,451.821 317.514,486.68 272.607,486.68 L272.522,486.68 L192.042,486.753 C147.216,486.71 110.252,450.561 109.623,406.064 C109.616,405.632 109.63,405.287 109.63,404.878 L109.63,404.854 C109.63,387.817 105.109,371.005 96.618,356.237 L28.773,238.247 C27.055,235.273 26.627,231.771 27.574,228.384 C28.537,224.93 30.777,222.04 33.883,220.248 C40.366,216.504 47.907,215.5 55.122,217.412 C62.324,219.324 68.342,223.929 72.072,230.392 L112.051,299.434 C115.027,304.572 121.406,307.074 127.141,305.531 C132.873,303.992 137.186,298.794 137.186,292.858 L137.186,94.432 C137.186,84.723 144.41,76.555 153.693,76.226 C158.464,76.05 162.874,77.79 166.318,81.115 C169.765,84.442 171.698,88.91 171.698,93.7 C171.698,95.08 172.362,247.961 172.362,247.961 C172.362,255.207 178.229,261.084 185.477,261.084 C192.725,261.084 198.596,255.208 198.596,247.961 C198.596,247.961 198.349,42.725 198.13,41.774 C198.747,38.123 200.425,34.774 203.151,32.145 C206.597,28.822 211.263,27.097 216.044,27.255 C225.326,27.584 232.981,35.752 232.981,45.461 L232.981,258.977 C232.981,266.223 238.857,272.1 246.104,272.1 C253.351,272.1 259.227,266.224 259.227,258.977 L259.227,89.154 C260.539,86.125 261.808,83.356 264.132,81.114 C267.578,77.79 272.59,76.049 277.371,76.224 C286.654,76.553 294.656,84.721 294.656,94.43 L294.656,274.893 C294.656,282.139 300.532,288.016 307.779,288.016 C315.026,288.016 320.902,282.14 320.902,274.893 L320.902,132.003 C322.214,128.974 323.252,126.207 325.576,123.964 C329.021,120.641 333.356,118.914 338.14,119.076 C347.423,119.405 354.783,127.537 354.783,137.246 C354.783,137.246 354.928,406.014 354.898,407.085 Z" id="Shape" fill="#000000"></path>
<path d="M354.898,407.085 C353.541,451.821 317.514,486.68 272.607,486.68 L272.522,486.68 L192.042,486.753 C147.216,486.71 110.252,450.561 109.623,406.064 C109.616,405.632 109.63,405.287 109.63,404.878 L109.63,404.854 C109.63,387.817 105.109,371.005 96.618,356.237 L28.773,238.247 C27.055,235.273 26.627,231.771 27.574,228.384 C28.537,224.93 30.777,222.04 33.883,220.248 C40.366,216.504 47.907,215.5 55.122,217.412 C62.324,219.324 68.342,223.929 72.072,230.392 L112.051,299.434 C115.027,304.572 121.406,307.074 127.141,305.531 C132.873,303.992 137.186,298.794 137.186,292.858 L137.186,94.432 C137.186,84.723 144.41,76.555 153.693,76.226 C158.464,76.05 162.874,77.79 166.318,81.115 C169.765,84.442 171.698,88.91 171.698,93.7 C171.698,95.08 172.362,247.961 172.362,247.961 C172.362,255.207 178.229,261.084 185.477,261.084 C192.725,261.084 198.596,255.208 198.596,247.961 C198.596,247.961 198.349,42.725 198.13,41.774 C198.747,38.123 200.425,34.774 203.151,32.145 C206.597,28.822 211.263,27.097 216.044,27.255 C225.326,27.584 232.981,35.752 232.981,45.461 L232.981,258.977 C232.981,266.223 238.857,272.1 246.104,272.1 C253.351,272.1 259.227,266.224 259.227,258.977 L259.227,89.154 C260.539,86.125 261.808,83.356 264.132,81.114 C267.578,77.79 272.59,76.049 277.371,76.224 C286.654,76.553 294.656,84.721 294.656,94.43 L294.656,274.893 C294.656,282.139 300.532,288.016 307.779,288.016 C315.026,288.016 320.902,282.14 320.902,274.893 L320.902,132.003 C322.214,128.974 323.252,126.207 325.576,123.964 C329.021,120.641 333.356,118.914 338.14,119.076 C347.423,119.405 354.783,127.537 354.783,137.246 C354.783,137.246 354.928,406.014 354.898,407.085 Z" id="Shape" fill="#FFFFFF"></path>
<path d="M202.666,346.807 C186.393,329.561 168.793,321.625 168.052,321.295 C161.422,318.349 153.673,321.334 150.731,327.956 C147.788,334.579 150.769,342.334 157.392,345.277 C157.933,345.518 211.365,369.972 203.946,427.85 C203.025,435.039 208.105,441.613 215.293,442.534 C215.86,442.607 216.422,442.642 216.978,442.642 C223.482,442.642 229.128,437.809 229.977,431.187 C234.071,399.257 224.628,370.079 202.666,346.807 Z" id="Shape" fill="#000000"></path>
</g>
</g>
</svg>
</div>
<div class="hand" id="js-hand2">
<svg viewBox="0 0 382 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="hold" transform="translate(0.000000, -1.000000)" fill-rule="nonzero">
<path d="M381.067,137.265 C381.063,113.188 362.736,93.687 339.102,92.847 C332.66,92.636 327.464,93.784 320.902,96.188 L320.902,93.697 C320.902,91.944 320.494,90.273 319.869,88.744 C317.22,67.351 299.622,50.768 277.882,49.995 C271.434,49.785 265.787,50.932 259.226,53.337 L259.226,44.725 C259.226,42.972 259.049,41.301 258.424,39.773 C255.775,18.38 238.466,1.797 216.727,1.024 C204.747,0.626 193.341,4.941 184.725,13.258 C176.107,21.575 171.306,32.75 171.306,44.725 L171.306,53.583 C166.057,51 159.333,49.775 152.664,49.995 C129.03,50.836 110.942,70.355 110.942,94.431 L110.942,244.008 L95.123,217.254 C87.882,204.714 76.02,195.762 62.021,192.045 C48.052,188.337 33.377,190.281 20.843,197.519 C11.756,202.765 5.156,211.219 2.335,221.327 C-0.523,231.567 0.787,242.235 6.049,251.349 L73.877,369.319 C80.093,380.131 83.386,392.44 83.386,404.915 L83.386,404.939 C83.386,405.459 83.374,405.994 83.382,406.527 C83.788,435.138 95.314,461.96 115.858,482.054 C136.331,502.078 163.378,512.97 192.023,512.997 L272.499,512.924 L272.609,512.924 C300.975,512.924 327.836,502.229 348.249,482.529 C368.723,462.769 380.275,436.333 381.136,407.944 C381.174,406.594 381.067,137.265 381.067,137.265 Z M354.898,407.085 C353.541,451.821 317.514,486.68 272.607,486.68 L272.522,486.68 L192.042,486.753 C147.216,486.71 110.252,450.561 109.623,406.064 C109.616,405.632 109.63,405.287 109.63,404.878 L109.63,404.854 C109.63,387.817 105.109,371.005 96.618,356.237 L28.773,238.247 C27.055,235.273 26.627,231.771 27.574,228.384 C28.537,224.93 30.777,222.04 33.883,220.248 C40.366,216.504 47.907,215.5 55.122,217.412 C62.324,219.324 68.342,223.929 72.072,230.392 L112.051,299.434 C115.027,304.572 121.406,307.074 127.141,305.531 C132.873,303.992 137.186,298.794 137.186,292.858 L137.186,94.432 C137.186,84.723 144.41,76.555 153.693,76.226 C158.464,76.05 162.874,77.79 166.318,81.115 C169.765,84.442 171.698,88.91 171.698,93.7 C171.698,95.08 172.362,247.961 172.362,247.961 C172.362,255.207 178.229,261.084 185.477,261.084 C192.725,261.084 198.596,255.208 198.596,247.961 C198.596,247.961 198.349,42.725 198.13,41.774 C198.747,38.123 200.425,34.774 203.151,32.145 C206.597,28.822 211.263,27.097 216.044,27.255 C225.326,27.584 232.981,35.752 232.981,45.461 L232.981,258.977 C232.981,266.223 238.857,272.1 246.104,272.1 C253.351,272.1 259.227,266.224 259.227,258.977 L259.227,89.154 C260.539,86.125 261.808,83.356 264.132,81.114 C267.578,77.79 272.59,76.049 277.371,76.224 C286.654,76.553 294.656,84.721 294.656,94.43 L294.656,274.893 C294.656,282.139 300.532,288.016 307.779,288.016 C315.026,288.016 320.902,282.14 320.902,274.893 L320.902,132.003 C322.214,128.974 323.252,126.207 325.576,123.964 C329.021,120.641 333.356,118.914 338.14,119.076 C347.423,119.405 354.783,127.537 354.783,137.246 C354.783,137.246 354.928,406.014 354.898,407.085 Z" id="Shape" fill="#000000"></path>
<path d="M354.898,407.085 C353.541,451.821 317.514,486.68 272.607,486.68 L272.522,486.68 L192.042,486.753 C147.216,486.71 110.252,450.561 109.623,406.064 C109.616,405.632 109.63,405.287 109.63,404.878 L109.63,404.854 C109.63,387.817 105.109,371.005 96.618,356.237 L28.773,238.247 C27.055,235.273 26.627,231.771 27.574,228.384 C28.537,224.93 30.777,222.04 33.883,220.248 C40.366,216.504 47.907,215.5 55.122,217.412 C62.324,219.324 68.342,223.929 72.072,230.392 L112.051,299.434 C115.027,304.572 121.406,307.074 127.141,305.531 C132.873,303.992 137.186,298.794 137.186,292.858 L137.186,94.432 C137.186,84.723 144.41,76.555 153.693,76.226 C158.464,76.05 162.874,77.79 166.318,81.115 C169.765,84.442 171.698,88.91 171.698,93.7 C171.698,95.08 172.362,247.961 172.362,247.961 C172.362,255.207 178.229,261.084 185.477,261.084 C192.725,261.084 198.596,255.208 198.596,247.961 C198.596,247.961 198.349,42.725 198.13,41.774 C198.747,38.123 200.425,34.774 203.151,32.145 C206.597,28.822 211.263,27.097 216.044,27.255 C225.326,27.584 232.981,35.752 232.981,45.461 L232.981,258.977 C232.981,266.223 238.857,272.1 246.104,272.1 C253.351,272.1 259.227,266.224 259.227,258.977 L259.227,89.154 C260.539,86.125 261.808,83.356 264.132,81.114 C267.578,77.79 272.59,76.049 277.371,76.224 C286.654,76.553 294.656,84.721 294.656,94.43 L294.656,274.893 C294.656,282.139 300.532,288.016 307.779,288.016 C315.026,288.016 320.902,282.14 320.902,274.893 L320.902,132.003 C322.214,128.974 323.252,126.207 325.576,123.964 C329.021,120.641 333.356,118.914 338.14,119.076 C347.423,119.405 354.783,127.537 354.783,137.246 C354.783,137.246 354.928,406.014 354.898,407.085 Z" id="Shape" fill="#FFFFFF"></path>
<path d="M202.666,346.807 C186.393,329.561 168.793,321.625 168.052,321.295 C161.422,318.349 153.673,321.334 150.731,327.956 C147.788,334.579 150.769,342.334 157.392,345.277 C157.933,345.518 211.365,369.972 203.946,427.85 C203.025,435.039 208.105,441.613 215.293,442.534 C215.86,442.607 216.422,442.642 216.978,442.642 C223.482,442.642 229.128,437.809 229.977,431.187 C234.071,399.257 224.628,370.079 202.666,346.807 Z" id="Shape" fill="#000000"></path>
</g>
</g>
</svg>
</div>
<svg style="width: 1280px; height: 700px; border: 1px solid;">
<path d="M0, 0 L900, 500" stroke="#333" stroke-width="8" id="js-path" fill="none" stroke-linejoin="round" stroke-linecap="round" />
</svg> -->
<div class="el" id="js-el"></div>
<!-- <script src="vendor/lodash.min.js"></script> -->
<!-- <script src="vendor/platform.js"></script> -->
<!-- <script src="vendor/benchmark.js"></script> -->
<!-- <script src="node_modules/mojs-player/build/mojs-player.js"></script> -->
<!-- <script src="http://cdn.jsdelivr.net/mojs/latest/mo.min.js"></script> -->
<!-- <script src="vendor/mo-js/build/mo.min.js"></script> -->
<!-- <script src="https://cdn.jsdelivr.net/mojs/0.288.1/mo.min.js"></script> -->
<script src="build/mo.js"></script>
<script src="vendor/mojs-player.js"></script>
<script src="http://hammerjs.github.io/dist/hammer.min.js"></script>
<script>
// var pathGen = document.querySelector('#js-path-gen');
// var d = mojs.generatePath({
// x: 250,
// y: 250,
// xDumpEasing: 'sin.out',
// yDumpEasing: 'sin.in',
// isGrow: false,
// count: 3
// });
// pathGen.setAttribute('d', d);
</script>
<!-- <script src="vendor/lodash.min.js"></script> -->
<!-- <script src="vendor/platform.js"></script> -->
<!-- <script src="vendor/benchmark.js"></script> -->
<!-- <script>
var suite = new Benchmark.Suite;
// add tests
suite.add('path sampling', function() {
mojs.easing.path('M0, 100, L100, 0');
})
.add('easing', function() {
;
})
// add listeners
.on('cycle', function(event) {
console.log(String(event.target));
})
.on('complete', function() {
console.log('Fastest is ' + this.filter('fastest').map('name'));
})
// run async
.run({ 'async': true });
</script> -->
</body>
</html>