Легковесная библиотека классов Canvas с инкапсуляцией MVC и дизайном, управляемым данными, предоставляющая событийную модель, подобную Dom, что делает рисование на canvas совершенно другим!

Архитектура

Ядро инкапсуляции MVC реализует хранилище графики, отрисовку представления и управление взаимодействием:

  • Stroage(M) : Управление CRUD данными фигур
  • Painter(V) :Управление жизненным циклом элементов Canvas, отрисовка представления, рисование и управление обновлением
  • Handler(C) :Обработка событийного взаимодействия, реализующая полную инкапсуляцию эмуляции dom-событий
  • shape :Графические сущности, стратегии «разделяй и властвуй» для графики, определяемые и расширяемые
  • tool :Практические методы, утилиты и каркас для расширения рисования
zrender

Особенности

Простая

Не требуется знания 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, но даже добавлять конкретные события к конкретным фигурам, и всё, что происходит после этого, будет работать именно так, как вы ожидаете~

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

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

Эффективное послойное обновление

Подобно роли zlevel в css, вы можете определять разные фигуры на разных слоях. Это не только обеспечивает визуальное наложение сверху вниз, но, что важнее, когда графические элементы меняются, обновление будет ограничено тем графическим слоем, который изменился. Это будет очень полезно, когда вы используете 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~

Богатые графические возможности

Сейчас встроено множество графических элементов (круг, эллипс, кольцо, сектор, прямоугольник, многоугольник, линия, кривая, сердце, капля, path, текст, изображение и т. д.), с едиными и богатыми графическими атрибутами, которые полностью удовлетворяют ваши потребности в персонализации!

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

Легко расширять

Стратегия определения графики «разделяй и властвуй» позволяет вам расширять набор собственными уникальными графическими элементами. Вы можете либо полностью реализовать три метода интерфейса (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',
    ...
});

Связанные ресурсы