Easy Tutorial
❮ Hdfs Cluster Cpp Header ❯

HTML5 Canvas Library: ZRender

Category Programming Technology

A lightweight Canvas library, MVC encapsulation, data-driven, provides a DOM-like event model, making canvas drawing different!

Architecture

MVC core encapsulation implements graphic storage, view rendering, and interaction control:

-Storage(M): Shape data CURD management

-Painter(V): Canvas element lifecycle management, view rendering, painting, update control

-Handler(C): Event interaction handling, complete DOM event simulation encapsulation

-Shape: Graphic entities, divide-and-conquer graphic strategy, extensible

-Tool: Practical methods, tools, and scaffolding related to painting extensions

Features

Simple

No canvas basics required, concise interface methods, compliant with AMD standards, easy to learn and use.

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

Data-Driven

Using zrender for drawing, you only need to define the graphic data, and zrender will take care of the rest.

Oh, and by the way, almost forgot to tell you, just set the draggable attribute to true when defining your graphic data, and the shape dragging is already available!

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

Complete Event Encapsulation

It's cool to operate on graphic elements in canvas using the familiar DOM event model.

You can not only respond to zrender global events, but also add specific events to specific shapes, and everything that happens next will run as you expect.

zr.addShape({
shape : 'circle',
style : {...},
    // Bind events on graphic elements
    onmouseover : function(params) {console.log('catch you!')}
});

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

Efficient Layered Refresh

Just like the role of z-index in CSS, you can define different shapes on different layers, which not only achieves visual overlay but also limits the refresh to the layer where the graphic element changes, which is very useful when you use zrender for various animations, and performance is naturally better.

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

zr.modShape(shapeB.id, {color:'red'}); 
// Don't worry! It's merge!

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

Rich Graphic Options

Currently includes various built-in graphic elements (circle, ellipse, ring, sector, rectangle, polygon, line, curve, heart, droplet, path, text, image, etc.), unified and rich graphic attributes fully meet your personalized needs!

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

Powerful Animation Support

Provides promise-style animation interfaces and common easing functions, easily achieving various animation needs.

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

Easy to Extend

The divide-and-conquer strategy for graphic definitions allows you to extend your unique graphic elements. You can either fully implement the three interface methods (brush, drift, isCover) or derive from base and only implement the graphic details you care about.

function MyShape() { ... }

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

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

Related Resources

** Share My Notes

Cancel

-

-

-

❮ Hdfs Cluster Cpp Header ❯