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
ZRender Download: https://github.com/ecomfe/zrender
ZRender Official Website: http://ecomfe.github.io/zrender/
HTML5 Canvas Tutorial: https://www.tutorialpro.org/html/html5-canvas.html
** Share My Notes
-
-
-