Question

我正在使用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>

你有什么解决办法吗？

最诚挚的问候

使用DrawerJs将画布记录为视频

0 个答案: