我有一个不能正常工作的情况如下:Fabric.js - 免费绘制一个矩形
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。
看来数学关闭或我与宽度/高度设置不正确的PARAMS/x/y值,当您绘制矩形不正确跟随光标为。
任何帮助非常感谢,谢谢提前:)
我不明白为什么面料没有像“选择:完成”这样的事件传递给处理选择范围,它已经在内部处理这个逻辑。我试图达到相同的目的,并最终将此事件添加到源代码。 – krulik 2012-03-10 09:02:22