Fabric js - начать рисование мышью в DIV - PullRequest
Новая
       9

Fabric js - начать рисование мышью в DIV

0 голосов
/ 11 февраля 2019

Была задача выполнить функцию с библиотекой Fabric Js (свободный рисунок).Можно ли сделать так, чтобы при изменении логической переменной canvas.isDrawingMode = false // true - если true, то рисовать всегда, независимо от того, нажата ли левая кнопка мыши, если false - не рисовать? 

var canvas = new fabric.Canvas('sheet');
canvas.isDrawingMode = true;
canvas.freeDrawingBrush.width = 2;
canvas.freeDrawingBrush.color = "#ff0000";
canvas.setHeight(window.innerHeight);
canvas.setWidth(window.innerWidth);

$(window).mouseup(function() {
  canvas.clear();
});
<!DOCTYPE html>
<html>
 <head>
  <style>
    #sheet {
      background-color: yellow;
    }
  </style>
 </head>
 <body>
  <canvas id="sheet"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.6/fabric.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 </body>
</html>

1 Ответ

0 голосов
/ 18 февраля 2019

Одним из решений будет вызов внутренних структур _onMouseDownInDrawingMode() / _onMouseUpInDrawingMode() для событий mouse:over / mouse:out.Однако, так как событие mouse:over не вызывается, когда мышь входит в существующий объект fabric.js (например, часть пути), нам нужно немного повозиться с fabric.Canvas.prototype._onMouseEnter().

Вот полное решение: 

fabric.Canvas.prototype._onMouseEnter = (function (original) {
  return function (e) {
    if (this.isDrawingMode) {
      // reset cached pointer, otherwise new path will be started from the point cursor last left the canvas
      this._resetTransformEventData();
      this._onMouseDownInDrawingMode(e);
    }
  }
  return original.apply(this, arguments)
})(fabric.Canvas.prototype._onMouseEnter)

var canvas = new fabric.Canvas('sheet');

canvas.on('mouse:out', function (e) {
  if (this.isDrawingMode) {
    this._onMouseUpInDrawingMode(e)
  }
});

canvas.isDrawingMode = true;
canvas.freeDrawingBrush.width = 2;
canvas.freeDrawingBrush.color = "#ff0000";
canvas.setHeight(window.innerHeight);
canvas.setWidth(window.innerWidth);
<!DOCTYPE html>
<html>
 <head>
  <style>
    #sheet {
      background-color: yellow;
    }
  </style>
 </head>
 <body>
  <canvas width="100" height="100" id="sheet"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.6/fabric.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 </body>
</html>
...