├── .babelrc
├── .gitignore
├── LICENSE
├── README.md
├── alloy_crop
    └── README.md
├── alloy_finger.js
├── asset
    ├── a.html
    ├── alloy_paper.js
    ├── cover.jpg
    ├── image_loaded.js
    ├── loading.gif
    ├── test.png
    ├── test2.png
    ├── test3.png
    ├── to.js
    ├── transform.js
    └── yes.png
├── example
    ├── canvas
    │   └── index.html
    ├── destroy
    │   └── index.html
    ├── on_off
    │   └── index.html
    ├── picture
    │   └── index.html
    ├── simple
    │   └── index.html
    ├── tap_state
    │   └── index.html
    └── test
    │   └── index.html
├── index.html
├── package.json
├── react
    └── AlloyFinger.jsx
└── transformjs
    ├── README.md
    └── transform.js


/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": [
 3 |     ["env", {
 4 |       "targets": {
 5 |         "browsers": ["last 2 versions", "> 5%"],
 6 |         "ios": 7,
 7 |         "android": 4,
 8 |         "node": 6,
 9 |         "ie": 11
10 |       },
11 |       "include": [],
12 |       "exclude": [
13 |         "transform-async-to-generator"
14 |       ],
15 |       "uglify": true,
16 |       "useBuiltIns": true,
17 |       "loose": false,
18 |       "debug": false
19 |     }],
20 |     "react"
21 |   ],
22 |   "plugins": [
23 |     "add-module-exports",
24 |     "transform-es2015-modules-commonjs",
25 |     "fast-async",
26 |     "transform-function-bind",
27 |     "transform-class-properties",
28 |     "transform-object-rest-spread",
29 |     "transform-decorators"
30 |   ]
31 | }
32 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | /node_modules/
2 | dist/
3 | .DS_Store
4 | npm-debug.log
5 | .idea/
6 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2016 腾讯 AlloyTeam
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Preview
  2 | 
  3 | You can touch this → [http://alloyteam.github.io/AlloyFinger/](http://alloyteam.github.io/AlloyFinger/)
  4 | 
  5 | # Install
  6 | 
  7 | You can install it via npm:
  8 | 
  9 | ```html
 10 | npm install alloyfinger
 11 | ```
 12 | 
 13 | # Usage
 14 | 
 15 | ```js
 16 | var af = new AlloyFinger(element, {
 17 |     touchStart: function () { },
 18 |     touchMove: function () { },
 19 |     touchEnd:  function () { },
 20 |     touchCancel: function () { },
 21 |     multipointStart: function () { },
 22 |     multipointEnd: function () { },
 23 |     tap: function () { },
 24 |     doubleTap: function () { },
 25 |     longTap: function () { },
 26 |     singleTap: function () { },
 27 |     rotate: function (evt) {
 28 |         console.log(evt.angle);
 29 |     },
 30 |     pinch: function (evt) {
 31 |         console.log(evt.zoom);
 32 |     },
 33 |     pressMove: function (evt) {
 34 |         console.log(evt.deltaX);
 35 |         console.log(evt.deltaY);
 36 |     },
 37 |     swipe: function (evt) {
 38 |         console.log("swipe" + evt.direction);
 39 |     }
 40 | });
 41 | 
 42 | /**
 43 |  * this method can also add or remove the event handler
 44 |  */
 45 | var onTap = function() {};
 46 | 
 47 | af.on('tap', onTap);
 48 | af.on('touchStart', function() {});
 49 | 
 50 | af.off('tap', onTap);
 51 | 
 52 | /**
 53 |  * this method can destroy the instance
 54 |  */
 55 | af = af.destroy();
 56 | ```
 57 | 
 58 | ### Omi Version:
 59 | 
 60 | 
 61 | ```js
 62 | import { render, tag, WeElement } from 'omi'
 63 | import 'omi-finger'
 64 | 
 65 | @tag('my-app')
 66 | class MyApp extends WeElement {
 67 |   install() {
 68 |     this.data.wording = 'Tap or Swipe Me!'
 69 |   }
 70 | 
 71 |   handleTap = (evt) => {
 72 |     this.data.wording += '\r\nTap'
 73 |     this.update()
 74 |   }
 75 | 
 76 |   handleSwipe = (evt) => {
 77 |     this.data.wording += '\r\nSwipe-' + evt.direction
 78 |     this.update()
 79 |   }
 80 | 
 81 |   render() {
 82 |     return (
 83 |       <div>
 84 |         <omi-finger onTap={this.handleTap} abc={{a:1}} onSwipe={this.handleSwipe}>
 85 |           <div class="touchArea" >
 86 |             {this.data.wording}
 87 |           </div>
 88 |         </omi-finger>
 89 |       </div>
 90 |     )
 91 |   }
 92 | 
 93 |   css() {
 94 |     return `.touchArea{
 95 |                   background-color: green;
 96 |                   width: 200px;
 97 |                   min-height: 200px;
 98 |                   text-align: center;
 99 |                   color:white;
100 |                   height:auto;
101 |                   white-space: pre-line;
102 |               }`
103 |   }
104 | }
105 | 
106 | render(<my-app></my-app>, 'body')
107 | ```
108 | 
109 | * [omi-finger](https://github.com/Tencent/omi/tree/master/packages/omi-finger)
110 | * [css3transform](https://github.com/Tencent/omi/tree/master/packages/omi-transform)
111 | 
112 | # Others
113 | 
114 | * [AlloyCrop](https://github.com/AlloyTeam/AlloyCrop)
115 | 
116 | 
117 | # License
118 | This content is released under the [MIT](http://opensource.org/licenses/MIT) License.
119 | 


--------------------------------------------------------------------------------
/alloy_crop/README.md:
--------------------------------------------------------------------------------
1 | # 项目新地址
2 | 
3 | New Address -> [https://github.com/AlloyTeam/AlloyCrop](https://github.com/AlloyTeam/AlloyCrop)
4 | 


--------------------------------------------------------------------------------
/alloy_finger.js:
--------------------------------------------------------------------------------
  1 | /* AlloyFinger v0.1.15
  2 |  * By dntzhang
  3 |  * Github: https://github.com/AlloyTeam/AlloyFinger
  4 |  */
  5 | ; (function () {
  6 |     function getLen(v) {
  7 |         return Math.sqrt(v.x * v.x + v.y * v.y);
  8 |     }
  9 | 
 10 |     function dot(v1, v2) {
 11 |         return v1.x * v2.x + v1.y * v2.y;
 12 |     }
 13 | 
 14 |     function getAngle(v1, v2) {
 15 |         var mr = getLen(v1) * getLen(v2);
 16 |         if (mr === 0) return 0;
 17 |         var r = dot(v1, v2) / mr;
 18 |         if (r > 1) r = 1;
 19 |         return Math.acos(r);
 20 |     }
 21 | 
 22 |     function cross(v1, v2) {
 23 |         return v1.x * v2.y - v2.x * v1.y;
 24 |     }
 25 | 
 26 |     function getRotateAngle(v1, v2) {
 27 |         var angle = getAngle(v1, v2);
 28 |         if (cross(v1, v2) > 0) {
 29 |             angle *= -1;
 30 |         }
 31 | 
 32 |         return angle * 180 / Math.PI;
 33 |     }
 34 | 
 35 |     var HandlerAdmin = function(el) {
 36 |         this.handlers = [];
 37 |         this.el = el;
 38 |     };
 39 | 
 40 |     HandlerAdmin.prototype.add = function(handler) {
 41 |         this.handlers.push(handler);
 42 |     }
 43 | 
 44 |     HandlerAdmin.prototype.del = function(handler) {
 45 |         if(!handler) this.handlers = [];
 46 | 
 47 |         for(var i=this.handlers.length; i>=0; i--) {
 48 |             if(this.handlers[i] === handler) {
 49 |                 this.handlers.splice(i, 1);
 50 |             }
 51 |         }
 52 |     }
 53 | 
 54 |     HandlerAdmin.prototype.dispatch = function() {
 55 |         for(var i=0,len=this.handlers.length; i<len; i++) {
 56 |             var handler = this.handlers[i];
 57 |             if(typeof handler === 'function') handler.apply(this.el, arguments);
 58 |         }
 59 |     }
 60 | 
 61 |     function wrapFunc(el, handler) {
 62 |         var handlerAdmin = new HandlerAdmin(el);
 63 |         handlerAdmin.add(handler);
 64 | 
 65 |         return handlerAdmin;
 66 |     }
 67 | 
 68 |     var AlloyFinger = function (el, option) {
 69 | 
 70 |         this.element = typeof el == 'string' ? document.querySelector(el) : el;
 71 | 
 72 |         this.start = this.start.bind(this);
 73 |         this.move = this.move.bind(this);
 74 |         this.end = this.end.bind(this);
 75 |         this.cancel = this.cancel.bind(this);
 76 |         this.element.addEventListener("touchstart", this.start, false);
 77 |         this.element.addEventListener("touchmove", this.move, false);
 78 |         this.element.addEventListener("touchend", this.end, false);
 79 |         this.element.addEventListener("touchcancel", this.cancel, false);
 80 | 
 81 |         this.preV = { x: null, y: null };
 82 |         this.pinchStartLen = null;
 83 |         this.zoom = 1;
 84 |         this.isDoubleTap = false;
 85 | 
 86 |         var noop = function () { };
 87 | 
 88 |         this.rotate = wrapFunc(this.element, option.rotate || noop);
 89 |         this.touchStart = wrapFunc(this.element, option.touchStart || noop);
 90 |         this.multipointStart = wrapFunc(this.element, option.multipointStart || noop);
 91 |         this.multipointEnd = wrapFunc(this.element, option.multipointEnd || noop);
 92 |         this.pinch = wrapFunc(this.element, option.pinch || noop);
 93 |         this.swipe = wrapFunc(this.element, option.swipe || noop);
 94 |         this.tap = wrapFunc(this.element, option.tap || noop);
 95 |         this.doubleTap = wrapFunc(this.element, option.doubleTap || noop);
 96 |         this.longTap = wrapFunc(this.element, option.longTap || noop);
 97 |         this.singleTap = wrapFunc(this.element, option.singleTap || noop);
 98 |         this.pressMove = wrapFunc(this.element, option.pressMove || noop);
 99 |         this.twoFingerPressMove = wrapFunc(this.element, option.twoFingerPressMove || noop);
100 |         this.touchMove = wrapFunc(this.element, option.touchMove || noop);
101 |         this.touchEnd = wrapFunc(this.element, option.touchEnd || noop);
102 |         this.touchCancel = wrapFunc(this.element, option.touchCancel || noop);
103 | 
104 |         this._cancelAllHandler = this.cancelAll.bind(this);
105 | 
106 |         window.addEventListener('scroll', this._cancelAllHandler);
107 | 
108 |         this.delta = null;
109 |         this.last = null;
110 |         this.now = null;
111 |         this.tapTimeout = null;
112 |         this.singleTapTimeout = null;
113 |         this.longTapTimeout = null;
114 |         this.swipeTimeout = null;
115 |         this.x1 = this.x2 = this.y1 = this.y2 = null;
116 |         this.preTapPosition = { x: null, y: null };
117 |     };
118 | 
119 |     AlloyFinger.prototype = {
120 |         start: function (evt) {
121 |             if (!evt.touches) return;
122 |             this.now = Date.now();
123 |             this.x1 = evt.touches[0].pageX;
124 |             this.y1 = evt.touches[0].pageY;
125 |             this.delta = this.now - (this.last || this.now);
126 |             this.touchStart.dispatch(evt, this.element);
127 |             if (this.preTapPosition.x !== null) {
128 |                 this.isDoubleTap = (this.delta > 0 && this.delta <= 250 && Math.abs(this.preTapPosition.x - this.x1) < 30 && Math.abs(this.preTapPosition.y - this.y1) < 30);
129 |                 if (this.isDoubleTap) clearTimeout(this.singleTapTimeout);
130 |             }
131 |             this.preTapPosition.x = this.x1;
132 |             this.preTapPosition.y = this.y1;
133 |             this.last = this.now;
134 |             var preV = this.preV,
135 |                 len = evt.touches.length;
136 |             if (len > 1) {
137 |                 this._cancelLongTap();
138 |                 this._cancelSingleTap();
139 |                 var v = { x: evt.touches[1].pageX - this.x1, y: evt.touches[1].pageY - this.y1 };
140 |                 preV.x = v.x;
141 |                 preV.y = v.y;
142 |                 this.pinchStartLen = getLen(preV);
143 |                 this.multipointStart.dispatch(evt, this.element);
144 |             }
145 |             this._preventTap = false;
146 |             this.longTapTimeout = setTimeout(function () {
147 |                 this.longTap.dispatch(evt, this.element);
148 |                 this._preventTap = true;
149 |             }.bind(this), 750);
150 |         },
151 |         move: function (evt) {
152 |             if (!evt.touches) return;
153 |             var preV = this.preV,
154 |                 len = evt.touches.length,
155 |                 currentX = evt.touches[0].pageX,
156 |                 currentY = evt.touches[0].pageY;
157 |             this.isDoubleTap = false;
158 |             if (len > 1) {
159 |                 var sCurrentX = evt.touches[1].pageX,
160 |                     sCurrentY = evt.touches[1].pageY
161 |                 var v = { x: evt.touches[1].pageX - currentX, y: evt.touches[1].pageY - currentY };
162 | 
163 |                 if (preV.x !== null) {
164 |                     if (this.pinchStartLen > 0) {
165 |                         evt.zoom = getLen(v) / this.pinchStartLen;
166 |                         this.pinch.dispatch(evt, this.element);
167 |                     }
168 | 
169 |                     evt.angle = getRotateAngle(v, preV);
170 |                     this.rotate.dispatch(evt, this.element);
171 |                 }
172 |                 preV.x = v.x;
173 |                 preV.y = v.y;
174 | 
175 |                 if (this.x2 !== null && this.sx2 !== null) {
176 |                     evt.deltaX = (currentX - this.x2 + sCurrentX - this.sx2) / 2;
177 |                     evt.deltaY = (currentY - this.y2 + sCurrentY - this.sy2) / 2;
178 |                 } else {
179 |                     evt.deltaX = 0;
180 |                     evt.deltaY = 0;
181 |                 }
182 |                 this.twoFingerPressMove.dispatch(evt, this.element);
183 | 
184 |                 this.sx2 = sCurrentX;
185 |                 this.sy2 = sCurrentY;
186 |             } else {
187 |                 if (this.x2 !== null) {
188 |                     evt.deltaX = currentX - this.x2;
189 |                     evt.deltaY = currentY - this.y2;
190 | 
191 |                     //move事件中添加对当前触摸点到初始触摸点的判断，
192 |                     //如果曾经大于过某个距离(比如10),就认为是移动到某个地方又移回来，应该不再触发tap事件才对。
193 |                     var movedX = Math.abs(this.x1 - this.x2),
194 |                         movedY = Math.abs(this.y1 - this.y2);
195 | 
196 |                     if(movedX > 10 || movedY > 10){
197 |                         this._preventTap = true;
198 |                     }
199 | 
200 |                 } else {
201 |                     evt.deltaX = 0;
202 |                     evt.deltaY = 0;
203 |                 }
204 |                 
205 |                 
206 |                 this.pressMove.dispatch(evt, this.element);
207 |             }
208 | 
209 |             this.touchMove.dispatch(evt, this.element);
210 | 
211 |             this._cancelLongTap();
212 |             this.x2 = currentX;
213 |             this.y2 = currentY;
214 |             
215 |             if (len > 1) {
216 |                 evt.preventDefault();
217 |             }
218 |         },
219 |         end: function (evt) {
220 |             if (!evt.changedTouches) return;
221 |             this._cancelLongTap();
222 |             var self = this;
223 |             if (evt.touches.length < 2) {
224 |                 this.multipointEnd.dispatch(evt, this.element);
225 |                 this.sx2 = this.sy2 = null;
226 |             }
227 | 
228 |             //swipe
229 |             if ((this.x2 && Math.abs(this.x1 - this.x2) > 30) ||
230 |                 (this.y2 && Math.abs(this.y1 - this.y2) > 30)) {
231 |                 evt.direction = this._swipeDirection(this.x1, this.x2, this.y1, this.y2);
232 |                 this.swipeTimeout = setTimeout(function () {
233 |                     self.swipe.dispatch(evt, self.element);
234 | 
235 |                 }, 0)
236 |             } else {
237 |                 this.tapTimeout = setTimeout(function () {
238 |                     if(!self._preventTap){
239 |                         self.tap.dispatch(evt, self.element);
240 |                     }
241 |                     // trigger double tap immediately
242 |                     if (self.isDoubleTap) {
243 |                         self.doubleTap.dispatch(evt, self.element);
244 |                         self.isDoubleTap = false;
245 |                     }
246 |                 }, 0)
247 | 
248 |                 if (!self.isDoubleTap) {
249 |                     self.singleTapTimeout = setTimeout(function () {
250 |                         self.singleTap.dispatch(evt, self.element);
251 |                     }, 250);
252 |                 }
253 |             }
254 | 
255 |             this.touchEnd.dispatch(evt, this.element);
256 | 
257 |             this.preV.x = 0;
258 |             this.preV.y = 0;
259 |             this.zoom = 1;
260 |             this.pinchStartLen = null;
261 |             this.x1 = this.x2 = this.y1 = this.y2 = null;
262 |         },
263 |         cancelAll: function () {
264 |             this._preventTap = true
265 |             clearTimeout(this.singleTapTimeout);
266 |             clearTimeout(this.tapTimeout);
267 |             clearTimeout(this.longTapTimeout);
268 |             clearTimeout(this.swipeTimeout);
269 |         },
270 |         cancel: function (evt) {
271 |             this.cancelAll()
272 |             this.touchCancel.dispatch(evt, this.element);
273 |         },
274 |         _cancelLongTap: function () {
275 |             clearTimeout(this.longTapTimeout);
276 |         },
277 |         _cancelSingleTap: function () {
278 |             clearTimeout(this.singleTapTimeout);
279 |         },
280 |         _swipeDirection: function (x1, x2, y1, y2) {
281 |             return Math.abs(x1 - x2) >= Math.abs(y1 - y2) ? (x1 - x2 > 0 ? 'Left' : 'Right') : (y1 - y2 > 0 ? 'Up' : 'Down')
282 |         },
283 | 
284 |         on: function(evt, handler) {
285 |             if(this[evt]) {
286 |                 this[evt].add(handler);
287 |             }
288 |         },
289 | 
290 |         off: function(evt, handler) {
291 |             if(this[evt]) {
292 |                 this[evt].del(handler);
293 |             }
294 |         },
295 | 
296 |         destroy: function() {
297 |             if(this.singleTapTimeout) clearTimeout(this.singleTapTimeout);
298 |             if(this.tapTimeout) clearTimeout(this.tapTimeout);
299 |             if(this.longTapTimeout) clearTimeout(this.longTapTimeout);
300 |             if(this.swipeTimeout) clearTimeout(this.swipeTimeout);
301 | 
302 |             this.element.removeEventListener("touchstart", this.start);
303 |             this.element.removeEventListener("touchmove", this.move);
304 |             this.element.removeEventListener("touchend", this.end);
305 |             this.element.removeEventListener("touchcancel", this.cancel);
306 | 
307 |             this.rotate.del();
308 |             this.touchStart.del();
309 |             this.multipointStart.del();
310 |             this.multipointEnd.del();
311 |             this.pinch.del();
312 |             this.swipe.del();
313 |             this.tap.del();
314 |             this.doubleTap.del();
315 |             this.longTap.del();
316 |             this.singleTap.del();
317 |             this.pressMove.del();
318 |             this.twoFingerPressMove.del()
319 |             this.touchMove.del();
320 |             this.touchEnd.del();
321 |             this.touchCancel.del();
322 | 
323 |             this.preV = this.pinchStartLen = this.zoom = this.isDoubleTap = this.delta = this.last = this.now = this.tapTimeout = this.singleTapTimeout = this.longTapTimeout = this.swipeTimeout = this.x1 = this.x2 = this.y1 = this.y2 = this.preTapPosition = this.rotate = this.touchStart = this.multipointStart = this.multipointEnd = this.pinch = this.swipe = this.tap = this.doubleTap = this.longTap = this.singleTap = this.pressMove = this.touchMove = this.touchEnd = this.touchCancel = this.twoFingerPressMove = null;
324 | 
325 |             window.removeEventListener('scroll', this._cancelAllHandler);
326 |             return null;
327 |         }
328 |     };
329 | 
330 |     if (typeof module !== 'undefined' && typeof exports === 'object') {
331 |         module.exports = AlloyFinger;
332 |     } else {
333 |         window.AlloyFinger = AlloyFinger;
334 |     }
335 | })();
336 | 


--------------------------------------------------------------------------------
/asset/a.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html xmlns="http://www.w3.org/1999/xhtml">
  3 | <head>
  4 |     <title></title>
  5 |     <style>
  6 |         #ctt .test {
  7 |             width: 100px; height: 100px;  color: white; line-height: 100px; text-align: center; display: inline-block; margin-top: 30px; position: absolute; left: 0; top: 0;
  8 |         }
  9 |     </style>
 10 | </head>
 11 | <body>
 12 | <div style="text-align: center;position:relative;left:100px;top:100px;"  id="ctt">
 13 | 
 14 |     <div id="test1" class="test" style="background-color: green; ">
 15 |         transformjs
 16 |     </div>
 17 | 
 18 |     <div id="test2" class="test" style="background-color: red;left:200px; ">
 19 |         transformjs
 20 |     </div>
 21 | 
 22 |     <div id="test3" class="test" style="background-color: blue;left:400px ">
 23 |         transformjs
 24 |     </div>
 25 | 
 26 |     <div id="test4" class="test" style="background-color: #ff6a00;left:600px ">
 27 |         transformjs
 28 |     </div>
 29 | 
 30 |     <div id="test5" class="test" style="background-color:#485f0f;left:400px;top:200px; ">
 31 |         transformjs
 32 |     </div>
 33 | 
 34 |     <div id="test6" class="test" style="background-color:#485f0f;left:0;top:200px; ">
 35 |         transformjs
 36 |     </div>
 37 | 
 38 |     <div id="test7" class="test" style="background-color:#291996;left:200px;top:200px; ">
 39 |         transformjs
 40 |     </div>
 41 | 
 42 |     <div id="test8" class="test" style="background-color:#291996;left:600px;top:200px; ">
 43 |         transformjs
 44 |     </div>
 45 | 
 46 |     <div id="test9" class="test" style="background-color:#c71585;left:200px;top:400px; ">
 47 |         transformjs
 48 |     </div>
 49 |     <div id="test10" class="test" style="background-color:#32cd32;left:400px;top:400px; ">
 50 |         transformjs
 51 |     </div>
 52 | </div>
 53 | <script src="transform.js"></script>
 54 | <script>
 55 |     //----------------how to use---------------------------------
 56 |     var element1 = document.querySelector("#test1");
 57 |     var element2 = document.querySelector("#test2");
 58 |     var element3 = document.querySelector("#test3");
 59 |     var element4 = document.querySelector("#test4");
 60 |     var element5 = document.querySelector("#test5");
 61 |     var element6= document.querySelector("#test6");
 62 |     var element7 = document.querySelector("#test7");
 63 |     var element8 = document.querySelector("#test8");
 64 |     var element9 = document.querySelector("#test9");
 65 |     var element10 = document.querySelector("#test10");
 66 |     Transform(element1);
 67 |     Transform(element2);
 68 |     Transform(element3);
 69 |     Transform(element4);
 70 |     Transform(element5);
 71 |     Transform(element6);
 72 |     Transform(element7);
 73 |     Transform(element8);
 74 |     Transform(element9);
 75 |     Transform(element10);
 76 | 
 77 |     element8.originZ = -150;
 78 |     element4.originX = -50;
 79 |     element4.originY = -50;
 80 | 
 81 |     var step = 0.02, xStep = 3;
 82 |     setInterval(function () {
 83 |         element1.rotateZ++;
 84 |         element2.rotateY++;
 85 |         element3.rotateX++;
 86 |         element4.rotateZ++;
 87 |         element5.rotateY++;
 88 |         element5.rotateX++;
 89 | 
 90 |         element7.translateX < -50 && (xStep *= -1);
 91 |         element7.translateX > 50 && (xStep *= -1);
 92 |         element7.translateX += xStep;
 93 |         element6.scaleX < 0.5 && (step *= -1);
 94 |         element6.scaleX > 1.5 && (step *= -1);
 95 |         element6.scaleX += step;
 96 |         element6.scaleY += step;
 97 |         element8.rotateY++;
 98 |         element8.rotateX++;
 99 | 
100 |         element9.skewX++;
101 |         element10.skewY++;
102 |     }, 15);
103 |     //------------------------------------------------------------
104 | </script>
105 | </body>
106 | </html>


--------------------------------------------------------------------------------
/asset/cover.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AlloyTeam/AlloyFinger/38f2062e65d311db4d51457f06bc0ec77d66f664/asset/cover.jpg


--------------------------------------------------------------------------------
/asset/image_loaded.js:
--------------------------------------------------------------------------------
 1 | function imageLoaded(selector,onload){
 2 |     var img=new Image() ;
 3 |     var dom=document.querySelector(selector);
 4 |     img.onload=function(){
 5 |         //real_width,real_height
 6 |         onload.call(dom,this.width,this.height);
 7 |         img.onload=null;
 8 |         img=null;
 9 |     };
10 |     img.src=dom.getAttribute("src");
11 | }


--------------------------------------------------------------------------------
/asset/loading.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AlloyTeam/AlloyFinger/38f2062e65d311db4d51457f06bc0ec77d66f664/asset/loading.gif


--------------------------------------------------------------------------------
/asset/test.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AlloyTeam/AlloyFinger/38f2062e65d311db4d51457f06bc0ec77d66f664/asset/test.png


--------------------------------------------------------------------------------
/asset/test2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AlloyTeam/AlloyFinger/38f2062e65d311db4d51457f06bc0ec77d66f664/asset/test2.png


--------------------------------------------------------------------------------
/asset/test3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AlloyTeam/AlloyFinger/38f2062e65d311db4d51457f06bc0ec77d66f664/asset/test3.png


--------------------------------------------------------------------------------
/asset/to.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AlloyTeam/AlloyFinger/38f2062e65d311db4d51457f06bc0ec77d66f664/asset/to.js


--------------------------------------------------------------------------------
/asset/transform.js:
--------------------------------------------------------------------------------
  1 | /* transformjs
  2 |  * By dntzhang
  3 |  */
  4 | ;(function () {
  5 | 
  6 |     var Matrix3D = function (n11, n12, n13, n14, n21, n22, n23, n24, n31, n32, n33, n34, n41, n42, n43, n44) {
  7 |         this.elements =window.Float32Array ? new Float32Array(16) : [];
  8 |         var te = this.elements;
  9 |         te[0] = (n11 !== undefined) ? n11 : 1; te[4] = n12 || 0; te[8] = n13 || 0; te[12] = n14 || 0;
 10 |         te[1] = n21 || 0; te[5] = (n22 !== undefined) ? n22 : 1; te[9] = n23 || 0; te[13] = n24 || 0;
 11 |         te[2] = n31 || 0; te[6] = n32 || 0; te[10] = (n33 !== undefined) ? n33 : 1; te[14] = n34 || 0;
 12 |         te[3] = n41 || 0; te[7] = n42 || 0; te[11] = n43 || 0; te[15] = (n44 !== undefined) ? n44 : 1;
 13 |     };
 14 | 
 15 |     Matrix3D.DEG_TO_RAD = Math.PI / 180;
 16 | 
 17 |     Matrix3D.prototype = {
 18 |         set: function (n11, n12, n13, n14, n21, n22, n23, n24, n31, n32, n33, n34, n41, n42, n43, n44) {
 19 |             var te = this.elements;
 20 |             te[0] = n11; te[4] = n12; te[8] = n13; te[12] = n14;
 21 |             te[1] = n21; te[5] = n22; te[9] = n23; te[13] = n24;
 22 |             te[2] = n31; te[6] = n32; te[10] = n33; te[14] = n34;
 23 |             te[3] = n41; te[7] = n42; te[11] = n43; te[15] = n44;
 24 |             return this;
 25 |         },
 26 |         identity: function () {
 27 |             this.set(
 28 |                 1, 0, 0, 0,
 29 |                 0, 1, 0, 0,
 30 |                 0, 0, 1, 0,
 31 |                 0, 0, 0, 1
 32 |             );
 33 |             return this;
 34 |         },
 35 |         multiplyMatrices: function (a, be) {
 36 | 
 37 |             var ae = a.elements;
 38 |             var te = this.elements;
 39 |             var a11 = ae[0], a12 = ae[4], a13 = ae[8], a14 = ae[12];
 40 |             var a21 = ae[1], a22 = ae[5], a23 = ae[9], a24 = ae[13];
 41 |             var a31 = ae[2], a32 = ae[6], a33 = ae[10], a34 = ae[14];
 42 |             var a41 = ae[3], a42 = ae[7], a43 = ae[11], a44 = ae[15];
 43 | 
 44 |             var b11 = be[0], b12 = be[1], b13 = be[2], b14 = be[3];
 45 |             var b21 = be[4], b22 = be[5], b23 = be[6], b24 = be[7];
 46 |             var b31 = be[8], b32 = be[9], b33 = be[10], b34 = be[11];
 47 |             var b41 = be[12], b42 = be[13], b43 = be[14], b44 = be[15];
 48 | 
 49 |             te[0] = a11 * b11 + a12 * b21 + a13 * b31 + a14 * b41;
 50 |             te[4] = a11 * b12 + a12 * b22 + a13 * b32 + a14 * b42;
 51 |             te[8] = a11 * b13 + a12 * b23 + a13 * b33 + a14 * b43;
 52 |             te[12] = a11 * b14 + a12 * b24 + a13 * b34 + a14 * b44;
 53 | 
 54 |             te[1] = a21 * b11 + a22 * b21 + a23 * b31 + a24 * b41;
 55 |             te[5] = a21 * b12 + a22 * b22 + a23 * b32 + a24 * b42;
 56 |             te[9] = a21 * b13 + a22 * b23 + a23 * b33 + a24 * b43;
 57 |             te[13] = a21 * b14 + a22 * b24 + a23 * b34 + a24 * b44;
 58 | 
 59 |             te[2] = a31 * b11 + a32 * b21 + a33 * b31 + a34 * b41;
 60 |             te[6] = a31 * b12 + a32 * b22 + a33 * b32 + a34 * b42;
 61 |             te[10] = a31 * b13 + a32 * b23 + a33 * b33 + a34 * b43;
 62 |             te[14] = a31 * b14 + a32 * b24 + a33 * b34 + a34 * b44;
 63 | 
 64 |             te[3] = a41 * b11 + a42 * b21 + a43 * b31 + a44 * b41;
 65 |             te[7] = a41 * b12 + a42 * b22 + a43 * b32 + a44 * b42;
 66 |             te[11] = a41 * b13 + a42 * b23 + a43 * b33 + a44 * b43;
 67 |             te[15] = a41 * b14 + a42 * b24 + a43 * b34 + a44 * b44;
 68 | 
 69 |             return this;
 70 | 
 71 |         },
 72 |         // 解决角度为90的整数倍导致Math.cos得到极小的数，其实是0。导致不渲染
 73 |         _rounded: function(value,i){
 74 |             i= Math.pow(10, i || 15);
 75 |             // default
 76 |             return Math.round(value*i)/i;
 77 |         },
 78 |         appendTransform: function (x, y, z, scaleX, scaleY, scaleZ, rotateX, rotateY, rotateZ,skewX,skewY, originX, originY, originZ) {
 79 | 
 80 |             var rx = rotateX * Matrix3D.DEG_TO_RAD;
 81 |             var cosx =this._rounded( Math.cos(rx));
 82 |             var sinx = this._rounded(Math.sin(rx));
 83 |             var ry = rotateY * Matrix3D.DEG_TO_RAD;
 84 |             var cosy =this._rounded( Math.cos(ry));
 85 |             var siny = this._rounded(Math.sin(ry));
 86 |             var rz = rotateZ * Matrix3D.DEG_TO_RAD;
 87 |             var cosz =this._rounded( Math.cos(rz * -1));
 88 |             var sinz =this._rounded( Math.sin(rz * -1));
 89 | 
 90 |             this.multiplyMatrices(this, [
 91 |                 1, 0, 0, x,
 92 |                 0, cosx, sinx, y,
 93 |                 0, -sinx, cosx, z,
 94 |                 0, 0, 0, 1
 95 |             ]);
 96 | 
 97 |             this.multiplyMatrices(this, [
 98 |                 cosy, 0, siny, 0,
 99 |                 0, 1, 0, 0,
100 |                 -siny, 0, cosy, 0,
101 |                 0, 0, 0, 1
102 |             ]);
103 | 
104 |             this.multiplyMatrices(this,[
105 |                 cosz * scaleX, sinz * scaleY, 0, 0,
106 |                 -sinz * scaleX, cosz * scaleY, 0, 0,
107 |                 0, 0, 1 * scaleZ, 0,
108 |                 0, 0, 0, 1
109 |             ]);
110 | 
111 |             if(skewX||skewY){
112 |                 this.multiplyMatrices(this,[
113 |                     this._rounded(Math.cos(skewX* Matrix3D.DEG_TO_RAD)), this._rounded( Math.sin(skewX* Matrix3D.DEG_TO_RAD)), 0, 0,
114 |                     -1*this._rounded(Math.sin(skewY* Matrix3D.DEG_TO_RAD)), this._rounded( Math.cos(skewY* Matrix3D.DEG_TO_RAD)), 0, 0,
115 |                     0, 0, 1, 0,
116 |                     0, 0, 0, 1
117 |                 ]);
118 |             }
119 | 
120 |             if (originX || originY || originZ) {
121 |                 this.elements[12] -= originX * this.elements[0] + originY * this.elements[4] + originZ * this.elements[8];
122 |                 this.elements[13] -= originX * this.elements[1] + originY * this.elements[5] + originZ * this.elements[9];
123 |                 this.elements[14] -= originX * this.elements[2] + originY * this.elements[6] + originZ * this.elements[10];
124 |             }
125 |             return this;
126 |         }
127 |     };
128 | 
129 |     function observe(target, props, callback) {
130 |         for (var i = 0, len = props.length; i < len; i++) {
131 |             var prop = props[i];
132 |             watch(target, prop, callback);
133 |         }
134 |     }
135 | 
136 |     function watch(target, prop, callback) {
137 |         Object.defineProperty(target, prop, {
138 |             get: function () {
139 |                 return this["__" + prop];
140 |             },
141 |             set: function (value) {
142 |                 if (value !== this["__" + prop]) {
143 |                     this["__" + prop] = value;
144 |                     callback();
145 |                 }
146 | 
147 |             }
148 |         });
149 |     }
150 | 
151 |     window.Transform = function (element) {
152 | 
153 |         observe(
154 |             element,
155 |             ["translateX", "translateY", "translateZ", "scaleX", "scaleY", "scaleZ" , "rotateX", "rotateY", "rotateZ","skewX","skewY", "originX", "originY", "originZ"],
156 |             function () {
157 |                 var mtx = element.matrix3D.identity().appendTransform( element.translateX, element.translateY, element.translateZ, element.scaleX, element.scaleY, element.scaleZ, element.rotateX, element.rotateY, element.rotateZ,element.skewX,element.skewY, element.originX, element.originY, element.originZ);
158 |                 element.style.transform = element.style.msTransform = element.style.OTransform = element.style.MozTransform = element.style.webkitTransform = "perspective("+element.perspective+"px) matrix3d(" + Array.prototype.slice.call(mtx.elements).join(",") + ")";
159 |             });
160 | 
161 |         observe(
162 |             element,
163 |             [ "perspective"],
164 |             function () {
165 |                 element.style.transform = element.style.msTransform = element.style.OTransform = element.style.MozTransform = element.style.webkitTransform = "perspective("+element.perspective+"px) matrix3d(" + Array.prototype.slice.call(element.matrix3D.elements).join(",") + ")";
166 |             });
167 | 
168 |         element.matrix3D = new Matrix3D();
169 |         element.perspective = 500;
170 |         element.scaleX = element.scaleY = element.scaleZ = 1;
171 |         //由于image自带了x\y\z，所有加上translate前缀
172 |         element.translateX = element.translateY = element.translateZ = element.rotateX = element.rotateY = element.rotateZ =element.skewX=element.skewY= element.originX = element.originY = element.originZ = 0;
173 |     }
174 | })();


--------------------------------------------------------------------------------
/asset/yes.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AlloyTeam/AlloyFinger/38f2062e65d311db4d51457f06bc0ec77d66f664/asset/yes.png


--------------------------------------------------------------------------------
/example/canvas/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 |     <meta charset="utf-8">
  5 |     <title>Canvas+AlloyFinger</title>
  6 |     <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
  7 |     <style>
  8 |         .ribbon {
  9 |             top: 3.2em;
 10 |             right: -4.7em;
 11 |             -webkit-transform: rotate(45deg);
 12 |             -moz-transform: rotate(45deg);
 13 |             -ms-transform: rotate(45deg);
 14 |             -o-transform: rotate(45deg);
 15 |             transform: rotate(45deg);
 16 |             color:#fff;
 17 |             display: block;
 18 |             padding: .6em 3.5em;
 19 |             position: fixed;
 20 |             text-align: center;
 21 |             text-decoration: none;
 22 |             -webkit-user-select: none;
 23 |             -moz-user-select: none;
 24 |             -ms-user-select: none;
 25 |             user-select: none;
 26 |             background-color: green;
 27 |             z-index: 10000;
 28 |         }
 29 |     </style>
 30 | </head>
 31 | <body>
 32 | <a href="https://github.com/AlloyTeam/AlloyFinger" class="ribbon">Fork me on Github</a>
 33 | <script src="../../asset/alloy_paper.js"></script>
 34 | <script src="../../alloy_finger.js"></script>
 35 | <div style="text-align: center;"><canvas id="ourCanvas" width="300" height="600" style="border: 1px solid black;"></canvas></div>
 36 | 
 37 | <script>
 38 | 
 39 |     ;(function (AlloyPaper) {
 40 |         var Stage = AlloyPaper.Stage, Bitmap = AlloyPaper.Bitmap,Loader=AlloyPaper.Loader;
 41 | 
 42 |         var stage = new Stage("#ourCanvas");
 43 |         stage.autoUpdate=false;
 44 |         var ld = new Loader();
 45 |         ld.loadRes([
 46 |             { id: "test", src: "../../asset/test.png" },
 47 |             { id: "test2", src: "../../asset/test2.png" }
 48 |         ]);
 49 |         ld.complete(function () {
 50 |             var bmp = new Bitmap(ld.get("test"));
 51 |             bmp.originX = 0.5;
 52 |             bmp.originY = 0.5;
 53 |             bmp.x = stage.width / 2;
 54 |             bmp.y =150;
 55 |             stage.add(bmp);
 56 | 
 57 |             var bmp2 = new Bitmap(ld.get("test2"));
 58 |             bmp2.originX = 0.5;
 59 |             bmp2.originY = 0.5;
 60 |             bmp2.x = stage.width / 2;
 61 |             bmp2.y =450;
 62 |             stage.add(bmp2);
 63 | 
 64 |             stage.update();
 65 | 
 66 |             var initScale = 1;
 67 |             new AlloyFinger(bmp, {
 68 |                 multipointStart: function () {
 69 |                     initScale = bmp.scaleX;
 70 |                 },
 71 |                 rotate: function (evt) {
 72 |                     bmp.rotation += evt.angle;
 73 |                     stage.update();
 74 |                 },
 75 |                 pinch: function (evt) {
 76 |                     bmp.scaleX = bmp.scaleY = initScale * evt.scale;
 77 |                     stage.update();
 78 |                 },
 79 |                 pressMove: function (evt) {
 80 |                     bmp.x += evt.deltaX;
 81 |                     bmp.y += evt.deltaY;
 82 |                     evt.preventDefault();
 83 |                     stage.update();
 84 |                 }
 85 | 
 86 |             });
 87 | 
 88 |             new AlloyFinger(bmp2, {
 89 |                 multipointStart: function () {
 90 |                     initScale = bmp2.scaleX;
 91 |                 },
 92 |                 rotate: function (evt) {
 93 |                     bmp2.rotation += evt.angle;
 94 |                     stage.update();
 95 |                 },
 96 |                 pinch: function (evt) {
 97 |                     bmp2.scaleX = bmp2.scaleY = initScale * evt.scale;
 98 |                     stage.update();
 99 |                 },
100 |                 pressMove: function (evt) {
101 |                     bmp2.x += evt.deltaX;
102 |                     bmp2.y += evt.deltaY;
103 |                     evt.preventDefault();
104 |                     stage.update();
105 |                 }
106 | 
107 |             });
108 |         });
109 | 
110 | 
111 |     })(AlloyPaper)
112 | 
113 | 
114 | 
115 | </script>
116 | </body>
117 | </html>


--------------------------------------------------------------------------------
/example/destroy/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Event Test</title>
 5 |     <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
 6 |     <style>
 7 |         #test {
 8 |             -webkit-tap-highlight-color: rgba(0,0,0,0);
 9 |             background-color: green;
10 |         }
11 | 
12 |          
13 |     </style>
14 | </head>
15 | <body style="text-align: center; font-family: Segoe UI Light,Segoe UI,Microsoft Jhenghei,Mirco Yahei,'sans-serif'; background-color: black; color: white;">
16 |     <div id="test" style="width: 280px; height: 200px; margin: 0 auto; line-height: 200px; font-size: 30px;">Touch Me</div>
17 |     <div id="result" style="font-size: 18px;"></div>
18 |     <script src="../../alloy_finger.js"></script>
19 |     <div>
20 |         <script>
21 | 
22 |             var result = document.querySelector("#result"),
23 |                 testDiv = document.querySelector("#test"),
24 |                 html = "";
25 | 
26 |             var af = new AlloyFinger(testDiv, {
27 |                 touchStart: function () {
28 |                     html = "";
29 |                     html += "start<br/>";
30 |                     result.innerHTML = html;
31 |                  
32 |                 },
33 |                 touchEnd: function () {
34 |                     html += "end<br/>";
35 |                     result.innerHTML = html;
36 |                  
37 |                 },
38 |                 tap: function () {
39 |                     html += "tap<br/>";
40 |                     result.innerHTML = html;
41 |                 }
42 |             });
43 | 
44 |             var onLongTap = function() {
45 |                 html += "destroy<br/>";
46 |                 result.innerHTML = html;
47 |                 af = af.destroy();
48 |             }
49 | 
50 |             af.on('longTap', onLongTap);
51 |         </script>
52 |     </div>
53 | </body>
54 | </html>
55 | 


--------------------------------------------------------------------------------
/example/on_off/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Event Test</title>
 5 |     <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
 6 |     <style>
 7 |         #test {
 8 |             -webkit-tap-highlight-color: rgba(0,0,0,0);
 9 |             background-color: green;
10 |         }
11 | 
12 |          
13 |     </style>
14 | </head>
15 | <body style="text-align: center; font-family: Segoe UI Light,Segoe UI,Microsoft Jhenghei,Mirco Yahei,'sans-serif'; background-color: black; color: white;">
16 |     <div id="test" style="width: 280px; height: 200px; margin: 0 auto; line-height: 200px; font-size: 30px;">Touch Me</div>
17 |     <div id="result" style="font-size: 18px;"></div>
18 |     <script src="../../alloy_finger.js"></script>
19 |     <div>
20 |         <script>
21 | 
22 |             var result = document.querySelector("#result"),
23 |                 testDiv = document.querySelector("#test"),
24 |                 html = "";
25 | 
26 |             var af = new AlloyFinger(testDiv, {
27 |                 touchStart: function () {
28 |                     html = "";
29 |                     html += "start<br/>";
30 |                     result.innerHTML = html;
31 |                  
32 |                 },
33 |                 touchEnd: function () {
34 |                     html += "end<br/>";
35 |                     result.innerHTML = html;
36 |                  
37 |                 },
38 |                 tap: function () {
39 |                     html += "tap<br/>";
40 |                     result.innerHTML = html;
41 |                 }
42 |             });
43 | 
44 |             var onLongTap = function() {
45 |                 html += "longTap<br/>";
46 |                 result.innerHTML = html;
47 |             }
48 | 
49 |             af.on('longTap', onLongTap);
50 | 
51 |             af.on('doubleTap', function() {
52 |                 html += "doubleTap<br/>";
53 |                 result.innerHTML = html;
54 | 
55 |                 af.off('longTap', onLongTap);
56 |             });
57 |         </script>
58 |     </div>
59 | </body>
60 | </html>
61 | 


--------------------------------------------------------------------------------
/example/picture/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 |     <title>AlloyFinger</title>
  5 |     <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
  6 |     <style>
  7 |         .ribbon {
  8 |             top: 3.2em;
  9 |             right: -4.7em;
 10 |             -webkit-transform: rotate(45deg);
 11 |             -moz-transform: rotate(45deg);
 12 |             -ms-transform: rotate(45deg);
 13 |             -o-transform: rotate(45deg);
 14 |             transform: rotate(45deg);
 15 |             color:#fff;
 16 |             display: block;
 17 |             padding: .6em 3.5em;
 18 |             position: fixed;
 19 |             text-align: center;
 20 |             text-decoration: none;
 21 |             -webkit-user-select: none;
 22 |             -moz-user-select: none;
 23 |             -ms-user-select: none;
 24 |             user-select: none;
 25 |             background-color: green;
 26 |             z-index: 10000;
 27 |         }
 28 |     </style>
 29 | </head>
 30 | <body>
 31 |     <a href="https://github.com/AlloyTeam/AlloyFinger" class="ribbon">Fork me on Github</a>
 32 |     <script src="../../asset/transform.js"></script>
 33 |     <script src="../../alloy_finger.js"></script>
 34 |     <script src="../../asset/image_loaded.js"></script>
 35 |     <script src="../../asset/to.js"></script>
 36 |     <div id="imgBox" style="position:fixed;width: 100%;height: 100%;left:0;top:0;
 37 |      background:black;display: none;">
 38 |         <img src="../../asset/cover.jpg" id="testImg" alt="" style="width: 100%;position: absolute; " />
 39 |     </div>
 40 | 
 41 |     <script>
 42 |         var topPx;
 43 |         imageLoaded("#testImg",function(w,h){
 44 |             document.querySelector("#imgBox").style.display="block";
 45 |             topPx=window.innerHeight/2-(h*window.innerWidth/w)/2;
 46 |             this.style.top=topPx+"px";
 47 |         });
 48 | 
 49 | 
 50 |         function ease(x) {
 51 |             return Math.sqrt(1 - Math.pow(x - 1, 2));
 52 |         }
 53 | 
 54 |         var el = document.getElementById("testImg");
 55 |         Transform(el);
 56 |         var initScale = 1;
 57 |         new AlloyFinger(el, {
 58 |             multipointStart: function () {
 59 |                 To.stopAll();
 60 |                 initScale = el.scaleX;
 61 |             },
 62 |             rotate: function (evt) {
 63 |                 el.rotateZ += evt.angle;
 64 |             },
 65 |             pinch: function (evt) {
 66 |                 el.scaleX = el.scaleY = initScale * evt.zoom;
 67 |             },
 68 |             multipointEnd: function () {
 69 |                 To.stopAll();
 70 |                 if (el.scaleX < 1) {
 71 | 
 72 |                     new To(el, "scaleX", 1, 500, ease);
 73 |                     new To(el, "scaleY", 1, 500, ease);
 74 |                 }
 75 |                 if (el.scaleX > 2) {
 76 | 
 77 |                     new To(el, "scaleX", 2, 500, ease);
 78 |                     new To(el, "scaleY", 2, 500, ease);
 79 |                 }
 80 |                 var rotation = el.rotateZ % 360;
 81 | 
 82 |                 if (rotation < 0)rotation = 360 + rotation;
 83 |                 el.rotateZ=rotation;
 84 | 
 85 |                 if (rotation > 0 && rotation < 45) {
 86 |                     new To(el, "rotateZ", 0, 500, ease);
 87 |                 } else if (rotation >= 315) {
 88 |                     new To(el, "rotateZ", 360, 500, ease);
 89 |                 } else if (rotation >= 45 && rotation < 135) {
 90 |                     new To(el, "rotateZ", 90, 500, ease);
 91 |                 } else if (rotation >= 135 && rotation < 225) {
 92 |                     new To(el, "rotateZ", 180, 500, ease);
 93 |                 } else if (rotation >= 225 && rotation < 315) {
 94 |                     new To(el, "rotateZ", 270, 500, ease);
 95 |                 }
 96 |             },
 97 |             pressMove: function (evt) {
 98 |                 el.translateX += evt.deltaX;
 99 |                 el.translateY += evt.deltaY;
100 |                 evt.preventDefault();
101 |             },
102 |             tap: function (evt) {
103 |                 //console.log(el.scaleX + "_" + el.scaleY + "_" + el.rotateZ + "_" + el.translateX + "_" + el.translateY);
104 |                 //console.log("tap");
105 |             },
106 |             doubleTap: function (evt) {
107 |                 To.stopAll();
108 |                 if (el.scaleX > 1.5) {
109 | 
110 |                     new To(el, "scaleX", 1, 500, ease);
111 |                     new To(el, "scaleY", 1, 500, ease);
112 |                     new To(el, "translateX", 0, 500, ease);
113 |                     new To(el, "translateY", 0, 500, ease);
114 |                 } else {
115 |                     var box = el.getBoundingClientRect();
116 |                     var y = box.height - (( evt.changedTouches[0].pageY - topPx) * 2) - (box.height / 2 - ( evt.changedTouches[0].pageY - topPx));
117 | 
118 |                     var x = box.width - (( evt.changedTouches[0].pageX) * 2) - (box.width / 2 - ( evt.changedTouches[0].pageX));
119 |                     new To(el, "scaleX", 2, 500, ease);
120 |                     new To(el, "scaleY", 2, 500, ease);
121 |                     new To(el, "translateX", x, 500, ease);
122 |                     new To(el, "translateY", y, 500, ease);
123 |                 }
124 |                 //console.log("doubleTap");
125 |             },
126 |             longTap: function (evt) {
127 |                 //console.log("longTap");
128 |             },
129 |             swipe: function (evt) {
130 |                 //console.log("swipe" + evt.direction);
131 |             }
132 | 
133 |         });
134 | 
135 |     </script>
136 | </body>
137 | </html>
138 | 


--------------------------------------------------------------------------------
/example/simple/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title></title>
 5 |     <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
 6 |     <style>
 7 |         .ribbon {
 8 |             top: 3.2em;
 9 |             right: -4.7em;
10 |             -webkit-transform: rotate(45deg);
11 |             -moz-transform: rotate(45deg);
12 |             -ms-transform: rotate(45deg);
13 |             -o-transform: rotate(45deg);
14 |             transform: rotate(45deg);
15 |             color:#fff;
16 |             display: block;
17 |             padding: .6em 3.5em;
18 |             position: fixed;
19 |             text-align: center;
20 |             text-decoration: none;
21 |             -webkit-user-select: none;
22 |             -moz-user-select: none;
23 |             -ms-user-select: none;
24 |             user-select: none;
25 |             background-color: green;
26 |             z-index: 10000;
27 |         }
28 |     </style>
29 | </head>
30 | <body>
31 |     <a href="https://github.com/AlloyTeam/AlloyFinger" class="ribbon">Fork me on Github</a>
32 |     <script src="../../asset/transform.js"></script>
33 |     <script src="../../alloy_finger.js"></script>
34 |     <img src="../../asset/test.png" id="testImg" alt="" />
35 |     <script>
36 | 
37 |         var el = document.getElementById("testImg");
38 |         Transform(el);
39 |         var initScale = 1;
40 |         var gesture = new AlloyFinger(el, {
41 |             rotate: function (evt) {
42 |                 el.rotateZ += evt.angle;
43 |             },
44 |             pinchStart: function () {
45 |                 initScale = el.scaleX;
46 |             },
47 |             pinch: function (evt) {
48 |                 el.scaleX = el.scaleY = initScale * evt.zoom;
49 |             },
50 |             pressMove: function (evt) {
51 |                 el.translateX += evt.deltaX;
52 |                 el.translateY += evt.deltaY;
53 |             },
54 |             tap: function (evt) {
55 |                 //console.log(el.scaleX + "_" + el.scaleY + "_" + el.rotateZ + "_" + el.translateX + "_" + el.translateY);
56 |                 //console.log("tap");
57 |             },
58 |             doubleTap: function (evt) {
59 |                 //console.log("doubleTap");
60 |             },
61 |             longTap: function (evt) {
62 |                 //console.log("longTap");
63 |             },
64 |             swipe: function (evt) {
65 |                 //console.log("swipe" + evt.direction);
66 |             }
67 |             
68 |         });
69 | 
70 |     </script>
71 | </body>
72 | </html>
73 | 


--------------------------------------------------------------------------------
/example/tap_state/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Tap State</title>
 5 |     <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
 6 |     <style>
 7 |         #test {
 8 |             -webkit-tap-highlight-color: rgba(0,0,0,0);
 9 |             background-color: green;
10 |         }
11 | 
12 |             #test.active {
13 |                 background-color: red;
14 |             }
15 | 
16 |         .ribbon {
17 |             top: 3.2em;
18 |             right: -4.7em;
19 |             -webkit-transform: rotate(45deg);
20 |             -moz-transform: rotate(45deg);
21 |             -ms-transform: rotate(45deg);
22 |             -o-transform: rotate(45deg);
23 |             transform: rotate(45deg);
24 |             color:#fff;
25 |             display: block;
26 |             padding: .6em 3.5em;
27 |             position: fixed;
28 |             text-align: center;
29 |             text-decoration: none;
30 |             -webkit-user-select: none;
31 |             -moz-user-select: none;
32 |             -ms-user-select: none;
33 |             user-select: none;
34 |             background-color: #6c7211;
35 |             z-index: 10000;
36 |         }
37 | 
38 |     </style>
39 | </head>
40 | <body style="text-align: center; font-family: Segoe UI Light,Segoe UI,Microsoft Jhenghei,Mirco Yahei,'sans-serif'; background-color: black; color: white;">
41 |         <a href="https://github.com/AlloyTeam/AlloyFinger" class="ribbon">Fork me on Github</a>
42 |     <div id="test" style="width: 280px; height: 200px; margin: 0 auto; line-height: 200px; font-size: 30px;">Tap Me</div>
43 |     <div id="result" style="font-size: 18px;"></div>
44 |     <script src="../../alloy_finger.js"></script>
45 |     <div>
46 |         <script>
47 | 
48 |             var result = document.querySelector("#result"),
49 |                 testDiv = document.querySelector("#test"),
50 |                 html = "";
51 | 
52 |             new AlloyFinger(testDiv, {
53 |                 touchStart: function () {
54 |                     html += "";
55 |                     result.innerHTML = html;
56 |                     addClass(testDiv, "active");
57 |                 },
58 |                 touchMove: function () {
59 |                     removeClass(testDiv, "active");
60 |                 },
61 |                 touchEnd: function () {
62 |                     removeClass(testDiv, "active");
63 |                 },
64 |                 touchCancel: function () {
65 |                     removeClass(testDiv, "active");
66 |                 },
67 |                 tap: function () {
68 |                     html += "tap<br/>";
69 |                     result.innerHTML = html;
70 |                 }
71 |             })
72 | 
73 | 
74 |             function hasClass(ele, cls) {
75 |                 return !!ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
76 |             }
77 | 
78 |             function addClass(ele, cls) {
79 |                 if (!hasClass(ele, cls)) ele.className += " " + cls;
80 |             }
81 | 
82 |             function removeClass(ele, cls) {
83 |                 if (hasClass(ele, cls)) {
84 |                     var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
85 |                     ele.className = ele.className.replace(reg, ' ');
86 |                 }
87 |             }
88 |         </script>
89 |     </div>
90 | </body>
91 | </html>
92 | 


--------------------------------------------------------------------------------
/example/test/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Event Test</title>
 5 |     <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
 6 |     <style>
 7 |         #test {
 8 |             -webkit-tap-highlight-color: rgba(0,0,0,0);
 9 |             background-color: green;
10 |         }
11 | 
12 |          
13 |     </style>
14 | </head>
15 | <body style="text-align: center; font-family: Segoe UI Light,Segoe UI,Microsoft Jhenghei,Mirco Yahei,'sans-serif'; background-color: black; color: white;height: 1000px;">
16 |     <div id="test" style="width: 280px; height: 200px; margin: 0 auto; line-height: 200px; font-size: 30px;">Touch Me</div>
17 |     <div id="result" style="font-size: 18px;"></div>
18 |     <script src="../../alloy_finger.js"></script>
19 |     <div>
20 |         <script>
21 | 
22 |             var result = document.querySelector("#result"),
23 |                 testDiv = document.querySelector("#test"),
24 |                 html = "";
25 | 
26 |             new AlloyFinger(testDiv, {
27 |                 touchStart: function () {
28 |                     html = "";
29 |                     html += "start<br/>";
30 |                     result.innerHTML = html;
31 |                  
32 |                 },
33 |                 touchEnd: function () {
34 |                     html += "end<br/>";
35 |                     result.innerHTML = html;
36 |                  
37 |                 },
38 |                 tap: function () {
39 |                     html += "tap<br/>";
40 |                     result.innerHTML = html;
41 |                 },
42 |                 rotate: function (evt) {
43 |                     html += "rotate [" + evt.angle + "]<br/>";
44 |                     result.innerHTML = html;
45 |                 },
46 |                 pinch: function (evt) {
47 |                     html += "pinch [" + evt.scale + "]<br/>";
48 |                     result.innerHTML = html;
49 |                 },
50 |                 pressMove: function (evt) {
51 |                     html += "pressMove [" + evt.deltaX.toFixed(4) + "|" + evt.deltaY.toFixed(4) + "]<br/>";
52 |                     result.innerHTML = html;
53 |                 },
54 |                 swipe: function (evt) {
55 |                     html += "swipe [" + evt.direction+"]<br/>";
56 |                     result.innerHTML = html;
57 |                 },
58 |                 twoFingerPressMove: function (evt) {
59 |                     html += "twoFingerPressMove [" + evt.deltaX.toFixed(4) + "|" + evt.deltaY.toFixed(4) + "]<br/>";
60 |                     result.innerHTML = html;
61 |                     evt.preventDefault();
62 |                 }
63 |             })
64 | 
65 | 
66 |         </script>
67 |     </div>
68 | </body>
69 | </html>
70 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head lang="en">
  4 |     <meta charset="UTF-8">
  5 |     <title>AlloyFinger</title>
  6 |     <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
  7 |     <style>
  8 |         html,body{
  9 |             margin: 0;
 10 |             padding: 0;
 11 |             border: 0;
 12 |             background-color: #ccc;
 13 |             text-align: center;
 14 |            font: 14px / 1.5 "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei","Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei",sans-serif;
 15 |         }
 16 |         .header{
 17 |             background-color: #333;
 18 |             height: 40px;
 19 |             color:white;
 20 |             text-align: left;
 21 |             text-indent: 20px;
 22 |             font-weight: bold;
 23 |             font-size: 20px;
 24 |             line-height: 40px;
 25 |         }
 26 |         .title{
 27 |             height: 30px;
 28 |             color:#333333;
 29 |             font-size: 20px;
 30 |             line-height: 30px;
 31 |         }
 32 |         .example img{
 33 |             width:160px ;
 34 |         }
 35 |         .imgBox{
 36 |             margin-bottom: 10px;
 37 |             border-bottom: 1px solid #333333;
 38 |         }
 39 |         .swipeBox{
 40 |             height:160px;
 41 |             width: 160px;
 42 |             margin: 0 auto;
 43 |             overflow: hidden;
 44 |             font-size: 0;
 45 |             position: relative;
 46 |             border: 2px solid #ccc;
 47 |             box-sizing: border-box;
 48 |         }
 49 |         .scroll{
 50 |             width: 480px;
 51 |             height: 160px;
 52 |             white-space: nowrap;
 53 |         }
 54 | 
 55 |         .nuclear-nav {
 56 |             position: absolute;
 57 |             bottom: 6px;
 58 |             right: 10px;
 59 |         }
 60 | 
 61 |         .nuclear-nav a {
 62 |             display: inline-block;
 63 |             background-color: white;
 64 |             cursor: pointer;
 65 |             width: 10px;
 66 |             height: 10px;
 67 |             -moz-border-radius: 5px;
 68 |             -webkit-border-radius: 5px;
 69 |             border-radius: 5px;
 70 |             margin-right: 5px;
 71 |             border: 1px solid #808080;
 72 |         }
 73 |         
 74 |         .nuclear-nav a.active {
 75 |             background-color: #ffd800;
 76 |         }
 77 | 
 78 |         .longTapBox{
 79 |             position: relative;
 80 |             margin: 0 auto;
 81 |             width: 160px;
 82 |             height: 160px;
 83 |             overflow: hidden;
 84 |             -webkit-user-select: none;
 85 |             -webkit-user-drag: none;
 86 |             -webkit-touch-callout: none;
 87 |             user-select: none;
 88 |             user-drag: none;
 89 |             touch-callout: none;
 90 |             -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 91 |         }
 92 | 
 93 |         .longTapBox img{
 94 |             pointer-events: none;
 95 | 
 96 |         }
 97 | 
 98 |         .overlay2,.overlay{
 99 |             background-color: rgba(70, 70, 70, 0.8);
100 |             position: absolute;
101 |             top:0;
102 |             left: 0;
103 |             width: 160px;
104 |             height: 160px;
105 | 
106 |             display: none;
107 |         }
108 |         .overlay2 img, .overlay img{
109 |             width: 40px;
110 |             height: 40px;
111 |             position: absolute;
112 |             top: 60px;
113 |             left: 60px;
114 |         }
115 |         .pb6{
116 |             padding-bottom: 6px;
117 |         }
118 | 
119 |         .ribbon {
120 |             top: 3.2em;
121 |             right: -3.7em;
122 |             -webkit-transform: rotate(45deg);
123 |             -moz-transform: rotate(45deg);
124 |             -ms-transform: rotate(45deg);
125 |             -o-transform: rotate(45deg);
126 |             transform: rotate(45deg);
127 |             color:#fff;
128 |             display: block;
129 |             padding: .6em 3.5em;
130 |             position: fixed;
131 |             text-align: center;
132 |             text-decoration: none;
133 |             -webkit-user-select: none;
134 |             -moz-user-select: none;
135 |             -ms-user-select: none;
136 |             user-select: none;
137 |             background-color: green;
138 |             z-index: 10000;
139 |         }
140 | 
141 |         .btn {
142 |             letter-spacing: 3px;
143 |             display: inline-block;
144 | 
145 |             color: white;
146 |             width: 270px;
147 |             height: 45px;
148 |             font-size: 24px;
149 |             line-height: 45px;
150 |             background-color: green;
151 |             -moz-border-radius: 2px;
152 |             -webkit-border-radius: 2px;
153 |             border-radius: 2px;
154 |             text-decoration: none;
155 | 
156 |         }
157 | 
158 |         .footer{
159 |             height: 120px;
160 |         }
161 |         .linkCanvasBox{
162 |             margin-top: 10px;
163 |         }
164 |        .linkCanvasBox .btn{
165 |             font-size: 16px;
166 | 
167 |         }
168 |     </style>
169 | </head>
170 | <body>
171 | <a href="https://github.com/AlloyTeam/AlloyFinger" class="ribbon">Fork me on Github</a>
172 |     <div class="header">AlloyFinger</div>
173 |     <div class="example">
174 |     <div class="title">pinch</div>
175 |     <div class="imgBox">
176 |         <img id="pinchImg" src="asset/test.png" />
177 |     </div>
178 |     <div class="title">rotate</div>
179 |     <div class="imgBox">
180 |         <img id="rotateImg" src="asset/test.png" />
181 |     </div>
182 |     <div class="title">pinch+rotate</div>
183 |     <div class="imgBox">
184 |         <img id="pinchRotateImg" src="asset/test.png" />
185 |     </div>
186 |     <div class="title">pressMove</div>
187 |     <div class="imgBox">
188 |         <img id="pressMoveImg" src="asset/test.png" />
189 |     </div>
190 |     <div class="title">doubleTap</div>
191 |     <div class="imgBox">
192 |         <img id="doubleTapImg" src="asset/test.png" />
193 |     </div>
194 |     <div class="title">swipe</div>
195 |         <div class="imgBox pb6">
196 |     <div class="swipeBox">
197 |         <div class="scroll"  id="swipeScroll">
198 |             <img  src="asset/test.png" /> <img  src="asset/test2.png" /> <img  src="asset/test3.png" />
199 |         </div>
200 |         <div class="nuclear-nav">
201 |             <a data-index="0" class="active"></a>
202 |             <a data-index="1" class=" "></a>
203 |             <a data-index="2" class=" "></a>
204 |         </div>
205 |     </div>
206 |         </div>
207 |     <div class="title">longTap</div>
208 |         <div class="imgBox pb6">
209 |     <div class=" longTapBox" id="longTapBox">
210 |         <img id="longTapImg" src="asset/test.png" />
211 |         <div class="overlay" id="overlay">
212 |             <img src="asset/yes.png"/>
213 |         </div>
214 |     </div>
215 |         </div>
216 | 
217 |         <div class="title">tap</div>
218 |         <div class="imgBox pb6">
219 |             <div class=" longTapBox" id="tapBox">
220 |                 <img  src="asset/test.png" />
221 |                 <div class="overlay2" id="overlay2">
222 |                     <img src="asset/yes.png"/>
223 |                 </div>
224 |             </div>
225 |         </div>
226 |     </div>
227 |     <div class="footer">
228 |        <div> <a class="btn" href="http://alloyteam.github.io/AlloyFinger/example/picture/">综合例子→</a></div>
229 |     </div>
230 |     <script src="asset/transform.js"></script>
231 |     <script src="alloy_finger.js"></script>
232 |     <script src="asset/to.js"></script>
233 |     <script>
234 |         var pinchImg = document.getElementById("pinchImg");
235 |         Transform(pinchImg);
236 |         var initScale = 1;
237 |         new AlloyFinger(pinchImg, {
238 |             multipointStart: function () {
239 |                 initScale = pinchImg.scaleX;
240 |             },
241 |             pinch: function (evt) {
242 |                 pinchImg.scaleX = pinchImg.scaleY = initScale * evt.zoom;
243 |             }
244 |         });
245 | 
246 |         var rotateImg = document.getElementById("rotateImg");
247 |         Transform(rotateImg);
248 |         new AlloyFinger(rotateImg, {
249 |             rotate:function(evt){
250 |                 rotateImg.rotateZ += evt.angle;
251 |             }
252 |         });
253 | 
254 |         var pinchRotateImg = document.getElementById("pinchRotateImg");
255 |         Transform(pinchRotateImg);
256 |         new AlloyFinger(pinchRotateImg, {
257 |             rotate:function(evt){
258 |                 pinchRotateImg.rotateZ += evt.angle;
259 |             },
260 |             multipointStart: function () {
261 |                 initScale = pinchRotateImg.scaleX;
262 |             },
263 |             pinch: function (evt) {
264 |                 pinchRotateImg.scaleX = pinchRotateImg.scaleY = initScale * evt.zoom;
265 |             }
266 |         });
267 | 
268 |         var pressMoveImg = document.getElementById("pressMoveImg");
269 |         Transform(pressMoveImg);
270 |         new AlloyFinger(pressMoveImg, {
271 |             pressMove:function(evt){
272 |                 pressMoveImg.translateX += evt.deltaX;
273 |                 pressMoveImg.translateY += evt.deltaY;
274 |                 evt.preventDefault();
275 |             }
276 |         });
277 | 
278 |         function ease(x) {
279 |             return Math.sqrt(1 - Math.pow(x - 1, 2));
280 |         }
281 |         var doubleTapImg = document.getElementById("doubleTapImg");
282 |         Transform(doubleTapImg);
283 |         new AlloyFinger(doubleTapImg, {
284 |             doubleTap:function(){
285 |                 if(doubleTapImg.scaleX===1){
286 |                     new To(doubleTapImg, "scaleX", 2, 500, ease);
287 |                     new To(doubleTapImg, "scaleY", 2, 500, ease);
288 |                 }else if(doubleTapImg.scaleX===2){
289 |                     new To(doubleTapImg, "scaleX", 1, 500, ease);
290 |                     new To(doubleTapImg, "scaleY", 1, 500, ease);
291 |                 }
292 | 
293 |             }
294 |         });
295 | 
296 |         var swipeScroll = document.getElementById("swipeScroll"),
297 |             currentIndex=0;
298 |         Transform(swipeScroll);
299 |         function activeNav(index){
300 |             var items = document.querySelectorAll(".nuclear-nav a"),
301 |                     i = 0,
302 |                     len = items.length;
303 |             for (; i < len; i++) {
304 |                 if (i === index) {
305 |                     items[i].classList.add("active");
306 |                 } else {
307 |                     items[i].classList.remove("active");
308 |                 }
309 |             }
310 |         }
311 |         new AlloyFinger(swipeScroll, {
312 |             touchMove:function(evt) {
313 |                 if (Math.abs(evt.deltaX) >= Math.abs(evt.deltaY)) {
314 |                     evt.preventDefault();
315 |                 }
316 |             },
317 |             swipe:function(evt){
318 |                 if(evt.direction==="Left"){
319 |                     if(currentIndex<2) {
320 |                         currentIndex++;
321 |                         new To(swipeScroll, "translateX", -160 * currentIndex, 500, ease, function () {
322 |                             activeNav(currentIndex);
323 |                         });
324 |                     }
325 |                 }else if(evt.direction==="Right"){
326 |                     if(currentIndex>0) {
327 |                         currentIndex--;
328 |                         new To(swipeScroll, "translateX", -160 * currentIndex, 500, ease, function () {
329 |                             activeNav(currentIndex);
330 |                         });
331 |                     }
332 |                 }
333 |             }
334 |         });
335 | 
336 |         var longTapBox = document.getElementById("longTapBox");
337 |         Transform(longTapBox);
338 |         var overlay=document.getElementById("overlay");
339 |         new AlloyFinger(longTapBox, {
340 |             longTap:function(evt){
341 |                 evt.preventDefault();
342 |                 toggleDom(overlay);
343 |             }
344 |         });
345 | 
346 |         var tapBox = document.getElementById("tapBox");
347 |         Transform(tapBox);
348 |         var overlay2=document.getElementById("overlay2");
349 |         new AlloyFinger(tapBox, {
350 |             tap:function(){
351 |                 toggleDom(overlay2);
352 |             },
353 |             singleTap:function(){
354 |                 console.log("singleTap")
355 |             },
356 |             doubleTap:function(){
357 |                 console.log("doubleTap")
358 |             },
359 |             pointStart:function(){
360 |                 console.log("pointStart")
361 |             }
362 |         });
363 | 
364 |         function toggleDom(dom){
365 |             var displayValue=window.getComputedStyle(dom,null)["display"];
366 |             if(displayValue==="none"){
367 |                 dom.style.display="block";
368 |             }else{
369 |                 dom.style.display="none";
370 |             }
371 |         }
372 | 
373 |     </script>
374 | </body>
375 | </html>
376 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "alloyfinger",
 3 |   "version": "0.1.15",
 4 |   "description": "super tiny size multi-touch gestures library for the web. ",
 5 |   "main": "alloy_finger.js",
 6 |   "directories": {
 7 |     "example": "example"
 8 |   },
 9 |   "scripts": {
10 |     "prepare": "npm run build",
11 |     "build": "if [ -d dist ]; then rm -r dist; fi; npm run build:react",
12 |     "build:react": "babel react --out-dir dist/react --source-map",
13 |     "test": "echo \"Error: no test specified\" && exit 1"
14 |   },
15 |   "devDependencies": {
16 |     "babel-cli": "^6.24.0",
17 |     "babel-core": "^6.24.0",
18 |     "babel-plugin-add-module-exports": "^0.2.1",
19 |     "babel-plugin-transform-class-properties": "^6.23.0",
20 |     "babel-plugin-transform-decorators": "^6.24.1",
21 |     "babel-plugin-transform-function-bind": "^6.22.0",
22 |     "babel-plugin-transform-object-rest-spread": "^6.23.0",
23 |     "babel-polyfill": "^6.23.0",
24 |     "babel-preset-env": "^1.3.2",
25 |     "babel-preset-react": "^6.24.1",
26 |     "babel-runtime": "^6.23.0",
27 |     "fast-async": "^6.2.2",
28 |     "husky": "^0.13.3"
29 |   },
30 |   "repository": {
31 |     "type": "git",
32 |     "url": "git+https://github.com/AlloyTeam/AlloyFinger.git"
33 |   },
34 |   "keywords": [
35 |     "gesture",
36 |     "touch",
37 |     "multitouch"
38 |   ],
39 |   "author": "dntzhang",
40 |   "license": "MIT",
41 |   "bugs": {
42 |     "url": "https://github.com/AlloyTeam/AlloyFinger/issues"
43 |   },
44 |   "homepage": "https://github.com/AlloyTeam/AlloyFinger#readme"
45 | }
46 | 


