Javascript fabric.js-鼠标移动时结束自由绘图模式

我有一个应用程序，允许用户在织物画布上绘制有限的时间。时间结束后，我想结束绘图模式并将绘图保存为图像

我的问题是，如果时间结束时用户仍在绘图（拖动鼠标），绘图将消失（再次单击画布后）

下面的fiddle示例显示了我所做的应用程序，产生问题的步骤如下：

运行小提琴，并立即开始绘图

3秒后，将发生超时事件，自由绘图模式将结束。绘图将停止

再次单击画布并拖动鼠标

这幅画将消失

代码示例：

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;
}

小提琴示例：

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;
}

---

您可以模拟以下情况：

在您的情况下，您只需启动

onMouseUp

事件，因此您的函数stop\u绘图将为：

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

}

我们的情况是：

让我们看看它是如何工作的：

此时，已将绘制的路径添加到画布中

我已经更新了你的代码片段 如果你想看看下面的代码

祝你一切顺利

var canvas=newfabric.canvas（“c”{
背景颜色：“fff”
});
canvas.isDrawingMode=true；
canvas.freedrawingprush.color=“绿色”；
canvas.freeDrawingBrush.width=4；
设置超时（停止图，3000）；
函数停止_绘图（）{
canvas.isDrawingMode=false；
canvas.freeDrawingBrush.onMouseUp（）；
}

---

您可以模拟以下情况：

在您的情况下，您只需启动

onMouseUp

事件，因此您的函数stop\u绘图将为：

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

}

我们的情况是：

让我们看看它是如何工作的：

此时，已将绘制的路径添加到画布中

我已经更新了你的代码片段 如果你想看看下面的代码

祝你一切顺利

var canvas=newfabric.canvas（“c”{
背景颜色：“fff”
});
canvas.isDrawingMode=true；
canvas.freedrawingprush.color=“绿色”；
canvas.freeDrawingBrush.width=4；
设置超时（停止图，3000）；
函数停止_绘图（）{
canvas.isDrawingMode=false；
canvas.freeDrawingBrush.onMouseUp（）；
}

谢谢！我尝试使用jQuery触发器来触发鼠标移动事件，但没有成功。似乎应该深入研究源代码以找到解决方案。代码中有一个小问题。如果我们在onMouseUp（）之后添加javascript代码，如果我们没有绘制任何内容，它将不会运行。代码有一个小问题。如果我们在onMouseUp（）之后添加javascript代码，如果我们没有绘制任何内容，它将不会运行。解决方案是在对onMouseUp（）的调用周围设置一个条件。如果（canvas._isCurrentlyDrawing）{canvas.freeDrawingBrush.onMouseUp（）；}谢谢！我尝试使用jQuery触发器来触发鼠标移动事件，但没有成功。似乎应该深入研究源代码以找到解决方案。代码中有一个小问题。如果我们在onMouseUp（）之后添加javascript代码，如果我们没有绘制任何内容，它将不会运行。代码有一个小问题。如果我们在onMouseUp（）之后添加javascript代码，如果我们没有绘制任何内容，它将不会运行。解决方案是在对onMouseUp（）的调用周围设置一个条件。if（canvas._isCurrentlyDrawing）{canvas.freeDrawingBrush.onMouseUp（）；}

     /**
     * 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 });
    }