HTML5-Canvas-Klassenbibliothek: ZRender

Eine leichtgewichtige Canvas-Klassenbibliothek mit MVC-Kapselung und datengetriebenem Design, die ein DOM-ähnliches Ereignismodell bietet und das Canvas-Zeichnen völlig anders macht!

Architektur

Die MVC-Kernkapselung implementiert Grafik-Repository, View-Rendering und Interaktionssteuerung:

Stroage(M) : Shape-Daten-CRUD-Verwaltung
Painter(V) :Lebenszyklusverwaltung von Canvas-Elementen, View-Rendering, Zeichnen und Aktualisierungssteuerung
Handler(C) :Ereignisinteraktionsverwaltung, Implementierung einer vollständigen DOM-Ereignissimulationskapselung
shape :Grafische Entitäten, Divide-and-Conquer-Grafikstrategien, definierbar und erweiterbar
tool :Praktische Methoden, Utilities und Grundgerüste für Zeichnungserweiterungen

Funktionen

Einfach

Keine Canvas-Grundlagen erforderlich, gestraffte Schnittstellenmethoden, konform mit AMD-Standards, einfach zu erlernen und zu verwenden.

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

Datengetrieben

Beim Zeichnen mit zrender müssen Sie nur die Grafikdaten definieren, den Rest überlassen Sie zrender~

Ach ja, ich hätte fast vergessen, Ihnen zu sagen: Setzen Sie einfach die draggable-Eigenschaft auf true, wenn Sie Ihre Grafikdaten definieren, und das Ziehen von Grafiken ist bereits verfügbar!

zr.addShape({
    shape : 'circle',
    style : {
        x : 100, 
        y : 100, 
        r : 50, 
        color : 'rgba(220, 20, 60, 0.8)'
    }
});
zr.render();

Vollständige Event-Kapselung

Mit dem DOM-Event-Modell, mit dem du am besten vertraut bist, Canvas-Grafikelemente zu bedienen, ist wirklich eine coole Sache~

Du kannst nicht nur auf globale Events von zrender reagieren, du kannst sogar bestimmte Events zu bestimmten Shapes hinzufügen, und alles, was danach passiert, wird genau so ablaufen, wie du es erwartest~

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

// 全局事件
zr.on('click', function(params) {alert('Hello, zrender!')});

Effiziente geschichtete Aktualisierung

Genau wie die Rolle von zlevel in CSS kannst du verschiedene Shapes in verschiedenen Ebenen definieren. Dies erreicht nicht nur eine visuelle Überlagerung von oben nach unten, sondern, was noch wichtiger ist, wenn sich Grafikelemente ändern, wird die Aktualisierung auf die Grafikebene beschränkt, die sich geändert hat. Das wird sehr nützlich sein, wenn du zrender verwendest, um verschiedene Animationseffekte zu erstellen, und die Performance wird natürlich noch besser sein~

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~

Umfangreiche Grafikoptionen

Derzeit sind mehrere Grafikelemente integriert (Kreis, Ellipse, Ring, Sektor, Rechteck, Polygon, Linie, Kurve, Herz, Tropfen, Pfad, Text, Bild usw.), mit einheitlichen und umfangreichen Grafikattributen, um deine Personalisierungsanforderungen vollständig zu erfüllen!

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

Leistungsstarke Animationsunterstützung

Bietet Promise-basierte Animationsschnittstellen und gängige Easing-Funktionen, wodurch sich verschiedene Animationsbedürfnisse einfach umsetzen lassen~

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();

Leicht erweiterbar

Die Divide-and-Conquer-Strategie zur Grafikdefinition ermöglicht es dir, deine eigenen einzigartigen Grafikelemente zu erweitern. Du kannst entweder alle drei Schnittstellenmethoden (brush, drift, isCover) vollständig implementieren oder von base ableiten und nur die Grafikdetails implementieren, die dich interessieren.

function MyShape() { ... }

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

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