--------------------------------------------------------------------------------
/react/AlloyFinger.jsx:
--------------------------------------------------------------------------------
  1 | /* AlloyFinger v0.1.0
  2 |   * By dntzhang
  3 |   * Reedited by nemoliao
  4 |   * Github: https://github.com/AlloyTeam/AlloyFinger
  5 |   */
  6 | 
  7 | import React, { Component } from 'react';
  8 | 
  9 | export default class AlloyFinger extends Component {
 10 |     constructor(props) {
 11 |         super(props);
 12 | 
 13 |         this.preV = { x: null, y: null };
 14 |         this.pinchStartLen = null;
 15 |         this.scale = 1;
 16 |         this.isSingleTap = false;
 17 |         this.isDoubleTap = false;
 18 |         this.delta = null;
 19 |         this.last = null;
 20 |         this.now = null;
 21 |         this.end = null;
 22 |         this.multiTouch = false;
 23 |         this.tapTimeout = null;
 24 |         this.longTapTimeout = null;
 25 |         this.singleTapTimeout = null;
 26 |         this.swipeTimeout=null;
 27 |         this.x1 = this.x2 = this.y1 = this.y2 = null;
 28 |         this.preTapPosition={x: null, y: null};
 29 | 
 30 |         // Disable taps after longTap
 31 |         this.afterLongTap = false;
 32 |         this.afterLongTapTimeout = null;
 33 |     }
 34 | 
 35 |     getLen(v) {
 36 |         return Math.sqrt(v.x * v.x + v.y * v.y);
 37 |     }
 38 | 
 39 |     dot(v1, v2) {
 40 |         return v1.x * v2.x + v1.y * v2.y;
 41 |     }
 42 | 
 43 |     getAngle(v1, v2) {
 44 |         var mr = this.getLen(v1) * this.getLen(v2);
 45 |         if (mr === 0) return 0;
 46 |         var r = this.dot(v1, v2) / mr;
 47 |         if (r > 1) r = 1;
 48 |         return Math.acos(r);
 49 |     }
 50 | 
 51 |     cross(v1, v2) {
 52 |         return v1.x * v2.y - v2.x * v1.y;
 53 |     }
 54 | 
 55 |     getRotateAngle(v1, v2) {
 56 |         var angle = this.getAngle(v1, v2);
 57 |         if (this.cross(v1, v2) > 0) {
 58 |             angle *= -1;
 59 |         }
 60 | 
 61 |         return angle * 180 / Math.PI;
 62 |     }
 63 | 
 64 |     _resetState() {
 65 |         this.setState({
 66 |             x: null,
 67 |             y: null,
 68 |             swiping: false,
 69 |             start: 0
 70 |         });
 71 |     }
 72 | 
 73 | 
 74 |     _emitEvent(name, ...arg) {
 75 |         if (this.props[name]) {
 76 |             this.props[name](...arg);
 77 |         }
 78 |     }
 79 | 
 80 |     _handleTouchStart (evt) {
 81 |         this._emitEvent('onTouchStart', evt);
 82 |         if (!evt.touches) return;
 83 |         this.now = Date.now();
 84 |         this.x1 = evt.touches[0].pageX;
 85 |         this.y1 = evt.touches[0].pageY;
 86 |         this.delta = this.now - (this.last || this.now);
 87 |         if (this.preTapPosition.x!==null) {
 88 |             this.isDoubleTap = (this.delta > 0 && this.delta <= 250&&Math.abs(this.preTapPosition.x-this.x1)<30&&Math.abs(this.preTapPosition.y-this.y1)<30);
 89 |         }
 90 |         this.preTapPosition.x=this.x1;
 91 |         this.preTapPosition.y=this.y1;
 92 |         this.last = this.now;
 93 |         var preV = this.preV,
 94 |             len = evt.touches.length;
 95 | 
 96 |         if (len > 1) {
 97 |             this._cancelLongTap();
 98 |             this._cancelSingleTap();
 99 |             var v = { x: evt.touches[1].pageX - this.x1, y: evt.touches[1].pageY - this.y1 };
100 |             preV.x = v.x;
101 |             preV.y = v.y;
102 |             this.pinchStartLen = this.getLen(preV);
103 |             this._emitEvent('onMultipointStart', evt);
104 |         } else {
105 |             this.isSingleTap = true;
106 |         }
107 |         this.longTapTimeout = setTimeout(() => {
108 |             this._emitEvent('onLongTap', evt);
109 |             this.afterLongTap = true;
110 |             this.afterLongTapTimeout = setTimeout(() => {
111 |                 this.afterLongTap = false;
112 |             }, 1000);
113 |         }, 750);
114 |     }
115 | 
116 |     _handleTouchMove(evt) {
117 |         this._emitEvent('onTouchMove', evt);
118 |         var preV = this.preV,
119 |             len = evt.touches.length,
120 |             currentX = evt.touches[0].pageX,
121 |             currentY = evt.touches[0].pageY;
122 |         this.isSingleTap = false;
123 |         this.isDoubleTap = false;
124 |         if (len > 1) {
125 |             var v = { x: evt.touches[1].pageX - currentX, y: evt.touches[1].pageY - currentY };
126 |             if (preV.x !== null) {
127 |                 if (this.pinchStartLen > 0) {
128 |                     evt.center = {
129 |                         x: (evt.touches[1].pageX + currentX) / 2,
130 |                         y: (evt.touches[1].pageY + currentY) / 2
131 |                     };
132 |                     evt.scale = evt.zoom = this.getLen(v) / this.pinchStartLen;
133 |                     this._emitEvent('onPinch', evt);
134 |                 }
135 |                 evt.angle = this.getRotateAngle(v, preV);
136 |                 this._emitEvent('onRotate', evt);
137 |             }
138 |             preV.x = v.x;
139 |             preV.y = v.y;
140 |             this.multiTouch = true;
141 |         } else {
142 |             if (this.x2 !== null) {
143 |                 evt.deltaX = currentX - this.x2;
144 |                 evt.deltaY = currentY - this.y2;
145 |             } else {
146 |                 evt.deltaX = 0;
147 |                 evt.deltaY = 0;
148 |             }
149 |             this._emitEvent('onPressMove', evt);
150 |         }
151 |         this._cancelLongTap();
152 |         this.x2 = currentX;
153 |         this.y2 = currentY;
154 | 
155 |         if (len > 1) {
156 |             evt.preventDefault();
157 |         }
158 |     }
159 | 
160 |     _handleTouchCancel(evt) {
161 |         this._emitEvent('onTouchCancel', evt);
162 |         clearInterval(this.singleTapTimeout);
163 |         clearInterval(this.tapTimeout);
164 |         clearInterval(this.longTapTimeout);
165 |         clearInterval(this.swipeTimeout);
166 |     }
167 | 
168 |     _handleTouchEnd(evt) {
169 |         this._emitEvent('onTouchEnd', evt);
170 |         this.end = Date.now();
171 |         this._cancelLongTap();
172 | 
173 |         if (this.multiTouch === true && evt.touches.length < 2) {
174 |             this._emitEvent('onMultipointEnd', evt);
175 |         }
176 | 
177 |         evt.origin = [this.x1, this.y1];
178 |         if (this.multiTouch === false) {
179 |             if ((this.x2 && Math.abs(this.x1 - this.x2) > 30) ||
180 |                 (this.y2 && Math.abs(this.y1 - this.y2) > 30)) {
181 |                 evt.direction = this._swipeDirection(this.x1, this.x2, this.y1, this.y2);
182 |                 evt.distance = Math.abs(this.x1 - this.x2);
183 |                 this.swipeTimeout = setTimeout(() => {
184 |                     this._emitEvent('onSwipe', evt);
185 |                 }, 0);
186 |             } else {
187 |                 if (this.afterLongTap) {
188 |                     clearTimeout(this.afterLongTapTimeout);
189 |                     this.afterLongTap = false;
190 |                 } else {
191 |                     this.tapTimeout = setTimeout(() => {
192 |                         this._emitEvent('onTap', evt);
193 |                         if (this.isDoubleTap) {
194 |                             this._emitEvent('onDoubleTap', evt);
195 |                             clearTimeout(this.singleTapTimeout);
196 |                             this.isDoubleTap = false;
197 |                         } else if (this.isSingleTap) {
198 |                             this.singleTapTimeout = setTimeout(()=>{
199 |                                 this._emitEvent('onSingleTap', evt);
200 |                             }, 250);
201 |                             this.isSingleTap = false;
202 |                         }
203 |                     }, 0);
204 |                 }
205 |             }
206 |         }
207 | 
208 |         this.preV.x = 0;
209 |         this.preV.y = 0;
210 |         this.scale = 1;
211 |         this.pinchStartLen = null;
212 |         this.x1 = this.x2 = this.y1 = this.y2 = null;
213 |         this.multiTouch = false;
214 |     }
215 | 
216 |     _cancelLongTap () {
217 |         clearTimeout(this.longTapTimeout);
218 |     }
219 | 
220 |     _cancelSingleTap () {
221 |         clearTimeout(this.singleTapTimeout);
222 |     }
223 | 
224 |     _swipeDirection (x1, x2, y1, y2) {
225 |         if (Math.abs(x1 - x2) > 80 || this.end-this.now < 250) {
226 |             return Math.abs(x1 - x2) >= Math.abs(y1 - y2) ? (x1 - x2 > 0 ? 'Left' : 'Right') : (y1 - y2 > 0 ? 'Up' : 'Down');
227 |         } else {
228 |             return 'Nochange';
229 |         }
230 | 
231 |     }
232 | 
233 |     render() {
234 |         return React.cloneElement(React.Children.only(this.props.children), {
235 |             onTouchStart: this._handleTouchStart.bind(this),
236 |             onTouchMove: this._handleTouchMove.bind(this),
237 |             onTouchCancel: this._handleTouchCancel.bind(this),
238 |             onTouchEnd: this._handleTouchEnd.bind(this)
239 |         });
240 |     }
241 | }
242 | 


