3

我似乎发现 Firefox 中的 Kineticjs 存在问题，该问题在 Firefox 浏览器（版本 17.0.1）和 kineticjs v4.3.0 中产生缓慢而生涩的拖动。仅供参考：我也在运行 Fedora 17。Chrome 不会出现这个问题。

这可能是 Firefox 17 的问题。它不会出现在运行 Firefox 15 的 10 英寸 android 4.0.3 平板电脑或运行 android 4.0.4 和 Opera mobile 12 的 HTC-oneS 手机上。

演示代码将两个矩形形状放在一个图层中，并将最上面的一个设置为可拖动。除非鼠标拖动速度低于某个阈值，否则可拖动矩形不会刷新其在屏幕上的位置。如果鼠标持续移动得足够快，则拖动矩形似乎永远不会更新其在屏幕上的位置。效果是一个非常生涩的阻力。

对于像这样的拖拽，舞台的宽度和高度必须 > 256 并且小于宽度 = 1050 和高度 = 293。取消注释将舞台的宽度和高度设置为 256 的行会导致问题离开。第二个矩形的存在是必需的。它可以是可拖动的，也可以是不可拖动的，这无关紧要。如果不存在，则拖动很好。似乎存在质而非量的差异。它要么完全滞后，要么没有。

此外，我尝试将对象放置在不同的层（见注释行），但这并没有提高性能。

提前致谢，

史蒂夫

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
    <script  type="text/javascript" src="/resources/kinetic.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
 </head>
  <body>
    <div id="container"></div>
    <script>

   var w = $("#container").innerWidth();
   var h=  $(window).innerHeight();
   // w = 256;  h=  256; // uncomment this line and dragging is smooth in firefox

   console.log("Stage size w:" + w + " h:" + h);

   var stage = new Kinetic.Stage({
       container: 'container',
       width: w,
       height: h
  });

   var gimage = new Kinetic.Rect({
        x:10,
        y: 10,
        fill: '#00D2FF',
       // image: images["folder"],
        width: 36,
        height: 36,
   });

   var fimage = new Kinetic.Rect({
        x:30,
        y: 30,
        fill: '#A0D2FF',
        width: 36,
        height: 36,
       draggable: true
   });

      var layer = new Kinetic.Layer();
      //var layer2 = new Kinetic.Layer();
     layer.add(gimage);
      layer.add(fimage);
    //  layer2.add(fimage);
      stage.add(layer);
     // stage.add(layer2);
    </script>
  </body>
</html>
4

1 回答 1

0

我用最新的 kineticjs 4.7.4 测试了这段代码。

一切正常。

于 2013-11-09T09:02:11.363 回答