Question

我尝试通过拖动设置为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。这个小提琴不是很落后，但是当我尝试在我的系统中工作时，它确实滞后了很多。有什么想法吗？

Answer 1

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将自行完成整个作业。

Kinetic JS（拖动球和鼠标指针）

1 个答案: