Fabric.js - Dessiner gratuitement un rectangle

Question

J'ai ce qui suit qui ne fonctionne pas correctement :

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;    

    }   

 }

La logique ci-dessus provient d'un système simple de dessin de rectangle que j'ai utilisé sans fabric.js. Je sais donc que cela fonctionne, mais pas avec fabric.js.

Il semble que les mathématiques soient fausses ou que je définisse des paramètres incorrects avec les valeurs de largeur/hauteur/x/y, car lorsque vous dessinez, le rectangle ne suit pas correctement le curseur.

Toute aide est la bienvenue, merci d'avance :)

Answer 1

Vous pouvez utiliser ce simple code

canvas.add(new fabric.Rect({ left: 110, top: 110, fill: '#f0f', width: 50, height: 50 }));