Firefox ブラウザー (バージョン 17.0.1) および kineticjs v4.3.0 でドラッグが遅くぎくしゃくする問題が、Firefox の Kineticjs で見つかったようです。参考までに、私は Fedora 17 も実行しています。この問題は Chrome では発生しません。
これは Firefox 17 の問題である可能性があります。Firefox 15 を実行する 10 インチの android 4.0.3 タブレット、または android 4.0.4 と Opera mobile 12 を実行する HTC-oneS 電話では発生しません。
デモ コードは、レイヤーに 2 つの四角形を配置し、一番上の 1 つをドラッグ可能に設定します。ドラッグ可能な四角形は、マウスのドラッグが特定のしきい値を下回らない限り、画面上の位置を更新しません。マウスが十分に速く動き続けていると、ドラッグする四角形が画面上の位置を更新しないように見えます。効果はかなりぎくしゃくしたドラッグです。
ドラッグがこのようにぎくしゃくするためには、ステージの幅と高さが > 256 で、幅 = 1050 と高さ = 293 未満でなければなりません。ステージの幅と高さを 256 に設定する行のコメントを外すと、問題が発生します。どこかに行って。2 番目の長方形の存在が必要です。ドラッグ可能かどうかは問題ではありません。そこにない場合、ドラッグは問題ありません。量的ではなく質的な違いがあるようです。完全に遅れるか、遅れないかのどちらかです。
また、オブジェクトを別のレイヤーに配置しようとしましたが (コメント行を参照)、パフォーマンスは向上しませんでした。
前もって感謝します、
スティーブ
<!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>