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

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

下面的代码是用来画直线，

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达到目标。但它没有奏效。

来源

2013-03-23 andunslg

当然可以。你到目前为止尝试过哪些代码？ – markE 2013-03-23 15:43:38

我已将代码添加到问题中。请看一看。 – andunslg 2013-03-23 19:51:34

放在一起jsfiddle或jsbin和人会帮助 – SoluableNonagon 2013-03-25 15:04:35

，如果你需要添加点到线，你可以这样做：

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

来源

2013-03-25 15:07:10 SoluableNonagon

这里我是如何实现它。关键是在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; 
      }

在哪里画的对象是在javascript简单空函数

function DrawObject() 
{ 
}

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

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

和“图层”很简单KineticJS图层已在KineticJS阶段添加

来源

2013-04-12 21:35:31

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

回答

相关问题