Question

移动鼠标后不保留矩形的基点。此外，矩形的第二个角不会粘在鼠标上。请参阅this video或this fiddle。

预期行为

基点始终保持在某个坐标处。第二个点总是粘在鼠标光标上。

var canvas = new fabric.Canvas('c', { selection: false });

var rect, isDown, origX, origY;

canvas.on('mouse:down', function(o){
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 (!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){
isDown = false;
});

Answer 1

在鼠标移动侦听器中注释掉以下代码，它会更改矩形的顶部和左侧，以始终将基点保持在同一位置。

 /*if(origX>pointer.x){
        rect.set({ left: Math.abs(pointer.x) });
    }
    if(origY>pointer.y){
        rect.set({ top: Math.abs(pointer.y) });
    }*/

总的来说，我发现第二个点用鼠标光标粘住，除非你真的非常快地移动光标。

更新了小提琴 - http://jsfiddle.net/aPLq5/333/

光标处的矩形底角和角落不会保留它们的位置，请参阅视频

1 个答案: