javascript - FabricJS 画线但是...？

Question

我想做点什么。例如，当我点击屏幕时我会放置一个点。当我点击其他地方将点​​放在那里之后。最后，在这两点之间自动绘制线。我该怎么做？

感谢您的帮助:)

Answer 1

HTML

<canvas id="c" height="200" width="300"></canvas>

JS

var canvas = new fabric.Canvas('c');

var point1;
canvas.on('mouse:down', function (options) {

    var x = options.e.clientX - canvas._offset.left;
    var y = options.e.clientY - canvas._offset.top;

    var circle = new fabric.Circle({
        left: x,
        top: y,
        fill: 'red',
        originX: 'center',
        originY: 'center',
        hasControls: false,
        hasBorders: false,
        lockMovementX: true,
        lockMovementY: true,
        radius: 5,
        hoverCursor: 'default'
    });

    canvas.add(circle);

    if (point1 === undefined) {
        point1 = new fabric.Point(x, y)
    } else {
        canvas.add(new fabric.Line([point1.x, point1.y, x, y], {
            stroke: 'blue',
            hasControls: false,
            hasBorders: false,
            lockMovementX: true,
            lockMovementY: true,
            hoverCursor: 'default'
        }))
        point1 = undefined;
    }
});

<小时/>

fiddle - http://jsfiddle.net/zdaax418/