HTML5 Canvas類庫中的ZRender什么

這期內容當中小編將會給大家帶來有關HTML5 Canvas類庫中的ZRender什么，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

　　一個輕量級的Canvas類庫，MVC封裝，數據驅動，提供類Dom事件模型，讓canvas繪圖大不同！

Architecture

　　MVC核心封裝實現圖形倉庫、視圖渲染和交互控制：

　　Stroage(M):shape數據CURD管理

　　Painter(V):canvas元素生命周期管理，視圖渲染，繪畫，更新控制

　　Handler(C):事件交互處理，實現完整dom事件模擬封裝

　　shape:圖形實體，分而治之的圖形策略，可定義擴展

　　tool:繪畫擴展相關實用方法，工具及腳手架

zrender

　　特色

　　簡單

　　無需canvas基礎，精簡的接口方法，符合AMD標準，易學易用。

　　require(

　　['zrender/zrender'],

　　function(zrender){

　　//justinittogetazrenderInstance

　　varzr=zrender.init(document.getElementById('main'));

　　//zrcanbeusednow!

　　...

　　}

　　);

數據驅動

　　利用zrender繪圖，你只需做的是定義圖形數據，剩下的事情就交給zrender吧~

　　哦，對了，差點忘記告訴你，只要在你定義圖形數據時設置draggable屬性為true，圖形拖拽就已經可用了！

　　zr.addShape({

　　shape:'circle',

　　style:{

　　x:100,

　　y:100,

　　r:50,

　　color:'rgba(220,20,60,0.8)'

　　}

　　});

　　zr.render();

完整的事件封裝

　　用你再熟悉不過的dom事件模型去操作canvas里的圖形元素是件很cool的事情~

　　你不僅可以響應zrender全局事件，你甚至可以為在特定shape上添加特定事件，后續發生的一切都會按你想的那樣去運行~

　　zr.addShape({

　　shape:'circle',

　　style:{...},

　　//圖形元素上綁定事件

　　onmouseover:function(params){concole.log('catchyou!')}

　　});

　　//全局事件

　　zr.on('click',function(params){alert('Hello,zrender!')});

高效的分層刷新

　　正如css中zlevel的作用一樣，你可以定義把不同的shape分別放在不同的層中，這不僅實現了視覺上的上下覆蓋，更重要的是當圖形元素發生變化后的refresh將局限在發生了變化的圖形層中，這在你利用zrender做各種動畫效果時將十分有用，性能自然也更加出色~

　　zr.addShape(shapeA);//shapeA.zlevel=0;(default)

　　zr.addShape(shapeB);//shapeB.zlevel=1;

　　zr.render();

　　zr.modShape(shapeB.id,{color:'red'});

　　//Don'tworry!Ismerge!

　　zr.refresh();

　　//Justthelevel1canvashasbeenrefresh~

豐富的圖形選項

　　當前內置多種圖形元素（圓形、橢圓、圓環、扇形、矩形、多邊形、直線、曲線、心形、水滴、路徑、文字、圖片等），統一且豐富的圖形屬性充分滿足你的個性化需求！

　　varmyShape={

　　shape:'circle',//sector|ring|rectangle|...

　　zlevel:1,

　　style:{

　　...//color|strokeColor|text|textFont|...

　　},

　　draggable:true

　　};

強大的動畫支持

　　提供promise式的動畫接口和常用緩動函數，輕松實現各種動畫需求~

　　varcircle={

　　shape:'circle',

　　id:zr.newShapeId(),

　　style:{

　　x:0,

　　y:0,

　　r:50

　　}

　　};

　　zr.addShape(circle);

　　zr.animate(circle.id)

　　.when(1000,{

　　position:[100,100]

　　})

　　.when(2000,{

　　rotation:[Math.PI*2,0,0]

　　})

　　.start();

易于擴展

　　分而治之的圖形定義策略允許你擴展自己獨有的圖形元素，你既可以完整實現三個接口方法（brush、drift、isCover），也可以通過base派生后僅實現你所關心的圖形細節。

　　functionMyShape(){...}

　　varshape=require('zrender/shape');

　　shape.define('myShape',newMyShape());//defineyourshape

　　zr.addShape({//anduseit!

　　shape:'myShape',

　　...

　　});

上述就是小編為大家分享的HTML5 Canvas類庫中的ZRender什么了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。