javascript - Fabricjs 防止在 Canvas 边界之外进行自由绘制

Question

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

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

部分线条将绘制在 Canvas 之外。当鼠标移出 Canvas 时，如何让 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;
  }
}

UPDATE2:尝试了 clipTo 但它在使用 setDimensions({},cssOnly:true) 缩放的 Canvas 上无法正常工作；

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

Answer 1

对于 future 的用户，这里是 link到一个解决方案。

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>