Preview

You can touch this → http://alloyteam.github.io/AlloyFinger/

Install

You can install it via npm:

``html
npm install alloyfinger
`

Usage

`js
var af = new AlloyFinger(element, {
touchStart: function () { },
touchMove: function () { },
touchEnd: function () { },
touchCancel: function () { },
multipointStart: function () { },
multipointEnd: function () { },
tap: function () { },
doubleTap: function () { },
longTap: function () { },
singleTap: function () { },
rotate: function (evt) {
console.log(evt.angle);
},
pinch: function (evt) {
console.log(evt.zoom);
},
pressMove: function (evt) {
console.log(evt.deltaX);
console.log(evt.deltaY);
},
swipe: function (evt) {
console.log("swipe" + evt.direction);
}
});

/**
* this method can also add or remove the event handler
*/
var onTap = function() {};

af.on('tap', onTap);
af.on('touchStart', function() {});

af.off('tap', onTap);

/**
* this method can destroy the instance
*/
af = af.destroy();
`

$3

`js
import { render, tag, WeElement } from 'omi'
import 'omi-finger'

@tag('my-app')
class MyApp extends WeElement {
install() {
this.data.wording = 'Tap or Swipe Me!'
}

handleTap = (evt) => {
this.data.wording += '\r\nTap'
this.update()
}

handleSwipe = (evt) => {
this.data.wording += '\r\nSwipe-' + evt.direction
this.update()
}

render() {
return (

{this.data.wording}

)
}

css() {
return .touchArea{
background-color: green;
width: 200px;
min-height: 200px;
text-align: center;
color:white;
height:auto;
white-space: pre-line;
}
}
}

render(, 'body')
``

* omi-finger
* css3transform

Others

* AlloyCrop

License

This content is released under the MIT License.