將Ink.StrokeCollection中的點數組轉換爲路徑數組freeDrawingBrush Fabric.js

我在一個項目中使用了fabric.js，現在我試圖將一個傳統的xml數組轉換爲fabricjs對象。將Ink.StrokeCollection中的點數組轉換爲路徑數組freeDrawingBrush Fabric.js

傳統項目具有保存到數據庫的xml持久性。在C＃是在Silverlight

使用InkPresenter控件一個System.Windows.Ink.StrokeCollection這是XML生成 https://cloud.githubusercontent.com/assets/20269820/18906832/153537a0-8561-11e6-91ca-6bbbec70d859.png

對於fabric.js我試圖創建類似的原型，然後我有以下：

我檢查fabricjs中的路徑數組對象： Two objects in fabric js 有沒有什麼辦法可以將xml結構轉換爲結構路徑結構？我可以使用結構創建一個新結構，但我仍然需要迎合遺留問題，在這種情況下，我需要找到一種方法將結構轉換爲結構。

謝謝

欲瞭解更多詳情：github。 com/kangax/fabric.js/issues/3295

來源

2016-09-28 Abner

fabric.Path結構是一個svg Path結構。我看到你的結構是一個簡單的點陣列。

想象你在你的圖紙存檔4點（P1，P2，P3，P4），相應的命令是：

var pathCommand = "M p1.x p1.y L p2.x p2.y p3.x p3.y p4.x p4.y"

那麼你可以做new fabric.Path(pathCommand, options)其中options包括中風（你的顏色）和strokeWidth（你的寬度）。

這會給你一個折線方面的對象。

如果你想模仿織物freeDrawingMode與指向你必須檢查pencilBrush代碼，你可以在這裏找到：

http://fabricjs.com/docs/fabric.js.html#line7882

而且可以在一些二次平滑曲線轉換點的數組。

來源

2016-09-28 10:15:16 AndreaBogazzi

我想模仿的freeDrawingMode是我要找的人。有沒有什麼地方可以找到如何使用convertPointsToSVGPath並添加到畫布？因爲我需要使用freeDrawingMode – Abner

加載畫布中的路徑，那麼您是否已經解決了這個問題，或者需要更深入的瞭解如何轉換爲freeDrawing數據？我完全忘記了這一點。 – AndreaBogazzi

嘿安德烈是的，我非常感謝您的建議 – Abner

基於@AndreaBogazzi建議創建瞭解決方案。

var canvas = this.__canvas = new fabric.Canvas('c', { 
    isDrawingMode: true 
}); 

if (canvas.freeDrawingBrush) { 
    canvas.freeDrawingBrush.color = "#000000"; 
    canvas.freeDrawingBrush.width = 3; 
    canvas.freeDrawingBrush.shadowBlur = 0; 
} 
var pencil = new fabric.PencilBrush(canvas); 
var points = [{x: 11, y: 12}, {x: 11, y: 11}, {x: 12, y: 11}]; 
// Convert Points to SVG Path 
var res = pencil.convertPointsToSVGPath(points); 
// Create the Path 
var path = pencil.createPath(res.toString()); 
// Set the tickness and color 
path.set({ strokeWidth: 3, stroke: "rgba(0, 0, 0, 1)" }); 
// Add to the Canvas 
canvas.add(path);

要恢復的路徑返回點的數組：

var arr = []; 
for (var i = 0; i < canvas.getObjects().length; i++) { 
    for (var j = 0; j < canvas.getObjects()[i].path.length; j++) { 
     arr.push({ 
      x: canvas.getObjects()[i].path[j][1], 
      y: canvas.getObjects()[i].path[j][2] 
     }); 
    } 
}

來源

2016-10-06 08:02:43 Abner

將Ink.StrokeCollection中的點數組轉換爲路徑數組freeDrawingBrush Fabric.js

回答

相關問題