Question

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

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

部分线将在画布之外绘制。当鼠标在画布外移动时，如何告诉布料停止绘制？

我试过了：

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

Fabricjs可以防止画布边界外的自由绘制

0 个答案: