怎么用konva循环每一张图片 并把每一张图片添加到我的每一个组里面呢
时间: 2024-05-02 15:19:50 浏览: 15
您可以使用konva中的forEach方法来循环每一张图片,并结合addGroup方法将每一张图片添加到每一个组中。示例代码如下:
```js
var stage = new Konva.Stage({
container: 'container',
width: 500,
height: 500
});
var layer = new Konva.Layer();
stage.add(layer);
var group1 = new Konva.Group();
layer.add(group1);
var group2 = new Konva.Group();
layer.add(group2);
var images = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
images.forEach(function(imgUrl) {
var imageObj = new Image();
imageObj.onload = function() {
var image = new Konva.Image({
image: imageObj,
width: 100,
height: 100
});
group1.add(image);
group2.add(image.clone());
layer.draw();
};
imageObj.src = imgUrl;
});
```
在上面的代码中,我们使用forEach方法循环每一个图片,并在每个组中添加这些图片。注意,我们必须使用clone方法来为每个组创建一个新的图片对象,因为一个图片只能存在一个位置。
相关推荐
![.zip](https://img-home.csdnimg.cn/images/20210720083646.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)