fabric.js - 鼠标移动时结束自由绘图模式-Java 学习之路

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

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

下面的小提琴示例显示了我所做的应用程序，产生问题的步骤是：

运行小提琴，立即开始绘画 .
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;
}

小提琴示例：

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

1 回答

你可以模仿_404956中发生的事情：

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

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

如果您想查看下面的代码，我已更新了您的代码段here

祝一切顺利

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>

回复于 2024-04-19T15:45:26+08:00

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

1 回答

相关问题