我是 fabric.js 的新手。我需要从 Canvas 中的 URL 加载多个图像并将它们添加为图像对象,以便我可以设置它们的 z 索引。
我尝试使用Image.fromURL
但它没有返回对象,所以我无法设置它们的 z 索引。新fabric.Image
从页面中获取图像,这样我就不会从中得到结果。
这就是我到目前为止所做的
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);
}
);
我以同样的方式添加了另外五个图像。
可以fabric.Image.fromURL
返回图像对象(通过使用任何属性)?
所以我可以在加载后更改它们的 z-index。
抱歉,我没有 jsfiddle 可以展示。
最佳答案
欢迎来到 Stack Overflow,
请检查此fiddle
我在那个 fiddle 中添加了一些评论。代码如下:
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);
关于javascript - Fabric.js 中图像对象的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41871411/