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 上不断绘图。我希望用户能够在 y 轴上的某个距离处（例如）x=100 绘制多条线。

更新：

我添加了以下代码：

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