G6踩坑日记

it2022-05-09  32

用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


最新回复(0)