fabric.js - Закончить свободный режим рисования во время перемещения мыши

Question

У меня есть приложение, которое позволяет пользователю рисовать полотно ткани в течение ограниченного периода времени. По истечении времени я хотел бы закончить режим рисования и сохранить рисунок, сделанный как изображение.

Моя проблема в том, что если время заканчивается, пока пользователь все еще рисует (перетаскивая мышью), рисунок исчезнет (после повторного щелчка по холсту).

Ниже скрипку пример показывает применение я сделал, и шаги, которые продуцируют проблемы являются:

1. Запуск скрипку, и сразу же начать рисовать.
2. Через 3 секунды произойдет событие таймаута, и режим свободного рисования будет завершен. И рисунок остановится.
3. Нажмите на холст снова и перетащите мышь.
4. Рисунок исчезнет. Пример

Код:

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

Fiddle пример:

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

Answer 1

Вы могли бы подражать, что происходит в library:

_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>