KineticJSのドラッグは、ドラッグ可能なだけではなくページ全体を移動します

Question

私はレイヤ全体を埋めるイメージを持っています、画像は大きいので私は（レイヤー上のdraggable：true）をスクロールしてから、その上に線を描きます。問題はWindows Phone 8にありますが、幅と幅をデバイスの高さと幅に設定すると、幅が大丈夫ですが、太い太いの高さが2倍に長すぎ、左右にスクロールする（TouchEventごとに1フレーム移動））、それを自己（背の高いので）をスクロールして下にスクロールしますが、レイヤーの内容はスクロールしません。 また、ラインを別の機能に追加すると、全く示されていません。

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

.

とここではナビゲート機能

です。

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

.

これはJSFIDDLE http://jsfiddle.net/3lpvs/

です。

事前にありがとうございました。

Answer 1

私は最近、window.innerHeightが不正確であることが原因であった非常に類似の問題に遭遇しました。シンプルな修正プログラムは、ビューポートメタタグをマイドキュメントの上部に追加することでした。

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

.