javascript - 使用fabric.js框架绘制多边形

Question

我正在尝试使用以下代码绘制一个自由多边形:http://jsfiddle.net/e5Xth/3/

canvas.on('mouse:move', function (options) {
        if (lines[0] !== null && drawingObject.type == "roof") {
            setStartingPoint(options);
            lines[lineCounter - 1].set({
                x2: x,
                y2: y
            });
            canvas.renderAll();
        }
    });

在此 jsfiddle 中工作完美，但在我的页面上使用相同的代码，这些线不是在我“真正绘制”的地方绘制的多边形。它们“天生”在左上角，但是当我单击形成多边形时，它会正确绘制。

谁能帮我？

Answer 1

问题在于鼠标按下事件，您正在设置位于右上角的 orginx 和 originy。我在下面给出了更新的代码。

function mousedown(event) {
                    setStartingPoint(event);
                    var points = [x, y, x, y];
                    var line = new fabric.Line(points, {
                        left: x,
                        top: y,
                        strokeWidth: 1,
                        selectable: false,
                        stroke: '#40648E'
                    });
                    lines.push(line);
                    canvas.add(lines[lineCounter]);
                    var rect = new fabric.Rect({
                        left: x-2.5,
                        top: y-2.5,
                        width: 5,
                        height: 5,
                        fill: '#fff',
                        stroke: '#000',
                        strokeWidth: 2,
                        selectable: false
                    });
                    canvas.add(rect);
                    lineCounter++;
                }
            }

 function mousemove(event) {
                    canvas.defaultCursor = "crosshair";
                    if (lines[0] !== null) {
                        setStartingPoint(event);
                        if (lines[lineCounter - 1] != null) {
                            lines[lineCounter - 1].set({
                                "x2": x,
                                "y2": y
                            });
                        }
                        canvas.renderAll();
                    }
                }