KineticJS - 用鼠标画线答案

【问题标题】：KineticJS - Drawing Lines with MouseKineticJS - 用鼠标画线
【发布时间】：2012-09-10 02:19:02
【问题描述】：

我正在使用 KinectJS 根据鼠标移动来绘制线条。当用户按住鼠标按钮时，我希望它成为行的“起点”，当用户释放时，它将成为行的“结束”，但是当他们按住鼠标时，我想要能够在我的鼠标移动时动态重绘线条。这可能吗？

【问题讨论】：

标签： javascript kineticjs

【解决方案1】：

是的，有可能。

基本上，您必须在 onMouseMove 事件期间重新绘制图层。您需要一个标志来控制线路何时移动。

当脚本初始化时，这个标志应该是假的。

在 onMouseDown 处，行首应该接收当前鼠标坐标并将标志设置为 true。

在 onMouseMouve 处，如果标志为真，则应更新行尾以接收当前鼠标坐标。

在 onMouseUp 时，该标志应设置为 false。

请看下面的例子：

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

【讨论】：

有没有办法绘制多条线而不替换同一条线？
@TrustWeb 确定是的。只需在每次鼠标按下时创建一个新形状