Fabric.js添加图像顺序
Fabric.js add images order
我试图严格地将图像添加到画布中,但图像是随机添加的。
怎么了?
这是我的简单代码。
var canvas = new fabric.Canvas("preview");
var imgs = ['bgBottom','bgTop', 'bgLevel', 'bgCircle'];
for (var i=0; i<imgs.length;i++){
var url = imgs[i]+'.png';
fabric.Image.fromURL(url, function (oImg) {
canvas.add(oImg)
})
}
fabric.Image.fromURL
在后台加载图像,并在图像加载完成后运行传递给它的匿名函数,该函数将图像添加到画布中。浏览器加载图像的顺序会有所不同,你不能依赖它的特定顺序。
看看这个jsfiddle,它显示加载一个图像数组并确保它们以设置的顺序显示。这是通过在加载之前将图像添加到画布来实现的;它只是在图像可以显示之前不进行渲染。
jsfiddle的代码:
var SelfLoadingImage = fabric.util.createClass(fabric.Object, {
initialize: function(src) {
this.image = new Image();
this.image.src = src;
this.image.onload = (function() {
this.width = this.image.width;
this.height = this.image.height;
this.loaded = true;
this.setCoords();
this.fire('image:loaded');
canvas.renderAll();
}).bind(this);
},
_render: function(ctx)
{
if (this.loaded) {
ctx.drawImage(this.image, -this.width / 2, -this.height / 2);
}
}
});
var canvas = new fabric.Canvas("preview");
var imgs = [
'http://icons.iconarchive.com/icons/fasticon/ifunny/128/dog-icon.png', // dog
'http://33.media.tumblr.com/avatar_14ee6ada72a4_128.png', // cat
'http://upload.wikimedia.org/wikipedia/commons/b/bc/Nuvola_devices_mouse.png' // mouse
];
for (var i=0; i<imgs.length;i++){
var url = imgs[i];
var img = new SelfLoadingImage(url);
canvas.add(img);
}
相关文章:
- 使用JS按顺序显示图像,而不是随机显示
- 要按顺序显示的图像
- 使用jquery按顺序切换转盘中的图像
- 来自 flickr 的图像数组未按预期顺序显示
- j查询图像预加载顺序
- 如何使用 HTML/javascript 以预定义的顺序加载图像
- 将图像顺序拖放到数据库MVC中后保存
- 在 html 中按顺序自动加载一系列图像
- jquery文档就绪侦听器与图像加载;执行顺序
- 我怎样才能让多个图像在不同的位置(使用abolute)按顺序无限淡入和淡出
- kineticJS按顺序加载图像(并设置fillPatternImg)不透明度补间不起作用
- jQuery在JSON抓取后按顺序淡入淡出图像
- 更改图像的顺序并在数据库中更新
- 刷新时图像更改的顺序
- 按顺序加载图像,有延迟,无脚本回退
- 如何更改单击时HTML元素(图像)的顺序
- 单击按钮更改图像的顺序
- Fabric.js添加图像顺序
- 页面加载时的顺序图像加载
- 顺序图像从文件夹中的图像中淡出