在KineticJS中拖动可以移动整个页面，而不仅仅是可拖动页面

Question

我有一个图像填充了整个层，图像很大，所以我使用（draggable：在层上为true）滚动，然后在上面画一条线。问题是在windows phone 8中，当我将高度和宽度设置为设备的高度和宽度时，宽度很好，但高度太长，是手机高度的两倍多，左右滚动是缓慢的（每个触摸事件移动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();
}

这是一个JSFiddlehttp://jsfiddle.net/3LpVS/

提前感谢。

Answer 1

我最近遇到了一个非常类似的问题，原因是window.innerHeight不准确。简单的修复方法是在我的文档顶部添加一个视口元标记。

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