在 KineticJS 中沿光标路径绘制线条答案

【问题标题】：Drawing lines along the cursor path in KineticJS在 KineticJS 中沿光标路径绘制线条
【发布时间】：2013-04-13 05:35:31
【问题描述】：

我正在使用 KineticJS 来实现绘图应用程序。我用它来绘制形状，直线。我使用KineticJS - Drawing Lines with Mouse 中描述的方式来绘制直线。但现在我的要求是沿着鼠标路径画线！这应该是什么程序？我们可以使用 Kinetic.Path 来做到这一点吗？

以下代码用于绘制直线，

    var Object,startingPoint;
    var down = false;

    layer.on("mousedown", function(e) {
        down = true;
        Object = new Kinetic.Line({
            points: [e.layerX, e.layerY,e.layerX+1, e.layerY+1],
            stroke: "red"
        });

        layer.add(Object);
    });

    layer.on("mousemove", function(e) {
         if (down) {
                var x = e.layerX;
                var y = e.layerY;
                Object.getPoints()[1].x = e.layerX;
                Object.getPoints()[1].y = e.layerY;
                down = true;
                layer.draw();
         }        
    });

    layer.on("mouseup", function(e) {
        down = false;
    });

我已将 Kinetic.Line 替换为 Kinetic.Path 以实现目标。但它没有用。

【问题讨论】：

当然可以。到目前为止，您尝试了哪些代码？
我已将代码添加到问题中。请看一看。
将 jsfiddle 或 jsbin 放在一起，人们会提供帮助

标签： javascript jquery ajax html kineticjs

【解决方案1】：

如果您需要在一条线上添加点，您可以这样做：

  var points = line.getPoints();
  var pos = stage.getUserPosition();
  points = points.push(pos.x, pos.y);
  line.setPoints(points);

【讨论】：

【解决方案2】：

这里是我如何实现它的。关键是在 mousemove 和 mouseup 期间使用 kineticJS 的样条形状并在其中推动点。 ev._x, ev._y 是根据这篇文章计算的 x 和 y 点 Tracking mouse position in canvas when no surrounding element exists

如果有帮助请告诉我

    tools.pencil = function () {
    var tool = this;
    this.started = false;
    var drawObject;

    this.mousedown = function (ev) {
     drawObject = new DrawObject();
     drawObject.Tool = DrawTool.Pencil;
     tool.started = true;
     drawObject.currentState = DrawState.Started;
     drawObject.StartX = ev._x;
     drawObject.StartY = ev._y;
     tool.DrawIt(drawObject);

   };

    this.mousemove = function (ev) {
        if (tool.started) {
           drawObject.currentState = DrawState.Inprogress;
           drawObject.CurrentX = ev._x;
           drawObject.CurrentY = ev._y;
           tool.DrawIt(drawObject);


    };

    this.mouseup = function (ev) {
        if (tool.started) {
            tool.started = false;
            drawObject.currentState = DrawState.Completed;
             drawObject.CurrentX = ev._x;
            drawObject.CurrentY = ev._y;
           tool.DrawIt(drawObject);
       }
    };

    this.mouseout = function (ev) {
        if (tool.started) {
        }
        tool.started = false;

    };


    this.DrawIt = function (drawObject) {

            switch (drawObject.currentState) {
                case DrawState.Started:
                    var x= drawObject.StartX, 
                        y = drawObject.StartY;
                    var pencil = new Kinetic.Spline({
                        points: [{
                            x: x,
                            y: y
                        }],
                        stroke: 'red',
                        strokeWidth: 2,
                        lineCap: 'round',
                        tension: 1,
                        name: shapes.length
                    });

                    drawObject.Shape = pencil;
                    layer.add(pencil);
                    layer.draw();


                    break;
                case DrawState.Inprogress:
                case DrawState.Completed:
                    var x = drawObject.CurrentX,
                        y = drawObject.CurrentY;

                    var pencil = drawObject.Shape;
                    pencil.attrs.points.push({ x: x, y: y });
                    pencil.setPoints(pencil.attrs.points);
                    layer.draw();
                    if (drawObject.currentState == DrawState.Completed) {
                        // dosomething
                    }

                    break;
            }

其中draw对象是javascript中的简单空函数

function DrawObject()
{
}

而drawstate是铅笔工具的所有可用状态

var DrawState =
{
 Started: 0,
 Inprogress: 1,
 Completed: 2
}

而“层”是在 KineticJS 阶段已经添加的简单 KineticJS 层

【讨论】：