G6踩坑日記

用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文檔
先加班，有時間補充