在另一个画布中添加画布: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 控制台中找到的内容

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 ?

推荐答案

在经历了无数次讨论和互联网解决方案之后，我暂时使用 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屋！