在Firefox中使用kineticjs的生澀拖動動作

我似乎發現Firefox中的Kineticjs存在一個問題，它會在Firefox瀏覽器（版本17.0.1）和kineticjs v4.3.0中產生緩慢拖曳的拖拽。僅供參考：我也在運行Fedora 17. Chrome不會出現此問題。在Firefox中使用kineticjs的生澀拖動動作

這可能是一個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>

來源

2013-01-16 user1982353

我認爲最新的kineticjs 4.3.1解決了您可以設置'dragOnTop：false'來減少生澀運動的問題。 – SoluableNonagon

我測試此代碼與最新kineticjs 4.7.4。

，一切工作正常。

來源

2013-11-09 09:02:11 lavrton

http://jsfiddle.net/xbPp8/1/ – lavrton

在Firefox中使用kineticjs的生澀拖動動作

回答

相關問題