--------------------------------------------------------------------------------
/transformjs/README.md:
--------------------------------------------------------------------------------
1 | 
2 | transformjs have been moved to here https://github.com/AlloyTeam/AlloyTouch/tree/master/transformjs
3 | 
4 | 


--------------------------------------------------------------------------------
/transformjs/transform.js:
--------------------------------------------------------------------------------
  1 | /* transformjs
  2 |  * By dntzhang
  3 |  * Github: https://github.com/AlloyTeam/AlloyTouch/tree/master/transformjs
  4 |  */
  5 | ;(function () {
  6 | 
  7 |     var Matrix3D = function (n11, n12, n13, n14, n21, n22, n23, n24, n31, n32, n33, n34, n41, n42, n43, n44) {
  8 |         this.elements =window.Float32Array ? new Float32Array(16) : [];
  9 |         var te = this.elements;
 10 |         te[0] = (n11 !== undefined) ? n11 : 1; te[4] = n12 || 0; te[8] = n13 || 0; te[12] = n14 || 0;
 11 |         te[1] = n21 || 0; te[5] = (n22 !== undefined) ? n22 : 1; te[9] = n23 || 0; te[13] = n24 || 0;
 12 |         te[2] = n31 || 0; te[6] = n32 || 0; te[10] = (n33 !== undefined) ? n33 : 1; te[14] = n34 || 0;
 13 |         te[3] = n41 || 0; te[7] = n42 || 0; te[11] = n43 || 0; te[15] = (n44 !== undefined) ? n44 : 1;
 14 |     };
 15 | 
 16 |     Matrix3D.DEG_TO_RAD = Math.PI / 180;
 17 | 
 18 |     Matrix3D.prototype = {
 19 |         set: function (n11, n12, n13, n14, n21, n22, n23, n24, n31, n32, n33, n34, n41, n42, n43, n44) {
 20 |             var te = this.elements;
 21 |             te[0] = n11; te[4] = n12; te[8] = n13; te[12] = n14;
 22 |             te[1] = n21; te[5] = n22; te[9] = n23; te[13] = n24;
 23 |             te[2] = n31; te[6] = n32; te[10] = n33; te[14] = n34;
 24 |             te[3] = n41; te[7] = n42; te[11] = n43; te[15] = n44;
 25 |             return this;
 26 |         },
 27 |         identity: function () {
 28 |             this.set(
 29 |                 1, 0, 0, 0,
 30 |                 0, 1, 0, 0,
 31 |                 0, 0, 1, 0,
 32 |                 0, 0, 0, 1
 33 |             );
 34 |             return this;
 35 |         },
 36 |         multiplyMatrices: function (a, be) {
 37 | 
 38 |             var ae = a.elements;
 39 |             var te = this.elements;
 40 |             var a11 = ae[0], a12 = ae[4], a13 = ae[8], a14 = ae[12];
 41 |             var a21 = ae[1], a22 = ae[5], a23 = ae[9], a24 = ae[13];
 42 |             var a31 = ae[2], a32 = ae[6], a33 = ae[10], a34 = ae[14];
 43 |             var a41 = ae[3], a42 = ae[7], a43 = ae[11], a44 = ae[15];
 44 | 
 45 |             var b11 = be[0], b12 = be[1], b13 = be[2], b14 = be[3];
 46 |             var b21 = be[4], b22 = be[5], b23 = be[6], b24 = be[7];
 47 |             var b31 = be[8], b32 = be[9], b33 = be[10], b34 = be[11];
 48 |             var b41 = be[12], b42 = be[13], b43 = be[14], b44 = be[15];
 49 | 
 50 |             te[0] = a11 * b11 + a12 * b21 + a13 * b31 + a14 * b41;
 51 |             te[4] = a11 * b12 + a12 * b22 + a13 * b32 + a14 * b42;
 52 |             te[8] = a11 * b13 + a12 * b23 + a13 * b33 + a14 * b43;
 53 |             te[12] = a11 * b14 + a12 * b24 + a13 * b34 + a14 * b44;
 54 | 
 55 |             te[1] = a21 * b11 + a22 * b21 + a23 * b31 + a24 * b41;
 56 |             te[5] = a21 * b12 + a22 * b22 + a23 * b32 + a24 * b42;
 57 |             te[9] = a21 * b13 + a22 * b23 + a23 * b33 + a24 * b43;
 58 |             te[13] = a21 * b14 + a22 * b24 + a23 * b34 + a24 * b44;
 59 | 
 60 |             te[2] = a31 * b11 + a32 * b21 + a33 * b31 + a34 * b41;
 61 |             te[6] = a31 * b12 + a32 * b22 + a33 * b32 + a34 * b42;
 62 |             te[10] = a31 * b13 + a32 * b23 + a33 * b33 + a34 * b43;
 63 |             te[14] = a31 * b14 + a32 * b24 + a33 * b34 + a34 * b44;
 64 | 
 65 |             te[3] = a41 * b11 + a42 * b21 + a43 * b31 + a44 * b41;
 66 |             te[7] = a41 * b12 + a42 * b22 + a43 * b32 + a44 * b42;
 67 |             te[11] = a41 * b13 + a42 * b23 + a43 * b33 + a44 * b43;
 68 |             te[15] = a41 * b14 + a42 * b24 + a43 * b34 + a44 * b44;
 69 | 
 70 |             return this;
 71 | 
 72 |         },
 73 |         // 解决角度为90的整数倍导致Math.cos得到极小的数，其实是0。导致不渲染
 74 |         _rounded: function(value,i){
 75 |             i= Math.pow(10, i || 15);
 76 |             // default
 77 |             return Math.round(value*i)/i;
 78 |         },
 79 |         appendTransform: function (x, y, z, scaleX, scaleY, scaleZ, rotateX, rotateY, rotateZ,skewX,skewY, originX, originY, originZ) {
 80 | 
 81 |             var rx = rotateX * Matrix3D.DEG_TO_RAD;
 82 |             var cosx =this._rounded( Math.cos(rx));
 83 |             var sinx = this._rounded(Math.sin(rx));
 84 |             var ry = rotateY * Matrix3D.DEG_TO_RAD;
 85 |             var cosy =this._rounded( Math.cos(ry));
 86 |             var siny = this._rounded(Math.sin(ry));
 87 |             var rz = rotateZ * Matrix3D.DEG_TO_RAD;
 88 |             var cosz =this._rounded( Math.cos(rz * -1));
 89 |             var sinz =this._rounded( Math.sin(rz * -1));
 90 | 
 91 |             this.multiplyMatrices(this, [
 92 |                 1, 0, 0, x,
 93 |                 0, cosx, sinx, y,
 94 |                 0, -sinx, cosx, z,
 95 |                 0, 0, 0, 1
 96 |             ]);
 97 | 
 98 |             this.multiplyMatrices(this, [
 99 |                 cosy, 0, siny, 0,
100 |                 0, 1, 0, 0,
101 |                 -siny, 0, cosy, 0,
102 |                 0, 0, 0, 1
103 |             ]);
104 | 
105 |             this.multiplyMatrices(this,[
106 |                 cosz * scaleX, sinz * scaleY, 0, 0,
107 |                 -sinz * scaleX, cosz * scaleY, 0, 0,
108 |                 0, 0, 1 * scaleZ, 0,
109 |                 0, 0, 0, 1
110 |             ]);
111 | 
112 |             if(skewX||skewY){
113 |                 this.multiplyMatrices(this,[
114 |                     this._rounded(Math.cos(skewX* Matrix3D.DEG_TO_RAD)), this._rounded( Math.sin(skewX* Matrix3D.DEG_TO_RAD)), 0, 0,
115 |                     -1*this._rounded(Math.sin(skewY* Matrix3D.DEG_TO_RAD)), this._rounded( Math.cos(skewY* Matrix3D.DEG_TO_RAD)), 0, 0,
116 |                     0, 0, 1, 0,
117 |                     0, 0, 0, 1
118 |                 ]);
119 |             }
120 | 
121 |             if (originX || originY || originZ) {
122 |                 this.elements[12] -= originX * this.elements[0] + originY * this.elements[4] + originZ * this.elements[8];
123 |                 this.elements[13] -= originX * this.elements[1] + originY * this.elements[5] + originZ * this.elements[9];
124 |                 this.elements[14] -= originX * this.elements[2] + originY * this.elements[6] + originZ * this.elements[10];
125 |             }
126 |             return this;
127 |         }
128 |     };
129 | 
130 |     function observe(target, props, callback) {
131 |         for (var i = 0, len = props.length; i < len; i++) {
132 |             var prop = props[i];
133 |             watch(target, prop, callback);
134 |         }
135 |     }
136 | 
137 |     function watch(target, prop, callback) {
138 |         Object.defineProperty(target, prop, {
139 |             get: function () {
140 |                 return this["__" + prop];
141 |             },
142 |             set: function (value) {
143 |                 if (value !== this["__" + prop]) {
144 |                     this["__" + prop] = value;
145 |                     callback();
146 |                 }
147 | 
148 |             }
149 |         });
150 |     }
151 | 
152 |     window.Transform = function (element,notPerspective) {
153 | 
154 |         observe(
155 |             element,
156 |             ["translateX", "translateY", "translateZ", "scaleX", "scaleY", "scaleZ", "rotateX", "rotateY", "rotateZ", "skewX", "skewY", "originX", "originY", "originZ"],
157 |             function () {
158 |                 var mtx = element.matrix3D.identity().appendTransform(element.translateX, element.translateY, element.translateZ, element.scaleX, element.scaleY, element.scaleZ, element.rotateX, element.rotateY, element.rotateZ, element.skewX, element.skewY, element.originX, element.originY, element.originZ);
159 |                 element.style.transform = element.style.msTransform = element.style.OTransform = element.style.MozTransform = element.style.webkitTransform =(notPerspective?"":"perspective(" + (element.perspective===undefined?500:element.perspective) + "px) ")+ "matrix3d(" + Array.prototype.slice.call(mtx.elements).join(",") + ")";
160 |             });
161 | 
162 |         element.matrix3D = new Matrix3D();
163 | 
164 |         if (!notPerspective) {
165 |             observe(
166 |                 element,
167 |                 ["perspective"],
168 |                 function () {
169 |                     element.style.transform = element.style.msTransform = element.style.OTransform = element.style.MozTransform = element.style.webkitTransform = "perspective(" + element.perspective + "px) matrix3d(" + Array.prototype.slice.call(element.matrix3D.elements).join(",") + ")";
170 |                 });
171 |             element.perspective = 500;
172 |         }
173 | 
174 |         element.scaleX = element.scaleY = element.scaleZ = 1;
175 |         //由于image自带了x\y\z，所有加上translate前缀
176 |         element.translateX = element.translateY = element.translateZ = element.rotateX = element.rotateY = element.rotateZ = element.skewX = element.skewY = element.originX = element.originY = element.originZ = 0;
177 |     }
178 | })();
179 | 


--------------------------------------------------------------------------------