javascript - 在另一个 Canvas 中添加 Canvas : obj. setCoords 不是函数(fabric js)

Question

开始使用 fabric.js 并尝试在另一个 Canvas 中添加一个 Canvas ，以便顶部 Canvas 保持不变，我将向内部 Canvas 添加对象。

这是将一个 Canvas 添加到另一个 Canvas 的片段。

canvas  = new fabric.Canvas('artcanvas');
innerCanvas = new fabric.Canvas("innerCanvas");
canvas.add(innerCanvas);

我的 html 看起来像这样

<canvas id="artcanvas" width="500" height="500"></canvas>
<canvas id="innerCanvas" width="200" height="200" ></canvas>

成功添加这些后，我要做的是，将坐标添加到内部 Canvas ，以便最终用户看起来像一个在另一个上。

但是，尝试过的代码遇到了以下错误

    Uncaught TypeError: obj.setCoords is not a function
    at klass._onObjectAdded (fabric.js:6894)
    at klass.add (fabric.js:231)
    at main.js:60
    at fabric.js:19435
    at HTMLImageElement.fabric.util.loadImage.img.onload (fabric.js:754)
_onObjectAdded @ fabric.js:6894
add @ fabric.js:231
(anonymous) @ main.js:60
(anonymous) @ fabric.js:19435
fabric.util.loadImage.img.onload @ fabric.js:754

查看错误消息，刚转到错误行，这是我在 chrome 控制台中找到的内容

有人可以指出我代码中的错误吗？

Answer 1

在经历了 no.of 讨论和互联网解决方案之后，我暂时将 Fabric Rectangle 用作裁剪器并设置它的边界，以便用户可以在该特定裁剪器中放置/玩耍。

红色虚线(下图)是我的裁剪器，现在我可以绑定(bind)删除，下面是使用裁剪器添加图像的代码。

function addImageToCanvas(imgSrc) { 
    fabric.Object.prototype.transparentCorners = false;    
    fabric.Image.fromURL(imgSrc, function(myImg) {
        var img1 = myImg.set({
            left: 20,
            top: 20,
            width: 460,
            height: 460
        });
        img1.selectable = false;
        canvas.add(img1);

        var clipRectangle = new fabric.Rect({
            originX: 'left',
            originY: 'top',
            left: 150,
            top: 150,
            width: 200,
            height: 200,
            fill: 'transparent',
            /* use transparent for no fill */
            strokeDashArray: [10, 10],
            stroke: 'red',
            selectable: false
        });

        clipRectangle.set({
            clipFor: 'layer'
        });
        canvas.add(clipRectangle);

    });
}

现在，在将任何图像/图层附加到 Canvas 时，我将该图像/图层/文本绑定(bind)到我创建的剪裁器。

function addLayerToCanvas(laImg) {

    var height = $(laImg).height();
    var width = $(laImg).width();
    var clickedImage = new Image();
    clickedImage.onload = function(img) {

        var pug = new fabric.Image(clickedImage, {

            width: width,
            height: height,
            left: 150,
            top: 150,
            clipName: 'layer',
            clipTo: function(ctx) {
                return _.bind(clipByName, pug)(ctx)
            }
        });
        canvas.add(pug);
    };
    clickedImage.src = $(laImg).attr("src");

}

在边界限制之后，看起来像

这是我用一些静态图像 url 创建的 fiddle 。

https://jsfiddle.net/sureshatta/yxuoav39/

所以我现在继续使用这个解决方案，我真的觉得它很老套而且很脏。寻找其他一些干净的解决方案。