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

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

部分线将绘制在画布之外 . 当鼠标移到画布外时,如何告诉布料停止绘图?

我试过这个:

_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) 缩放的画布上无法正常工作;

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