代码之家 › 专栏 › 技术社区 › Jason Small Marc B

Fabric.JS和Fabric Brush-无法添加到下画布

fabricjs html5-canvas javascript

Jason Small Marc B · 技术社区 · 6 年前

Fabric.js 具有 Fabric Brush 我遇到的这个问题是,织物笔刷只将笔刷笔划放到顶部画布上,而不是下部画布上(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

1 回复 | 直到 6 年前

AndreaBogazzi 6 年前

所以contextTop是CanvasHTMLElement context。你不能添加它。您可以向fabricJS画布添加fabric.Object派生类。

看来现在还不可能。

到目前为止,使用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>

sjscotti 4 年前

我已经采取了安德烈阿博加齐建议的方法,并修改了织物刷,使它做从上到下帆布(作为一个图像)内部的织物刷转移。我还使用了一些我发现的代码,它将图像裁剪成一个更小的边界框,这样就比画布的整个尺寸小。织物刷子中的每个刷子都有一个 onMouseUp 函数中应该放置代码的位置。以SprayBrush为例,这里的原始代码是:

onMouseUp: function(pointer) { },

并替换为以下代码:

    onMouseUp: function(pointer){
        function trimbrushandcopytocanvas() {
            let ctx = this.canvas.contextTop;
            let pixels = ctx.getImageData(0, 0, canvas.upperCanvasEl.width, canvas.upperCanvasEl.height),
                l = pixels.data.length,
                bound = {
                    top: null,
                    left: null,
                    right: null,
                    bottom: null
                },
                x, y;
            // Iterate over every pixel to find the highest
            // and where it ends on every axis ()
            for (let i = 0; i < l; i += 4) {
                if (pixels.data[i + 3] !== 0) {
                    x = (i / 4) % canvas.upperCanvasEl.width;
                    y = ~~((i / 4) / canvas.upperCanvasEl.width);

                    if (bound.top === null) {
                        bound.top = y;
                    }

                    if (bound.left === null) {
                        bound.left = x;
                    } else if (x < bound.left) {
                        bound.left = x;
                    }

                    if (bound.right === null) {
                        bound.right = x;
                    } else if (bound.right < x) {
                        bound.right = x;
                    }

                    if (bound.bottom === null) {
                        bound.bottom = y;
                    } else if (bound.bottom < y) {
                        bound.bottom = y;
                    }
                }
            }
            // Calculate the height and width of the content
            var trimHeight = bound.bottom - bound.top,
                trimWidth = bound.right - bound.left,
                trimmed = ctx.getImageData(bound.left, bound.top, trimWidth, trimHeight);
            // generate a second canvas
            var renderer = document.createElement('canvas');
            renderer.width = trimWidth;
            renderer.height = trimHeight;
            // render our ImageData on this canvas
            renderer.getContext('2d').putImageData(trimmed, 0, 0);
            var img = new fabric.Image(renderer,{
                scaleY: 1./fabric.devicePixelRatio,
                scaleX: 1./fabric.devicePixelRatio,
                left: bound.left/fabric.devicePixelRatio,
                top:bound.top/fabric.devicePixelRatio
            });
            this.canvas.clearContext(ctx);
            canvas.add(img);
        }
        setTimeout(trimbrushandcopytocanvas, this._interval); // added delay because last spray was on delay and may not have finished
    },

这个 setTimeout 之所以使用此函数,是因为在mouseup事件发生后,织物笔刷仍然可以绘制到上画布上,并且在某些情况下,笔刷会在清除其上下文后继续绘制上画布。