freeDrawingBrush.onMouseMove 固定 x 或 y 只绘制直线

Question

我正在尝试使用 freeDrawingBrush 绘制一条直线使 x 修复。

例如：

          canvas.isDrawingMode = 1;
          canvas.freeDrawingBrush.color = "purple";
          canvas.freeDrawingBrush.width = 10; 

          canvas._onMouseMoveInDrawingMode = function (e) {
           
                var pointer = canvas.getPointer(e);
                pointer.x = 100;
                
                this.freeDrawingBrush.onMouseMove(pointer);
            
        }

这是有效的，但它在 mousemove 上不断绘制。我希望用户能够在固定位置绘制多条线（例如）x=100 在 y 轴上的距离。

更新：

我添加了以下代码：

          canvas._onMouseUpInDrawingMode = function (e) {


            this._isCurrentlyDrawing =  false;
            //canvas.selection = true;
            canvas.isDrawingMode = 0;

            this.freeDrawingBrush.onMouseUp();
            this._handleEvent(e, 'up');

        }

这会停止连续绘制，但出现了新问题。当我再次启用绘图模式并尝试绘制新线时，它还会将前一行添加到新线

Answer 1

经过大量研究，我找到了方法：

var brush = new fabric.PencilBrush(canvas);
canvas.isDrawingMode = 1;
brush.width = 10;
     
canvas._onMouseMoveInDrawingMode = function (e) {
       
    var pointer = canvas.getPointer(e);
    pointer.x = 100;
            
    brush.onMouseDown({x:pointer.x, y:pointer.y});
        
}

freeDrawingBrush.onMouseMove 固定 x 或 y 只绘制直线

freeDrawingBrush.onMouseMove fix x or y to draw only straight line

fabricjs