Wex5 Practical finger touch screen plug-in hammer integration and pros and cons

Objective

A few days ago, to customers to do a picture click to enlarge, very simple, the customer said can the two fingers zoom Picture it?

Think of hammer, no matter good use, must try.

There is no decent Chinese documents on the Internet and mature cases, and some of the ghosts are not read. Let's do it myself.

One effect Demo:

Double-click or two fingers to enlarge

Mouse or finger drag

Then double-click the picture to restore

Two design ideas:

Use Hammer.js's own API to listen for finger events and redefine the CSS style of the image to achieve

Three hammer.js implementing code and logic

1 image to the ID Data-scale property manually set, in order to JS writing convenient

2 Introduction of JS file and initialization of the instance

JS method is tested, must be written in modelload, otherwise the page load only once JS, back to the page after JS can not be executed

3 Creating a Listener method

First of all, what are the methods of hammer.js?

hammer.ondragstart = function (ev) { };  // 开始拖动 hammer.ondrag =  function (ev) { };  // 拖动中 hammer.ondragend =  function (ev) { };  // 拖动结束 hammer.onswipe =  function (ev) { };  // 滑动 hammer.ontap =  function (ev) { };  // 单击 hammer.ondoubletap = function (ev) { };  //双击 hammer.onhold =  function (ev) { };  // 长按 hammer.ontransformstart = function (ev) { };  // 双指收张开始 hammer.ontransform = function (ev) { };  // 双指收张中 hammer.ontransformend = function (ev) { };  // 双指收张结束 hammer.onrelease = function (ev) { };  // 手指离开屏幕  在Pinch事件和Rotate事件中，我们用了hammertime.add(new Hammer.Pinch());和hammertime.add(new Hammer.Rotate ());而其他四个事件没有用，而是直接添加了事件的监听程序。原因在于，我们在new Hammer(htmlElement)的时候，Hammer.js默认对Pan、Press、Swipe和Tab事件进行了监听。但没有对Pinch和 Rotate事件进行监听。 4 Double-click the picture    5 finger magnification                 more complex, commented  6 Finger Reduction   7 Finger dragging     (note) The Hammer event E, represented by the parameter coordinates, the value method is: E.deltax E.deltayThe E.deltax and E.deltay in the Panmove event represent a distance that is not a coordinate, but a drag in the X Y direction. Four Summary1 Drag no problem, but after zooming in the drag, you need the finger and enlarged picture coordinate system for complex operations, here magnification is within 1.5 times times, no processing. Complex coordinate calculations required for relative positioning2 Web version no problem, after using WEX5 to generate the app, double-click will revert to invalid, finger scaling is normal. May be JS files with Android compatibility issues.          

Wex5 Practical finger touch screen plug-in hammer integration and pros and cons