Question

我似乎发现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手机上。

演示代码在一个图层中放置两个rect形状，并将最顶层的一个设置为draggable。除非鼠标拖动速度低于某个阈值，否则可拖动矩形不会刷新其在屏幕上的位置。鼠标持续移动得足够快，拖动矩形似乎永远不会更新它在屏幕上的位置。效果是一种相当不稳定的拖累。

对于像这样的拖拽，舞台的宽度和高度必须> 256并且小于width = 1050和height = 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>

Answer 1

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

一切正常。

在firefox中使用kineticjs的生涩拖动动作

1 个答案: