我试图通过在画布上拖动鼠标来绘制矩形。创建矩形后,一次无法选择矩形对象。
我尝试将矩形作为活动对象,但不起作用。
var canvas = new fabric.Canvas('c',{selection:true});
/* var red = new fabric.Rect({
top: 100, left: 0, width: 80, height: 50, fill: 'red' });
canvas.add(red); */
var rect, isDown, origX, origY;
var count = 0;
canvas.on('mouse:down', function(o){
if(count==0){
isDown = true;
var pointer = canvas.getPointer(o.e);
origX = pointer.x;
origY = pointer.y;
var pointer = canvas.getPointer(o.e);
rect = new fabric.Rect({
left: origX,
top: origY,
originX: 'left',
originY: 'top',
width: pointer.x-origX,
height: pointer.y-origY,
angle: 0,
fill: 'rgba(255,0,0,0.5)',
transparentCorners: false
});
canvas.add(rect);
}
});
canvas.on('mouse:move', function(o){
if(count==0){
if (!isDown) return;
var pointer = canvas.getPointer(o.e);
if(origX>pointer.x){
rect.set({ left: Math.abs(pointer.x) });
}
if(origY>pointer.y){
rect.set({ top: Math.abs(pointer.y) });
}
rect.set({ width: Math.abs(origX - pointer.x) });
rect.set({ height: Math.abs(origY - pointer.y) });
canvas.renderAll();
}
});
canvas.on('mouse:up', function(o){
if(count==0){
isDown = false;
canvas.selection= true;
canvas.setActiveObject(rect);
canvas.renderAll();
count++;
}
});
`
绘制矩形对象后,有没有一种选择方法。