[英]fabric.js - Ending free drawing mode while mouse is moving
我有一个应用程序,允许用户在有限的时间内绘制织物画布。 时间结束后,我想结束绘图模式并将绘图保存为图像。
我的问题是,如果在用户仍在绘图(拖动鼠标)的时间结束时,绘图将消失(再次单击画布后)。
下面的小提琴示例显示了我制作的应用程序,产生问题的步骤如下:
代码示例:
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;
}
小提琴的例子:
您可以模拟库中发生的情况:
_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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.