我似乎发现Firefox中的Kineticjs出现问题,在Firefox浏览器(17.0.1版)和dynamicjs v4.3.0中产生缓慢而生涩的拖动。仅供参考:我也正在运行Fedora17。Chrome不会发生此问题。

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

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

为了使拖动像这样生涩,舞台的宽度和高度必须> 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>

最佳答案

我使用最新的dynamicjs 4.7.4测试了此代码。

一切正常。

关于firefox - 在firefox中使用dynamic.js的生涩的拖动 Action ,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/14351731/

10-15 14:42