ericdrowell / KineticJS

KineticJS is an HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications.
http://www.kineticjs.com
3.98k stars 752 forks source link

Pinch according to middle of touch points #990

Open kivannc opened 10 years ago

kivannc commented 10 years ago

I am trying to scale a layer with shapes according to middle point of two touches. When i set offset and x,y coordinates of the layer staticly, I can use pinch smoothly but when set offset and x,y coordinates according to touches it behaves strange. I am not sure there is problem but i trying this over 4 days and i couldn't find any solutions.

Here is my code for scaling.

stage.getContent().addEventListener('touchmove', function (evt) {
    var touch1 = evt.touches[0];
    var touch2 = evt.touches[1];

    if (touch1 && touch2) {

        var offset = getOffset({
            x: touch1.clientX,
            y: touch1.clientY
        }, {
            x: touch2.clientX,
            y: touch2.clientY
        });

        //console.log("x :  " + stage.offsetX + "  y : " + stage.offsetY);
        var dist = getDistance({
            x: touch1.clientX,
            y: touch1.clientY
        }, {
            x: touch2.clientX,
            y: touch2.clientY
        });

       if (!lastDist) {
           lastDist = dist;
       }
        console.log ("dist :" + dist + " lastDist : " +  lastDist +"  scale: " + dist/lastDist );
        var scale =  dist / lastDist;
        console.log("Scale = "+layer.getScaleX());
        origin.x = offset.x / layer.getScaleX() + origin.x - offset.x / scale;
        origin.x = offset.y / layer.getScaleX() + origin.y - offset.y / scale;
        layer.x = offset.x;
        layer.y = offset.y;
        //layer.offset({x: offset.x, y: offset.y });
        layer.setScale({x:layer.getScale().x * scale , y:layer.getScale().y * scale });
        stage.draw();
        lastDist = dist;
        console.log("Scale = "+layer.getScaleX());
        console.log ("dist :" + dist + " lastDist : " +  lastDist +"  scale: " + dist/lastDist );

        layer.draw();
    }
}, false);