gpt4 book ai didi

javascript - FabricJs 多个 Canvas 多次加载同一图像

转载 作者:行者123 更新时间:2023-11-30 14:43:38 26 4
gpt4 key购买 nike

我有一个从 1 到 2 的循环,在循环内我在屏幕上创建了 2 个 Canvas 并将它们存储在一个对象中,然后在每个 Canvas 上加载相同的 2 个图像,但图像只出现在最后一个 Canvas 上.为什么它没有加载到两个 Canvas 上?还有一个文本对象可以在同一循环中的两个 Canvas 上工作。

示例代码,它实际上只是将图像添加到屏幕上的第二个 Canvas 并忽略第一个,但是文本对象被添加到两个?

var canvases = {};
var imageUrls = ['url here','url 2 here'];
for(var p = 1; p <= 2; p++){
canvases[p] = new fabric.Canvas('canvas-element-'+p);
var t = new fabric.Text('Testing',{top:600,left:0});
canvases[p].add(t);
canvases[p].renderAll();
for(var i in imageUrls){
fabric.Image.fromUrl(imageUrls[i],function(img){
img.set({
width:500,
height:500,
top:0,
left:0
});
canvases[p].add(img);
canvases[p].renderAll();
}
});
}

最佳答案

  1. imageUrls数组包含您在 1 和 2 访问的 0 和 1 位置的图像。
  2. fabric.Image.fromUrl函数名称是 fabric.Image.fromURL

  3. 因为它是一个加载图像的异步函数,所以您需要保留在自调用函数中或简单地使用 let在 for 循环中 for (let p = 1; p <= 2; p++) {

var canvases = {};
var imageUrls = ['', 'https://via.placeholder.com/300x300?text=canvas1', 'https://via.placeholder.com/300x300?text=canvas2'];
for (var p = 1; p <= 2; p++) {
canvases[p] = new fabric.Canvas('canvas-element-' + p);
var t = new fabric.Text('Testing', {
top: 600,
left: 0
});
canvases[p].add(t);
canvases[p].renderAll();
(function(index) {
fabric.Image.fromURL(imageUrls[p], function(img) {
img.set({
width: 500,
height: 500,
top: 0,
left: 0
});
canvases[index].add(img);
canvases[index].renderAll();
});
})(p);
}
canvas{
border :2px solid #000
}
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id='canvas-element-1' width=300 height=300></canvas>
<canvas id='canvas-element-2' width=300 height=300></canvas>

关于javascript - FabricJs 多个 Canvas 多次加载同一图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49298474/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com