El arrastre en Kineticjs mueve toda la página, no solo el arrastre.

Question

Tengo una imagen que llena toda la capa, la imagen es grande, por lo que me desplazo usando (arrastre: true en la capa), luego dibujo una línea encima de ella.El problema está en Windows Phone 8 cuando configuro la altura y el ancho a la altura y la anchura del dispositivo, el ancho está bien, pero la altura es demasiado larga que el doble de la altura del teléfono, desplazarse a la derecha y la izquierda es lento (mueve 1 Frame por TouchEvent), desplazándose hacia arriba y hacia abajo, desplácese por la página (ya que es alto) pero no el contenido de la capa. También cuando agrego la línea en una función separada, no se muestra en absoluto.

<div id="content" data-role="content" class="high">
        <script type="text/javascript" src="javascript/map.js"></script>

        <script>
             var stage = new Kinetic.Stage({
                container: 'content',
                width: window.innerWidth,
                height: (window.innerHeight * 73) / 100
            });

            var layer = new Kinetic.Layer({
                draggable: true
            });

            var imageObj = new Image();
            imageObj.onload = function () {
                var yoda = new Kinetic.Image({
                    x: 0,
                    y: 0,
                    image: imageObj,
                    width: 1964,
                    height: 1289

                });
                layer.add(yoda);
                stage.add(layer);
            }
            imageObj.src = 'image/map-04.png';

            navigate("A","B");

        </script>
</div>

y aquí está la función de navegación

function navigate(from, to, layer) {
    var redLine = new Kinetic.Line({
        points: [73, 70, 340, 23, 450, 60, 500, 20],
        stroke: 'red',
        strokeWidth: 15,
        lineCap: 'round',
        lineJoin: 'round'
    });

    layer.add(redLine);
    layer.draw();
}

Aquí hay un jsfiddle http://jsfiddle.net/3lpvs/

gracias de antemano.

Answer 1

Corrí en un tema muy similar recientemente que fue causado por window.innerHeight que es inexacto.La solución simple fue agregar una etiqueta META de visualport a la parte superior de mi documento.

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no">