AlloyTeam/AlloyFinger

Name: AlloyFinger

Owner: ?? AlloyTeam

Description: super tiny size multi-touch gestures library for the web. ???You can touch this ?

Created: 2016-05-25 23:17:03.0

Updated: 2018-05-24 06:01:47.0

Pushed: 2018-05-04 13:14:35.0

Homepage: http://alloyteam.github.io/AlloyFinger/

Size: 1165

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

Preview

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

Install

You can install it via npm:

install alloyfinger

Usage

AlloyCrop

• https://github.com/AlloyTeam/AlloyCrop

Omi Version:

• omi-finger

Pure JS:

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);
}



his method can also add or remove the event handler

onTap = function() {};

n('tap', onTap);
n('touchStart', function() {});

ff('tap', onTap);


his method can destroy the instance

 af.destroy();

React Version:

rt AlloyFinger from 'alloyfinger/dist/react/AlloyFinger';

..

er() {
return (
    <AlloyFinger
        onTap={this.onTap.bind(this)}
        onMultipointStart={this.onMultipointStart.bind(this)}
        onLongTap={this.onLongTap.bind(this)}
        onSwipe={this.onSwipe.bind(this)}
        onPinch={this.onPinch.bind(this)}
        onRotate={this.onRotate.bind(this)}
        onPressMove={this.onPressMove.bind(this)}
        onMultipointEnd={this.onMultipointEnd.bind(this)}
        onDoubleTap={this.onDoubleTap.bind(this)}>
        <div className="test">the element that you want to bind event</div>
    </AlloyFinger>
);

Thanks and Donate

• transformjs
• Donate to AlloyFinger

License

This content is released under the MIT License.