Fabric.js：如何通过鼠标绘制多边形

Question

我想fabric.Polygon在 Fabric.js 中绘制一个鼠标交互。我做了一个小 jsfiddle 来显示我的实际状态：http : //jsfiddle.net/Kienz/ujefxh7w/

按下ESC键后，“交互式绘图模式”被取消，多边形完成。但是现在多边形的位置是错误的（控件是正确的）。

有人有想法吗？

Answer 1

您可以通过在初始化时设置 originX 和 originY 点来修复“跳跃”多边形。

        var polygon = new fabric.Polygon([{
        x: pos.x,
        y: pos.y
    }, {
        x: pos.x + 0.5,
        y: pos.y + 0.5
    }], {
        fill: 'blue',
        opacity: 0.5,
        selectable: false,
        originX: pos.x,
        originY: pos.y
    });

请参阅此处： http: //jsfiddle.net/ujefxh7w/48/

我不知道为什么选择框会移动。

编辑：发现画布对象的重新加载修复了选择框

序列化并加载序列化对象可以解决这个问题：

var json = JSON.stringify(canvas);
canvas.loadFromJSON(json, function() {
    canvas.renderAll();
});

http://jsfiddle.net/ujefxh7w/50/