Fabric.js - 自由绘制一个矩形

问题描述

我有以下无法正常工作：

I have the following which doesn't work correctly:

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


canvas.observe('mouse:down', function(e) { mousedown(e); });
canvas.observe('mouse:move', function(e) { mousemove(e); });
canvas.observe('mouse:up', function(e) { mouseup(e); });


var started = false;


var x = 0;
var y = 0;


/* Mousedown */
function mousedown(e) {

    var mouse = canvas.getPointer(e.memo.e);

    started = true;

    x = mouse.x;
    y = mouse.y;

    var square = new fabric.Rect({

        width: 1,
        height: 1,
        left: mouse.x,
        top: mouse.y,
        fill: '#000'

    });


    canvas.add(square);
    canvas.renderAll();
    canvas.setActiveObject(square);

}


/* Mousemove */
function mousemove(e) {

    if(!started) {

        return false;

    }

    var mouse = canvas.getPointer(e.memo.e);

    var x = Math.min(mouse.x,  x),
    y = Math.min(mouse.y,  y),
    w = Math.abs(mouse.x - x),
    h = Math.abs(mouse.y - y);

    if (!w || !h) {

        return false;

    }

    var square = canvas.getActiveObject();

    square.set('top', y).set('left', x).set('width', w).set('height', h);

    canvas.renderAll();

}


/* Mouseup */
function mouseup(e) {

    if(started) {

        started = false;

    }

 }

以上逻辑是一个简单的矩形绘图系统，我没有使用fabric.js，所以我知道它的工作原理，而不是fabric.js。

The above logic is from a simple rectangle drawing system I used without fabric.js so I know it works, just not with fabric.js.

似乎数学已关闭或我使用宽度/高度/ x / y值设置不正确的参数，就像绘制矩形时没有正确地跟随光标一样。

It seems the maths is off or I'm setting the incorrect params with the width/height/x/y values, as when you draw the rectangle does not follow the cursor correctly.

非常感谢任何帮助，在此先感谢：）

Any help is much appreciated, thanks in advance :)

推荐答案

看起来Fabric.js会从原点计算所有内容。因此，顶部和左侧有点误导。请检查以下链接：。另外，我改变了一些你的代码：

Looks like Fabric.js calculates everything from the origin. So, 'Top' and 'Left' are a bit misleading. Check the following link: Canvas Coordinates Have Offset. Also, I've changed a bit of your code:

var canvas = new fabric.Canvas('canvas');
canvas.observe('mouse:down', function(e) { mousedown(e); });
canvas.observe('mouse:move', function(e) { mousemove(e); });
canvas.observe('mouse:up', function(e) { mouseup(e); });

var started = false;
var x = 0;
var y = 0;

/* Mousedown */
function mousedown(e) {
    var mouse = canvas.getPointer(e.memo.e);
    started = true;
    x = mouse.x;
    y = mouse.y;

    var square = new fabric.Rect({
        width: 0,
        height: 0,
        left: x,
        top: y,
        fill: '#000'
    });

    canvas.add(square);
    canvas.renderAll();
    canvas.setActiveObject(square);

}


/* Mousemove */
function mousemove(e) {
    if(!started) {
        return false;
    }

    var mouse = canvas.getPointer(e.memo.e);

    var w = Math.abs(mouse.x - x),
    h = Math.abs(mouse.y - y);

    if (!w || !h) {
        return false;
    }

    var square = canvas.getActiveObject();
    square.set('width', w).set('height', h);
    canvas.renderAll();
}

/* Mouseup */
function mouseup(e) {
    if(started) {
        started = false;
    }

    var square = canvas.getActiveObject();

    canvas.add(square);
    canvas.renderAll();
 }

这篇关于Fabric.js - 自由绘制一个矩形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！