Search code examples
jquerycordovajquery-mobile

jQuery MouseWheel Event To Pinch Event


I am converting my project to cordova application. But i stuck in mousewheel event. What is the equal of this event in cordova?

I have a canvas and some objects on it. I zoom in/zoom out using mouse wheel event. I want to bind it to pinch event. Is there a plugin for it ?

ps. i am using fabricjs

Here is my code part :

canvas = this.__canvas = new fabric.Canvas('c', { width: 1200, height: 3000 });

$(canvas.wrapperEl).on('mousewheel', function(e) {    
            var objects = canvas.getObjects();
            var delta = e.originalEvent.wheelDelta / 120;
            var factor = 1 + delta*(10/100);

               for (let i in objects) {
                var scaleX = objects[i].scaleX;
                var scaleY = objects[i].scaleY;
                var left = objects[i].left;
                var top = objects[i].top;

                var tempScaleX = scaleX * factor;
                var tempScaleY = scaleY * factor;
                var tempLeft = left * factor;
                var tempTop = top * factor;

                objects[i].scaleX = tempScaleX;
                objects[i].scaleY = tempScaleY;
                objects[i].left = tempLeft;
                objects[i].top = tempTop;

                objects[i].setCoords();
            }
            canvas.renderAll();
            canvas.calcOffset();
            return false;

        });

Solution

  • If you are looking for a plugin then hammer.js provides pinch along with other different multi touch events like swipe & tap. http://hammerjs.github.io/recognizer-pinch/

    You can find examples for pinch here: http://hammerjs.github.io/examples/