我尝试通过拖动 set true 并将其设置为对象来移动球对象以及鼠标指针。
这是我的 javascript 代码:
$(document).ready(function() {
var arr = [];
var stage = new Kinetic.Stage({
container: 'container',
width: window.innerWidth,
height: window.innerHeight,
listening: true
});
var layer = new Kinetic.Layer({
listening: true
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: 20,
y: 20,
radius: 5,
fill: 'cyan',
stroke: 'black',
draggable: true
});
layer.add(circle);
stage.add(layer);
stage.getContent().addEventListener('mouseover', function() {
var mousePos = stage.getPointerPosition();
var tween = new Kinetic.Tween({
node: circle,
x: mousePos.x,
y: mousePos.y,
duration: 0.001,
easing: Kinetic.Easings.EaseInOut
});
tween.play();
layer.draw();
});
stage.getContent().addEventListener('mousemove', function() {
var mousePos = stage.getPointerPosition();
var tween = new Kinetic.Tween({
node: circle,
x: mousePos.x,
y: mousePos.y,
duration: 0.0001,
easing: Kinetic.Easings.EaseInOut
});
tween.play();
layer.batchDraw();
});
});
这是我的 html 代码:
<!DOCTYPE html>
<html>
<head>
<title>Collision Detection</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="../css/style.css"/>
</head>
<body>
<div id="container" style=" background:#000; margin:auto; float:left;"></div>
<script src="../js/jquery.min.js"></script>
<script src="../js/kinetic-v5.0.0.min.js"></script>
<script src="../js/main_kinetic.js"></script>
</body>
</html>
我得到了输出，但它滞后了。 我想知道你们是否一样？ 您能否为此提出替代方案……或解决此延迟问题？
编辑:http://jsfiddle.net/BVeTH/ 这是我的 JSfiddle。 fiddle 并没有太多滞后，但是当我尝试在我的系统中使用它时，它确实滞后了很多。 有什么想法吗？
最佳答案
mousemove 事件每秒触发 20-30 次，因此不要在您的 mousemove 处理程序中播放补间。
这就是你落后的根源。
幸运的是，您不需要补间来让您的圆圈随着鼠标移动。
只需这样做:http://jsfiddle.net/m1erickson/4Ubf6/
// move the circle with the mouse
stage.getContent().addEventListener('mousemove', function () {
circle.setPosition(stage.getPointerPosition());
layer.draw();
});
而且，您可以完全删除鼠标悬停事件监听器——mousemove 将自行完成整个工作。
关于javascript - Kinetic JS(用鼠标指针拖动一个球)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21226057/