HTML5 Canvasライブラリ : ZRender

軽量なCanvasライブラリ、MVCカプセル化、データ駆動、Dom風イベントモデルを提供し、canvas描画を大きく変えます！

Architecture

MVCコアカプセル化により、図形ストレージ、ビュー描画、インタラクション制御を実現：

Stroage(M) : shapeデータのCURD管理
Painter(V) :canvas要素のライフサイクル管理、ビュー描画、ペイント、更新制御
Handler(C) :イベントインタラクション処理、完全なdomイベントシミュレーションのカプセル化を実現
shape :図形エンティティ、分割統治の図形戦略、定義・拡張可能
tool :描画拡張に関連する実用的なメソッド、ツール、スキャフォールド

特徴

シンプル

canvasの基礎知識は不要、簡潔なインターフェースメソッド、AMD標準に準拠し、学びやすく使いやすい。

require(
    ['zrender/zrender'],
    function(zrender) {
        // just init to get a zrender Instance
        var zr = zrender.init(document.getElementById('main'));
        // zr can be used now!
        ...
    }
);

データ駆動

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内の図形要素を操作できるのは、とてもクールなことです〜

zrenderのグローバルイベントに応答できるだけでなく、特定のshapeに特定のイベントを追加することもでき、その後のすべては思い通りに動作します〜

zr.addShape({
shape : 'circle',
style : {...},
    // 图形元素上绑定事件
    onmouseover : function(params) {concole.log('catch you!')}
});

// 全局事件
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't worry! Is merge!

zr.refresh();  
// Just the level 1 canvas has been refresh~

豊富な図形オプション

現在、多種多様な図形要素（円、楕円、ドーナツ、扇形、長方形、多角形、直線、曲線、ハート、水滴、パス、テキスト、画像など）が組み込まれており、統一的で豊富な図形属性があなたの個性豊かなニーズを十分に満たします！

var myShape = {
    shape : 'circle',   // sector | ring | rectangle | ...
    zlevel : 1,
    style : {
        ... // color | strokeColor | text | textFont | ... 
    },
    draggable : true
};

強力なアニメーションサポート

promise形式のアニメーションインターフェースと一般的なイージング関数を提供し、さまざまなアニメーション要件を簡単に実現します〜

var circle = {
    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();

拡張が容易

分割統治の図形定義戦略により、独自の図形要素を拡張できます。3つのインターフェースメソッド（brush、drift、isCover）を完全に実装することも、baseから派生して必要な図形の詳細のみを実装することもできます。

function MyShape() { ... }

var shape = require('zrender/shape');
shape.define('myShape', new MyShape());     // define your shape

zr.addShape({                               // and use it!
    shape : 'myShape',
    ...
});