我似乎发现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/