fabric.js-鼠標移動時結束自由繪圖模式

Question

我有一個應用程序，允許用戶在有限的時間內繪制織物畫布。 時間結束后，我想結束繪圖模式並將繪圖保存為圖像。

我的問題是，如果在用戶仍在繪圖（拖動鼠標）的時間結束時，繪圖將消失（再次單擊畫布后）。

下面的小提琴示例顯示了我制作的應用程序，產生問題的步驟如下：

1. 運行小提琴，然后立即開始繪制。
2. 3秒鍾后，將發生超時事件，自由繪圖模式將結束。 並且繪圖將停止。
3. 再次單擊畫布，然后拖動鼠標。
4. 繪圖將消失。

代碼示例：

var canvas = new fabric.Canvas("c",{backgroundColor : "#fff"});
canvas.isDrawingMode = true;
canvas.freeDrawingBrush.color = "green";
canvas.freeDrawingBrush.width = 4;

setTimeout(stop_drawing, 3000);

function stop_drawing() {
    canvas.isDrawingMode = false;
}

小提琴的例子：

https://jsfiddle.net/usaadi/808x5d20/1/

Answer 1

您可以模擬庫中發生的情況：

_onMouseUpInDrawingMode: function(e) {
  this._isCurrentlyDrawing = false;
  if (this.clipTo) {
    this.contextTop.restore();
  }
  this.freeDrawingBrush.onMouseUp();
  this._handleEvent(e, 'up');
},

就您而言，您只需觸發onMouseUp事件，因此您的函數stop_drawing將為：

function stop_drawing() {
  canvas.isDrawingMode = false;
  canvas.freeDrawingBrush.onMouseUp();

}

在我們的例子中， onMouseUp將是：

/**
* Invoked on mouse up
*/
onMouseUp: function() {
  this._finalizeAndAddPath();
},

讓我們看看_finalizeAndAddPath的工作方式 ：

     /**
     * On mouseup after drawing the path on contextTop canvas
     * we use the points captured to create an new fabric path object
     * and add it to the fabric canvas.
     */
    _finalizeAndAddPath: function() {
      var ctx = this.canvas.contextTop;
      ctx.closePath();

      var pathData = this.convertPointsToSVGPath(this._points).join('');
      if (pathData === 'M 0 0 Q 0 0 0 0 L 0 0') {
        // do not create 0 width/height paths, as they are
        // rendered inconsistently across browsers
        // Firefox 4, for example, renders a dot,
        // whereas Chrome 10 renders nothing
        this.canvas.renderAll();
        return;
      }

      var path = this.createPath(pathData);

      this.canvas.add(path);
      path.setCoords();

      this.canvas.clearContext(this.canvas.contextTop);
      this._resetShadow();
      this.canvas.renderAll();

      // fire event 'path' created
      this.canvas.fire('path:created', { path: path });
    }

此時，繪制的路徑已經添加到畫布中。

如果您想看下面的代碼，我已經在這里更新了您的代碼段...

祝一切順利

 var canvas = new fabric.Canvas("c", { backgroundColor: "#fff" }); canvas.isDrawingMode = true; canvas.freeDrawingBrush.color = "green"; canvas.freeDrawingBrush.width = 4; setTimeout(stop_drawing, 3000); function stop_drawing() { canvas.isDrawingMode = false; canvas.freeDrawingBrush.onMouseUp(); } 

 <script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script> <canvas id="c" width="500" height="500" style="border:1px solid #ccc"></canvas>