在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中沿着光標路徑繪製線條

回答

相關問題