Fabric.JS и Fabric-Brush - не могу добавить на нижний холст - PullRequest
Новая
       25

Fabric.JS и Fabric-Brush - не могу добавить на нижний холст

0 голосов
/ 19 октября 2018

Я пытаюсь использовать Fabric.js с Fabric Brush Эта проблема, с которой я сталкиваюсь, состоит в том, что Fabric Brush только наносит мазки кисти на верхний холст, а ненижний холст.(Стандартные кисти в fabric.js сохраняются на нижнем холсте) Я думаю, мне нужно преобразовать this.canvas.contextTop.canvas в объект и добавить этот объект на нижний холст.Есть идеи?

Я пытался запустить: 

this.canvas.add(this.canvas.contextTop)

in 

  onMouseUp: function (pointer) {this.canvas.add(this.canvas.contextTop)}

Но я получаю ошибку 

Uncaught TypeError: obj._set is not a function

1 Ответ

0 голосов
/ 21 октября 2018

Итак, contextTop - это контекст CanvasHTMLElement.Вы не можете добавить это.Вы можете добавить на полотно fabricJS только fabric.Object производные классы.

Похоже, пока невозможно.Они рисуют как пиксельный эффект, а затем позволяют экспортировать как изображение.Было бы неплохо расширить интерфейс кисти fabricJS для создания перерисовываемых объектов.

На данный момент с fabricJS и этой конкретной версией кисти, единственное, что вы можете сделать, это: 

var canvas = new fabric.Canvas(document.getElementById('c'))

canvas.freeDrawingBrush = new fabric.CrayonBrush(canvas, {
  width: 70,
  opacity: 0.6,
  color: "#ff0000"
});

canvas.isDrawingMode = true

canvas.on('mouse:up', function(opt) {
  if (canvas.isDrawingMode) {
    var c = fabric.util.copyCanvasElement(canvas.upperCanvasEl);
    var img = new fabric.Image(c);
    canvas.contextTopDirty = true;
    canvas.add(img);
    canvas.isDrawingMode = false;
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.1/fabric.min.js"></script>
<script src="https://tennisonchan.github.io/fabric-brush/bower_components/fabric-brush/dist/fabric-brush.min.js"></script>
<button>Enter free drawing</button>
<canvas id="c" width="500" height="500" ></canvas>

Это просто создание изображения из contextTop и добавление в качестве объекта.

...