Shulou(Shulou.com)06/03 Report--

In this issue, the editor will bring you something about ZRender in the HTML5 Canvas class library. The article is rich in content and analyzes and narrates it from a professional point of view. I hope you can get something after reading this article.

A lightweight Canvas class library, MVC encapsulation, data-driven, provides a Dom-like event model, so that canvas drawing is very different!

Architecture

MVC core encapsulates graphics repository, view rendering and interactive control:

Stroage (M): shape data CURD Management

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

Handler (C): event interaction processing to achieve complete dom event simulation encapsulation

Shape: graphical entity, divide and conquer graphic strategy, can define extension

Tool: practical methods, tools and scaffolding related to painting extension

Zrender

Special features

simple

No canvas foundation, simplified interface method, in line with AMD standards, easy to learn and use.

Require (

['zrender/zrender']

Function (zrender) {

/ / justinittogetazrenderInstance

Varzr=zrender.init (document.getElementById ('main'))

/ / zrcanbeusednow!

...

}

)

Data driven

With zrender drawing, all you need to do is define the graphic data, and leave the rest to zrender.

Oh, by the way, I almost forgot to tell you that as long as you set the draggable property to true when you define the graphic data, the graphic drag and drop will be 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 is a very cool thing to use the dom event model that you are familiar with to manipulate the graphical elements in canvas.

Not only can you respond to zrender global events, you can even add specific events to a specific shape, and everything that happens later will run as you want.

Zr.addShape ({

Shape:'circle'

Style: {...}

/ / bind events on graphic elements

Onmouseover:function (params) {concole.log ('catchyouths')}

})

/ / Global event

Zr.on ('click',function (params) {alert (' Hellodirection zrenderstories')})

Efficient hierarchical refresh

Just like the role of zlevel in css, you can define to put different shape in different layers, which not only realizes the visual coverage, but more importantly, when the graphic elements have changed, the refresh will be limited to the changed graphics layer, which will be very useful when you use zrender to do all kinds of animation effects, and the performance will naturally be better.

Zr.addShape (shapeA); / / shapeA.zlevel=0; (default)

Zr.addShape (shapeB); / / shapeB.zlevel=1

Zr.render ()

Zr.modShape (shapeB.id, {color:'red'})

/ / dondontworryworthy Ismerge!

Zr.refresh ()

/ / Justthelevel1canvashasbeenrefresh~

Rich graphics options

Currently built-in a variety of graphic elements (circle, oval, torus, fan, rectangle, polygon, straight line, curve, heart, water drop, path, text, picture, etc.), unified and rich graphic attributes fully meet your personalized needs!

VarmyShape= {

Shape:'circle',//sector | ring | rectangle |...

Zlevel:1

Style: {

... / / color | strokeColor | text | textFont |.

}

Draggable:true

}

Powerful animation support

Provide promise-style animation interface and common ease function, easy to achieve a variety of animation needs.

Varcircle= {

Shape:'circle'

Id:zr.newShapeId ()

Style: {

X:0

Y:0

R:50

}

}

Zr.addShape (circle)

Zr.animate (circle.id)

.when (1000, {

Position: [100100]

})

.when (2000, {

Rotation: [Math.PI*2,0,0]

})

.start ()

Easy to expand

The divide-and-conquer graphics definition strategy allows you to extend your own unique graphic elements, either to fully implement the three interface methods (brush, drift, isCover), or to derive only the graphic details you care about through base.

FunctionMyShape () {...}

Varshape=require ('zrender/shape')

Shape.define ('myShape',newMyShape ()); / / defineyourshape

Zr.addShape ({/ / anduseit!

Shape:'myShape'

...

})

The above is the ZRender in the HTML5 Canvas class library shared by the editor. If you happen to have similar doubts, you might as well refer to the above analysis to understand. If you want to know more about it, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.