将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

回答

相关问题