如何使用鼠标在 fabricjs 中自由绘制圆圈？

Question

我在我的项目中使用 Fabricjs，现在正在使用 Fabricjs 库绘制圆。

我可以做到，但它在 x 轴上不太合适，因为在 x 轴上拖动似乎不合适，而在 y 轴上拖动效果很好。

任何人都可以修复它以在任何轴上工作。

还有 2-3 个关于 Whosebug 的问题没有正确回答关于 Circle 的问题，我之前问过其中 1 个。

这是我目前所做工作的 Fiddle： Draw Circle

代码： `

var canvas = new fabric.Canvas("canvas2");
var circle, isDown, origX, origY;

canvas.on('mouse:down', function(o){
isDown = true;
var pointer = canvas.getPointer(o.e);
origX = pointer.x;
origY = pointer.y;
circle = new fabric.Circle({
    left: origX,
    top: origY,
    originX: 'left',
    originY: 'top',
    radius: pointer.x-origX,
    angle: 0,
    fill: '',
    stroke:'red',
    strokeWidth:3,
});
canvas.add(circle);
});

canvas.on('mouse:move', function(o){
if (!isDown) return;
var pointer = canvas.getPointer(o.e);
var radius = Math.abs(origY - pointer.y)/2;
if (radius > circle.strokeWidth) {
    radius -= circle.strokeWidth/2;
}
circle.set({ radius: radius});

if(origX>pointer.x){
    circle.set({originX: 'right' });
} else {
    circle.set({originX: 'left' });
}
if(origY>pointer.y){
    circle.set({originY: 'bottom'  });
} else {
    circle.set({originY: 'top'  });
}

canvas.renderAll();
});

canvas.on('mouse:up', function(o){
  isDown = false;
});

`

Answer 1

查看更新 fiddle。当 select 半径时，您只需 select x 和 y 的最小值或最大值。

http://jsfiddle.net/8u1cqasa/17/

我（再次）修改了您的 mouse:move 函数以考虑这两个动作。

canvas.on('mouse:move', function(o){
    if (!isDown) return;
    var pointer = canvas.getPointer(o.e);
    var radius = Math.max(Math.abs(origY - pointer.y),Math.abs(origX - pointer.x))/2;
    if (radius > circle.strokeWidth) {
        radius -= circle.strokeWidth/2;
    }
    circle.set({ radius: radius});

    if(origX>pointer.x){
        circle.set({originX: 'right' });
    } else {
        circle.set({originX: 'left' });
    }
    if(origY>pointer.y){
        circle.set({originY: 'bottom'  });
    } else {
        circle.set({originY: 'top'  });
    }
    canvas.renderAll();
});

如何使用鼠标在 fabricjs 中自由绘制圆圈？

How to freedraw Circle in fabricjs using mouse?

javascript

html5-canvas

fabricjs