在KineticJS中拖动不仅拖动整个页面

我有一个图像填充整个图层，图像很大，所以我滚动使用（可拖动：真正的图层），然后我在它上面画一条线。问题是在Windows Phone 8中，当我将高度和宽度设置为设备的高度和宽度时，宽度很好，但高度过长超过手机高度的两倍，左右滚动缓慢（每移动一帧移动一帧），滚动上下滚动它自己的页面（因为它很高），而不是图层的内容。另外，当我在一个单独的函数中添加行时，它根本没有显示。在KineticJS中拖动不仅拖动整个页面

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

感谢。

来源

2014-04-14 Ahmed Saad

最近我遇到了一个非常类似的问题，这是由于window.innerHeight不准确造成的。简单的解决方法是将视口元标记添加到文档的顶部。

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

来源

2014-04-14 19:45:56 Greg

在KineticJS中拖动不仅拖动整个页面

回答

相关问题