Fabricjs如何防止自由绘制超出画布边界？

Question

如何在自由绘图模式下防止用户在画布外绘制。

用户无法从外部开始绘制，但可以从内部开始绘制，将鼠标拖到画布外面，然后返回到画布内并释放鼠标按钮。

线条的一部分将会绘制在画布外面。如何告诉fabric在鼠标移出画布时停止绘制？

我尝试了以下代码：

_onMouseOut(e) {
  if(this.canvas.isDrawingMode) {
    this.canvas.trigger('mouse:up');
    this.canvas.isDrawingMode = false;
  }
}

无法工作。还有这个：

_onMouseOut(e) {
  if(this.canvas.isDrawingMode) {
    this.canvas.freeDrawingBrush.onMouseUp();
    this.canvas.isDrawingMode = false;
  }
}

事情变得有些奇怪...

同时，从 mouse:move 返回 false 对此没有影响。

更新：这几乎起作用了，但仍然有问题...

_onMouseOver(event) {     

  if (Util.isDefined(this.canvas.__isDrawingMode)) {
    this.canvas._isCurrentlyDrawing = true;
    delete this.canvas.__isDrawingMode;
  }
}

_onMouseOut(e) {
  if(this.canvas.isDrawingMode) {
    this.canvas.__isDrawingMode = this.canvas.isDrawingMode;
    this.canvas._isCurrentlyDrawing = false;
    // this.canvas.isDrawingMode = false;
  }
}

更新2: 尝试使用clipTo，但在使用setDimensions({},cssOnly:true)缩放的画布上无法正常工作；

    this.canvas.clipTo = (ctx) => {
      ctx.rect(0, 0, this.canvas.getWidth(), this.canvas.getHeight());
    };

- Exlord

Answer 1

以下是针对未来用户的解决方案链接。

const canvas = new fabric.Canvas('canvas', {
  isDrawingMode: true
});
canvas.freeDrawingBrush.limitedToCanvasSize = true;

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.2.4/fabric.min.js"></script>

<canvas id="canvas" style="border: 1px solid black; width: 100px: heigth:200px"></canvas>

- Miguel López