KineticJS - Drawing Lines with Mouse

前端未结

关注

 1  430

I\'m using KinectJS to draw lines based on mouse movement. When a user holds down the mouse button, I want it to be the \'start\' point of the line, and when the user relea

相关标签:

1条回答

迷失自我

2020-12-19 13:31

Yes, its possible.

Basically, you has to redraw your layer during onMouseMove event. You'll need a flag to control when the line is moving or not.

When the script initialize, this flag should be false.

At onMouseDown, the line start should receive the current mouse coordinates and set the flag to true.

At onMouseMouve, if the flag is true, you should update the line end to receive the current mouse coordinates.

At onMouseUp, the flag should be set to false.

See the example below:

<!DOCTYPE HTML>
<html>
    <head>
        <style>
            body {
                margin: 0px;
                padding: 0px;
            }
            canvas {
                border: 1px solid #9C9898;
            }
        </style>
        <script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.0.1.js"></script>
        <script>
            window.onload = function() {
                layer = new Kinetic.Layer();
                stage = new Kinetic.Stage({
                    container: "container",
                    width: 320,
                    height: 320
                });

                background = new Kinetic.Rect({
                    x: 0, 
                    y: 0, 
                    width: stage.getWidth(),
                    height: stage.getHeight(),
                    fill: "white"
                });

                line = new Kinetic.Line({
                    points: [0, 0, 50, 50],
                    stroke: "red"
                });

                layer.add(background);
                layer.add(line);
                stage.add(layer);

                moving = false;

                stage.on("mousedown", function(){
                    if (moving){
                        moving = false;layer.draw();
                    } else {
                        var mousePos = stage.getMousePosition();
                        //start point and end point are the same
                        line.getPoints()[0].x = mousePos.x;
                        line.getPoints()[0].y = mousePos.y;
                        line.getPoints()[1].x = mousePos.x;
                        line.getPoints()[1].y = mousePos.y;

                        moving = true;    
                        layer.drawScene();            
                    }

                });

                stage.on("mousemove", function(){
                    if (moving) {
                        var mousePos = stage.getMousePosition();
                        var x = mousePos.x;
                        var y = mousePos.y;
                        line.getPoints()[1].x = mousePos.x;
                        line.getPoints()[1].y = mousePos.y;
                        moving = true;
                        layer.drawScene();
                    }
                });

                stage.on("mouseup", function(){
                    moving = false; 
                });

            };
        </script>
    </head>
    <body>
        <div id="container" ></div>
    </body>
</html>

0 讨论(0)