firefox中kineticjs的快速拖动动作_Firefox_Kineticjs

firefox中kineticjs的快速拖动动作

firefox

firefox中kineticjs的快速拖动动作,firefox,kineticjs,Firefox,Kineticjs,我似乎在Firefox中发现了Kineticjs的一个问题，即在Firefox浏览器（版本17.0.1）和Kineticjs v4.3.0中产生缓慢而急促的拖动。仅供参考：我还经营Fedora 17。Chrome不会出现此问题这可能是Firefox 17的问题。它不会出现在运行Firefox15的10英寸安卓4.0.3平板电脑上，也不会出现在运行安卓4.0.4和Opera mobile 12的HTC oneS手机上演示代码将两个矩形形状放置在一个层中，并将最上面的一个设置为可拖动。可拖动矩形

我似乎在Firefox中发现了Kineticjs的一个问题，即在Firefox浏览器（版本17.0.1）和Kineticjs v4.3.0中产生缓慢而急促的拖动。仅供参考：我还经营Fedora 17。Chrome不会出现此问题

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

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

要使拖动像这样急促，工作台的宽度和高度必须大于256且小于宽度=1050和高度=293。取消注释将舞台的宽度和高度设置为256的行可以消除问题。需要存在第二个矩形。它可以拖也可以不拖，这无关紧要。如果不存在，则可以进行拖动。似乎存在质的差异而不是量的差异。要么完全落后，要么根本不落后

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

提前感谢,

史蒂夫


身体{
边际：0px；
填充：0px；
}
var w=$（“#容器”）.innerWidth（）；
var h=$（window.innerHeight（）；
//w=256；h=256；//取消对这行的注释，在firefox中拖动是平滑的
控制台日志（“舞台尺寸w:+w+“h:+h”）；
var阶段=新的动力学阶段({
容器：'容器'，
宽度：w，
身高：h
});
var gimage=新的动能.Rect({
x:10，
y:10，
填写：“#00D2FF”，
//图像：图像[“文件夹”]，
宽度：36，
身高：36，
});
var fimage=新的动能.Rect({
x:30，
y:30，
填写：“#A0D2FF”，
宽度：36，
身高：36，
德拉格布尔：是的
});
var layer=新的动能层（）；
//var layer2=新的动能层（）；
层。添加（gimage）；
图层。添加（fimage）；
//第2层。添加（fimage）；
阶段。添加（层）；
//阶段。添加（第2层）；

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

一切正常。

我认为最新的kineticjs 4.3.1解决了一个问题，您可以设置“dragOnTop:false”以减少抖动。

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