KineticJS - Drawing Lines with Mouse

2020-02-12 09:07发布

站内问答 / JavaScript
1901 1 5

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 release, it will be the 'end' of the line, but as they are holding the mouse down I want to be able to dynamically redraw the line as my mouse moves. Is this possible?

1条回答
太酷不给撩
2楼-- · 2020-02-12 09:10

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) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)