用G6去完成一整個圖例的時候,當包裹它的容器知足不了包裹的需求時,咱們就須要引入縮略圖來解決問題了
縮略圖使用方式很簡單
引入插件配置就能夠了
當咱們使用多張圖片進行繪圖(G6支持使用圖片進行構圖,原理同canvas),縮略圖就可能由於圖片沒有加載出來而照成縮略圖圖片缺失html
解決方式也挺簡單
首先去加載圖片,而後再渲染canvas節點git
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代碼運行,不會在進行外部資源訪問 })