G6踩坑日记

最新推荐文章于 2023-07-20 16:05:15 发布

weixin_30415801

最新推荐文章于 2023-07-20 16:05:15 发布

阅读量347

点赞数

CC 4.0 BY-SA版权

文章标签：开发工具

原文链接：http://www.cnblogs.com/mxs-blog/p/9911360.html

用G6去完成一整个图例的时候，当包裹它的容器满足不了包裹的需求时，我们就需要引入缩略图来解决问题了
缩略图使用方式很简单
引入插件配置就可以了
当我们使用多张图片进行绘图（G6支持使用图片进行构图，原理同canvas），缩略图就可能因为图片没有加载出来而照成缩略图图片缺失

解决方式也挺简单
首先去加载图片，然后再渲染canvas节点

const mulitImg = [
        'https://gw.alipayobjects.com/zos/rmsportal/FzzhqzypSpatvIQEYBOJ.png',
        'https://gw.alipayobjects.com/zos/rmsportal/FGzsRAmHzqJYgjXrpVDt.png',
    ];
 let promiseAll = [], img = [], imgTotal = mulitImg.length;
 for(let i = 0 ; i < imgTotal ; i++){
     promiseAll[i] = new Promise((resolve)=>{
         img[i] = new Image()
         img[i].src = mulitImg[i]
         img[i].onload = () => {
              resolve(img[i])
         }
     })
 }
 Promise.all(promiseAll).then((img)=>{
    // 利用promise来进行图片的异步加载
        图片也可以使用base64编码进行加载，base64格式的图片会跟着js代码运行，不会在进行外部资源访问
})

有想法的可以去玩玩
codepen地址
 G6文档
先加班，有时间补充

转载于:https://www.cnblogs.com/mxs-blog/p/9911360.html