javascript - 将点数组从 Ink.StrokeCollection 转换为路径数组 freeDrawingBrush Fabric.js

Question

我在一个项目中使用fabric.js，现在我正在尝试将旧的xml 数组指向fabricjs 对象。

遗留项目将 xml 持久性保存到数据库中。在 C# 中是使用 Silverlight 中的 InkPresenter 控件的 System.Windows.Ink.StrokeCollection

这是生成的xml https://cloud.githubusercontent.com/assets/20269820/18906832/153537a0-8561-11e6-91ca-6bbbec70d859.png

对于fabric.js，我尝试创建类似的原型(prototype)，然后我有以下内容:

我检查fabricjs中的路径数组对象: Two objects in fabric js 有什么方法可以将该 xml 结构转换为结构路径结构吗？我可以使用 Fabric 创建一个新结构，但我仍然需要迎合遗留问题，在这种情况下，我需要找到一种将该结构转换为 Fabric 的方法。

谢谢

更多详细信息:github。 com/kangax/fabric.js/issues/3295

Answer 1

根据@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]
        });
    }
}