在另一个画布内添加画布：obj.setCoords不是一个函数（fabric js） [英] Adding canvas inside another canvas: obj.setCoords is not a function( fabric js)

问题描述

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

Started using fabric.js and trying to add a canvas inside another canvas, so that the top canvas stays constant and I'll add objects to inner canvas.

以下是将画布添加到另一个画布的代码片段。

Here is the snippet of adding a canvas to another canvas.

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

和我的html看起来像这样

and my html looks like this

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

成功添加这些内容后，我要做的是将坐标添加到内部画布，因此它对最终用户而言看起来像另一个人。

Once adding these successfully, what I am going to do is , add the coordinates to the inner canvas, so that it looks like one on another to the end user.

但是，遇到了以下错误代码：

However, ran into the below error for the tried code

    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中发现的console

Looking at the error message, just went to the line of error and here is what I found in chrome console

有人可以在代码中指出错误？

Can someone point the mistake in my codes ?

推荐答案

在经过no.of讨论和互联网解决方案，暂时我使用Fabric Rectangle作为剪辑器，并将其设置为边界，以便用户可以在该剪辑器中放置/播放。

After going through no.of discussions and internet solutions, for time being I am using Fabric Rectangle as a clipper and setting it's boundaries so user can be able to drop/play with in that particular clipper.

点击红色（下面的图片）是我的剪辑器，现在我可以限制下拉，下面是用剪辑器添加图片的代码。

Dotted red(image below) is my clipper and now I can bound the dropping and below is the code to add an image with a clipper.

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

    });
}

现在，当将任何图像/图层附加到画布上时，我会将该图像/图层/文本绑定到我创建的裁剪器上。

Now while appending any image/layer to the canvas, I bind that image/layer/text to the clipper I created.

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

}

看起来像在限制边界之后

And the looks like, after restriction of bounds,

这里是我用一些静态图片url创建的小提琴。

Here is the fiddle I have created with some static image url.

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

因此，我现在仍在使用这个解决方案，而且我真的觉得这很肮脏和肮脏。寻找其他干净的解决方案。

So I am staying with this solution for now and I really feel like this is hacky and dirty. Looking for some other clean solutions.

这篇关于在另一个画布内添加画布：obj.setCoords不是一个函数（fabric js）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！