在另一个画布中添加画布:obj.setCoords不是一个函数(fabric js)

Question

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

以下是将画布添加到另一个画布的片段.

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>

一旦成功添加这些,我将要做的是,将坐标添加到内部画布,以便它看起来像最终用户的另一个.

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

    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

经过讨论和互联网解决方案之后,我暂时使用Fabric Rectangle作为限幅器并设置它的边界,这样用户就可以在特定的限幅器中放下/玩.

虚线红色(下面的图像)是我的剪辑器,现在我可以限制下降,下面是使用限幅器添加图像的代码.

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);

    });
}

现在,在将任何图像/图层附加到画布时,我将该图像/图层/文本绑定到我创建的剪辑器.

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");

}

看来,在限制边界之后,

这是我用一些静态图片网址创建的小提琴.

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

所以我现在仍然坚持使用这个解决方案,我觉得这很糟糕,很脏.寻找其他一些清洁的解决方案.