开始使用 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 控制台中找到的内容
有人可以指出我代码中的错误吗?
最佳答案
在经历了 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/
所以我现在继续使用这个解决方案,我真的觉得它很老套而且很脏。寻找其他一些干净的解决方案。
关于javascript - 在另一个 Canvas 中添加 Canvas : obj. setCoords 不是函数(fabric js),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44434944/