tengo el siguiente que no funciona correctamente:Fabric.js - Dibujar un rectángulo gratuito
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 lógica anterior es de un sistema de dibujo simple rectángulo utilicé sin fabric.js por lo que sabemos que funciona , simplemente no con fabric.js
Parece que las matemáticas están desactivadas o estoy configurando los parámetros incorrectos con los valores de ancho/alto/x/y, ya que cuando dibuja el rectángulo no sigue el cursor correctamente.
Cualquier ayuda es muy apreciada, gracias de antemano :)
No entiendo por qué la tela no tiene un evento como "selección: completado" que pasa a manejar los límites de selección, ya maneja esta lógica internamente. Estaba tratando de lograr lo mismo y terminé agregando este evento al código fuente. – krulik