使用 fabric.js 绘制矩形答案

【问题标题】：Draw rectangle with fabric.js使用 fabric.js 绘制矩形
【发布时间】：2017-02-01 22:34:41
【问题描述】：

这是我用 fabric.js 绘制矩形的代码，但我没有得到确切的结果。我正在使用 fabric.js 在 HTML 的画布上绘制一个矩形

<canvas id="canvas2" width=500 height=500 style="height:500px;width:500px;"></canvas>

我的 JS 代码是：

var canvas = new fabric.Canvas("canvas2");
var rectangle, isDown, origX, origY;

canvas.on('mouse:down', function(o){
    var pointer = canvas.getPointer(o.e);

    isDown = true;
    origX = pointer.x;
    origY = pointer.y;

    rectangle = new fabric.Rect({
        left: origX,
        top: origY,
        fill: '',
        stroke: 'red',
        strokeWidth: 3,
    });
    canvas.add(rectangle);
});

canvas.on('mouse:move', function(o){
    if (!isDown) return;
    var pointer = canvas.getPointer(o.e);
    canvas.renderAll();
});

canvas.on('mouse:up', function(o){
    isDown = false;
});

【问题讨论】：

标签： javascript fabricjs

【解决方案1】：

沙里克·安萨里，据我了解，您在用鼠标绘制矩形时遇到问题。请检查此fiddle

您的问题与鼠标移动有关。这就是您需要在鼠标中执行的操作：移动事件：

canvas.on('mouse:move', function(o){
    if (!isDown) return;
    var pointer = canvas.getPointer(o.e);
    if(origX>pointer.x){
        rectangle.set({ left: Math.abs(pointer.x) });
    }
    if(origY>pointer.y){
        rectangle.set({ top: Math.abs(pointer.y) });
    }

    rectangle.set({ width: Math.abs(origX - pointer.x) });
    rectangle.set({ height: Math.abs(origY - pointer.y) });
    canvas.renderAll();
});

【讨论】：