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

Question

我正在尝试使用 Fabric.js与 Fabric Brush我遇到的这个问题是织物画笔仅将画笔描边放在顶部 Canvas 上，而不是放在下部 Canvas 上。 (fabric.js 中的库存画笔保存到底部 Canvas )我想我需要将“this.canvas.contextTop.canvas”转换为一个对象并将该对象添加到下部 Canvas 。有什么想法吗？

我尝试过运行:

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

在

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

但我收到错误

Uncaught TypeError: obj._set is not a function

Answer 1

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

目前看来还不可能。它们绘制为像素效果，然后允许您导出为图像。扩展fabricJS画笔接口(interface)来创建可重绘对象会很好。

到目前为止，使用 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 创建一个图像并添加为一个对象。