CODEWITHSUNDEEP
javascripthtmlcollision-detectionkineticjs
Nevin
Nevin

Reputation: 3298

Kinetic JS (Dragging a ball along with mouse pointer)

I tried moving a ball object along with the mouse pointer by dragging set true and setting it as an object.

Here's my javascript Code:

$(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();
    });
});

Here's my html code:

<!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>

I got the output ,but its lagging. I wonder if its the same for u guys? Can u suggest an alternative for this.. or resolve this lag?

EDIT :http://jsfiddle.net/BVeTH/ This is my JSfiddle. THere aint much lagging in the fiddle,but when i try to work it in my system,it does lag a lot. Any idea?

Upvotes: 1

Views: 713

Answers (1)

markE
markE

Reputation: 105025

mousemove events are fired 20-30 times per second, so don't play tweens in your mousemove handler.

That's the source of your lagging.

Luckily, you don't need tweening to get your circle to move with the mouse.

Just do this: http://jsfiddle.net/m1erickson/4Ubf6/

// move the circle with the mouse

stage.getContent().addEventListener('mousemove', function () {
    circle.setPosition(stage.getPointerPosition());
    layer.draw();
});

And, you can remove the mouseover event listener completely -- mousemove will do the whole job by itself.

Upvotes: 2

Related Questions