[英]issue with image object in fabric.js
I am complete newbie in fabric.js . 我是fabric.js的新手。 I need to load several images from URL in canvas and add them as image object so I can set their z index.
我需要从画布中的URL加载多个图像,并将它们添加为图像对象,以便设置其z索引。
I tried using Image.fromURL
but it did not return object so I can't set their z index. 我尝试使用
Image.fromURL
但它没有返回对象,因此无法设置其z索引。 New fabric.Image
take images from page so I am not getting results from it. 新的
fabric.Image
从页面获取图像,因此无法从中获取结果。
This is what I have done so far 这是我到目前为止所做的
var canvas = new fabric.Canvas('myCanvas');
var front_wall = fabric.Image.fromURL('img/bedroom1-front/front_wall.png',
function(img) {
img.scale(0.65);
canvas.add(img);
}
);
I add five more images same way. 我以相同的方式添加了五个图像。
Can fabric.Image.fromURL
return the image object (by using any attribute) ? fabric.Image.fromURL
可以返回图像对象(通过使用任何属性)吗?
So I can change their z-index after loading. 因此,我可以在加载后更改其z-index。
Sorry I don't have jsfiddle to show. 抱歉,我没有jsfiddle可以显示。
Welcome to Stack Overflow, 欢迎使用Stack Overflow,
Please check this fiddle 请检查这个小提琴
I added some comments in that fiddle. 我在小提琴中添加了一些评论。 Code is below:
代码如下:
var srcImg = "http://fabricjs.com/lib/pug.jpg";
var canvas = new fabric.Canvas('c');
var icon = null;
var image = fabric.Image.fromURL(srcImg, function(oImg) {
oImg.set({width: oImg.width / 3,
height: oImg.height / 3,
left: 100,
top: 100,
originX: 'center',
originY: 'center',
selectable: false,
transparentCorners: false});
//magic strats here to make active Image and you can control image object here
canvas.setActiveObject(oImg);
icon = canvas.getActiveObject();
icon.hasBorders = false;
icon.hasControls = false;
canvas.add(oImg);
});
//if you want to control outside somewhere you can do this:
setTimeout(function(){
icon.set({'top': 200, 'left': 200});
canvas.renderAll();
}, 1500);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.