Traîner dans kineticjs déplace toute la page non seulement la dragagable

Question

J'ai une image remplissant la couche entière, l'image est grande, donc je fais défiler à l'aide de (feutrage: true sur le calque), puis je dessine une ligne sur le dessus.Le problème est dans Windows Phone 8 lorsque je réglais la hauteur et la largeur de la hauteur et de la largeur de l'appareil, la largeur va bien, mais la hauteur est trop longue de plus que la hauteur du téléphone, le défilement droit et la gauche est lent (déplace 1 cadre par touchevent), faites défiler jusqu'à faire défiler la page, la page elle-même (puisqu'il est grand) mais pas le contenu de la couche. De plus, lorsque j'ajoute la ligne d'une fonction distincte, il n'est pas du tout affiché.

<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>

et voici la fonction navigue

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();
}

Voici une jsfiddle http://jsfiddle.net/3LPVS/

Merci d'avance.

Answer 1

J'ai rencontré un problème très similaire récemment qui a été causé par window.innerHeight étant inexacte.La solution simple consistait à ajouter une balise méta ci-dessus dans le haut de mon document.

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