zrender初步理解

很火的echarts底層也是采用了這個;

1. 底層是canvas畫圖,比較快相對於svg, 寫自己類圖包含hover等操作注意分層

2. canvas畫布各個瀏覽器支持大小有限;

3. 實現畫布無限大, 采用了group概念, 所有元素綁定group, 鼠標滾動計算group的position位置;

4. 畫布上放大縮小則是采用了數學上的矩陣概念, 詳情可以自己搜索矩陣縮放等功能;

5. 接上一條, 放大縮小如果要針對可視區中心的話, 請使用animate的position, scale, origin, 此時注意可視區計算, origin盡量使用原點縮放, 然后移動到之前的中心;

6. 縮略圖依賴上一條得到的可視區域位置, 按照比例1 重新繪制, 此時元素較多會存在卡頓, 可采用局部重繪, 但是目前還沒嘗試

7. 定義自己的類, 比如線, 采用new group, 然后采用相對於最開始的group的position放置

8. 拖動的那個畫布, 也是改變group的position即可; 注意鼠標樣式需要重寫mousemove事件, zrender內置pointer樣式, 拖動會還原;

9.畫布內容圖片下載, 采用以下代碼即可; 注意瀏覽器限制大小[畫布大小以及圖片限制]

render.painter.getRenderedCanvas({
        backgroundColor: 'white',
    }).toBlob((blob) => {
    const a = document.createElement('a');
    a.download = fileName;
    a.href = window.URL.createObjectURL(blob); 
    a.click();
　　// 注意刪除a
}, 'image/png');