Question

我在一个项目中使用了fabric.js，现在我正在尝试将遗留的xml数组转换为fabricjs对象。

旧项目将xml持久性保存到DB。在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 /问题/ 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]
        });
    }
}

Answer 2

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)选项包括笔画（你的颜色）和strokeWidth（你的宽度）。

那会给你一个折线方面对象。

如果你想用这些点模仿结构freeDrawingMode，你必须检查你可以在这里找到的pencilBrush代码：

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

这可以转换一些二次曲线更平滑的点数。

将点数组从Ink.StrokeCollection转换为Path Array freeDrawingBrush Fabric.js

2 个答案: