无法使用 Fabricjs 在所有方向上完美自由绘制

Question

我正在尝试在 Fabricjs awesome library 中免费画一个圆圈，但在免费画一个圆圈时遇到了一些问题。我能够实现相同的矩形自由绘图，但在绘制圆形时未能达到完美。

代码如下： `

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);

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

    circle.set({ radius: Math.abs(origY - pointer.y)/2 });


    canvas.renderAll();
});

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

`

这是 Fiddle!

Answer 1

看看我的更新 fiddle:

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

我修改了你的 mouse:move 函数以考虑位置和 strokeWidth；

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();
});

无法使用 Fabricjs 在所有方向上完美自由绘制

Unable to freedraw perfectly in all directions using Fabricjs

javascript

fabricjs