Moving an image in KineticJS using touch events

Question

I want to make a Map, the user should Scroll it using touch events, zoom in and out using touch gestures. Here am using the touchstart to set the dragging flag to true, then i use touchmove to calculate the delta in the coordinates and move the layer (map layer) accordingly, then finally i use touchend to set the dragging flag to false.

the problem is it's not working, been banging my head for few hours so far can't get it to work.

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8"/>
<title></title>
<link rel="stylesheet" href="core/jquery.mobile-1.4.2.css" />
<script type="text/javascript" src="core/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="core/jquery.mobile-1.4.2.min.js"></script>
<script type="text/javascript" src="javascript/map.js"></script>
<meta name="viewport" content="width=device-width">
</head>
<body>
<div id="main" data-role="page">
    <div data-role="header">
        <h1>Header of #main</h1>
    </div>
    <div id="content" data-role="content">
        <script type="text/javascript" src="core/kinetic-v5.0.1.min.js">      </script>

        <script defer="defer">
            var stage = new Kinetic.Stage({
                container: 'content',
                width: 300,
                height: 200
            });

            var layer = new Kinetic.Layer();

            var imageObj = new Image();
            imageObj.onload = function() {
                var yoda = new Kinetic.Image({
                x: 0,
                y: 0,
                image: imageObj,
                width: 106,
                height: 118
                });
            layer.add(yoda);
            stage.add(layer);
            };
            imageObj.src = 'image/map-04.png'

            var dragging = false,
            lastX = 0,
        lastY = 0;

            imageObj.on('touchstart', function() {
                var touchPos = stage.getPointerPosition();
                dragging = true;
                lastX = touchPos.x;
                lastY= touchPos.y;
            });

            imageObj.on('touchmove', function() {
                var touchPos = stage.getPointerPosition();
                if(dragging){
                var dx = touchPos.x - lastX;
                var dy = touchPos.y - lastY;
                layer.translate(dx,dy);
                lastX = touchPos.x;
                lastY = touchPos.y;
                }
            });

            imageObj.on('touchend', function() {
                dragging = false;
            });
            stage.add(layer);
</script>
    </div>
<div data-role="footer">
    <h4>Footer of #main Page</h4>
</div>
</div>
</body>
</html>

Thanks for your help in advance.

Answer 1

your imgObject is not a kineticjs image, yoda is a kineticjs image, here is a fix with some changes:

http://jsbin.com/miqoxese/1/edit

    <script type="text/javascript" src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.1.js"></script>

    <script defer="defer">
        var stage = new Kinetic.Stage({
            container: 'content',
            width: 300,
            height: 200
        });

        var layer = new Kinetic.Layer();

        var imageObj = new Image();
        imageObj.onload = function() {
            var yoda = new Kinetic.Image({
            x: 0,
            y: 0,
            image: imageObj,
            width: 106,
            height: 118,
              draggable: true
            });
          yoda.on('dragstart', function(){
            console.log("dragging"); // see console for result
          });
        layer.add(yoda);
        stage.add(layer);
        };
        imageObj.src = 'http://www.clker.com/cliparts/8/9/9/d/11949855741697952186small_house_01.svg.med.png';

       // stage.add(layer); // no need to add again
    </script>

Now you need to attach your touchstart touchend etc events to yoda, not to imgObject which is part of the DOM, not the canvas.

Moving an image in KineticJS using touch events

Question

1 answers

solution1
1 ACCPTED 2014-03-26 15:19:53

Moving an image in KineticJS using touch events

Question

1 answers

solution1 1 ACCPTED 2014-03-26 15:19:53

solution1
1 ACCPTED 2014-03-26 15:19:53