我正在使用here
中的DrawerJs当用户在画布上绘画时,我试图将画布动作记录为视频。 一切都很好,但只有我需要修复的东西。而且我不知道该如何解决。我在DrawerJs文档中找不到关于此的任何东西:(
关于徒手画铅笔的问题,我需要每移动一次鼠标就更新画布路径值。因为当mouseUp和canvas记录器无法捕获mousemove动作时DrawerJs正在更新canvas。我试图更改_onMouseMoveInDrawingMode函数,它可以工作,但不是一个好的解决方案。因为出了点问题,我无法控制画布上的光标,因为它是如此缓慢且难以绘制任何东西。
这是我来自抽屉Js.standalone.js的代码:
" "
这是HTML代码:
_onMouseMoveInDrawingMode: function(e) {
if (this._isCurrentlyDrawing) {
var pointer = this.getPointer(e);
this.freeDrawingBrush.onMouseMove(pointer);
// I added this region for set path values from every single mouse move
if (this.clipTo) {
this.contextTop.restore();
}
this.freeDrawingBrush.onMouseUp();
// end
}
this.setCursor(this.freeDrawingCursor);
this._handleEvent(e, 'move');
},
/**
* @private
* @param {Event} e Event object fired on mouseup
*/
_onMouseUpInDrawingMode: function (e) {
this._isCurrentlyDrawing = false;
if (this.clipTo) {
this.contextTop.restore();
}
//this.freeDrawingBrush.onMouseUp();
this._handleEvent(e, 'up');
}
这是我的用于将画布录制为视频的javascript代码,
<div class="row">
<div class="col-md-6">
<div id="canvas-editor"></div>
</div>
<div class="col-md-6">
<video id="video1" playsinline autoplay></video>
</div>
</div>
<div class="row">
<button type="button" id="startCanvasRecord" onclick="StartClick();">Start Canvas Record</button>
<button type="button" id="stopCanvasRecord" onclick="StopClick();">Stop Canvas Record</button>
</div>
你有什么解决办法吗?
最诚挚的问候