G6踩坑日記

用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代碼運行,不會在進行外部資源訪問
})

有想法的能夠去玩玩
codepen地址
G6文檔
先加班,有時間補充github

相關文章
相關標籤/搜索