Una librería de Canvas ligera, con encapsulación MVC, orientada a datos, que proporciona un modelo de eventos similar a DOM, ¡haciendo que el dibujo en canvas sea muy diferente!

Architecture

El encapsulado central de MVC implementa el repositorio de gráficos, el renderizado de vistas y el control de interacción:

  • Stroage(M) : Gestión CURD de datos de shape
  • Painter(V) :Gestión del ciclo de vida de los elementos canvas, renderizado de vistas, dibujo y control de actualizaciones
  • Handler(C) :Procesamiento de eventos e interacción, que implementa una encapsulación completa de simulación de eventos DOM
  • shape :Entidades gráficas, estrategia de gráficos de divide y vencerás, con extensiones personalizables
  • tool :Métodos prácticos, herramientas y andamiaje relacionados con la extensión del dibujo
zrender

Características

Simple

No necesitas conocimientos previos de canvas, métodos de interfaz simplificados, cumple con el estándar AMD, fácil de aprender y usar.

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

Orientado a datos

Con zrender, para dibujar solo necesitas definir los datos del gráfico; ¡el resto lo dejas en manos de zrender!

¡Ah, por cierto, casi se me olvidaba decirte que solo tienes que establecer la propiedad `draggable` en `true` al definir los datos del gráfico, y el arrastre de gráficos ya estará disponible!

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

Encapsulación completa de eventos

Usar el modelo de eventos DOM que conoces perfectamente para manipular elementos gráficos en canvas es algo muy genial.

No solo puedes responder a los eventos globales de zrender, incluso puedes agregar eventos específicos en un shape concreto; todo lo que suceda después funcionará como deseas.

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

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

Refresco por capas eficiente

Igual que la función de `zlevel` en CSS, puedes definir y colocar diferentes shapes en diferentes capas. Esto no solo logra la superposición visual de arriba hacia abajo, sino que, lo que es más importante, el `refresh` después de que un elemento gráfico cambia se limitará a la capa de gráficos que cambió. Esto será muy útil cuando uses zrender para varios efectos de animación, y el rendimiento será naturalmente mejor.

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~

Amplias opciones de gráficos

Actualmente incluye múltiples elementos gráficos (círculo, elipse, anillo, sector, rectángulo, polígono, línea, curva, corazón, gota, path, texto, imagen, etc.). Atributos gráficos unificados y ricos satisfacen plenamente tus necesidades personalizadas.

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

Potente soporte de animaciones

Proporciona una interfaz de animación de tipo promise y funciones de easing comunes, lo que facilita la implementación de varios requisitos de animación.

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

Fácil de extender

La estrategia de definición de gráficos de divide y vencerás te permite extender tus propios elementos gráficos. Puedes implementar completamente los tres métodos de interfaz (`brush`, `drift`, `isCover`), o derivar de `base` e implementar solo los detalles gráficos que te interesan.

function MyShape() { ... }

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

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

Recursos relacionados