javascript - Fabric.JS和Fabric-Brush-无法添加到下部 Canvas

我正在尝试将Fabric.js与Fabric Brush一起使用。我遇到的这个问题是，Fabric Brush只将画笔描边放到Top Canvas而不是下部Canvas上。 （fabric.js中的备用画笔保存到底部画布）我想我需要将“ this.canvas.contextTop.canvas”转换为对象并将该对象添加到下部画布。有任何想法吗？

我试过跑步：

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

在

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

但是我得到了错误

Uncaught TypeError: obj._set is not a function

最佳答案

所以contextTop是CanvasHTMLElement上下文。您无法添加。
您可以仅将fabric.Object派生类添加到fabricJS画布。

看起来暂时不可能。
它们绘制为像素效果，然后允许您导出为图像。
扩展fabricJS笔刷接口以创建可重绘对象将是很好的。

到目前为止，使用fabricJS和特定版本的fabric brush，您唯一可以做的是：

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创建一个图像并添加为一个对象。

关于javascript - Fabric.JS和Fabric-Brush-无法添加到下部 Canvas ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52885498/