标签:
http://www.just.org.cn/zrender/index.html
https://github.com/ecomfe/zrender
目录结构:
|-project
|-demo
|-js
|-main.js
|-index.html
|-libs
|-requirejs
|-require.js
|-zrender
|-src
|-zrender.js
...
src下面省略了很多, 其实就是将"https://github.com/ecomfe/zrender"中src下面所有文件夹和文件.
自己写的就是 main.js 和 index.html
main.js
require.config({ packages: [ { name: ‘zrender‘, location: ‘../../libs/zrender/src‘, main: ‘zrender‘ } ] }); require( [ ‘zrender‘, ‘zrender/animation/animation‘, ‘zrender/shape/Circle‘ ], function(zrender, Animation, CircleShape){ // var zr = zrender.init( document.getElementById(‘Main‘) ); var circle = new CircleShape({ position: [100, 100], scale: [1, 1], style: { x: 0, y: 0, r: 50, brushType: ‘fill‘, color: ‘rgba(33, 222, 10, 0.8)‘, lineWidth: 5, text: ‘circle‘, textPosition: ‘inside‘ }, draggable: true }); zr.addShape(circle); zr.render(); } );
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>zRender demo</title> <script type="text/javascript" src="../libs/requirejs/require.js" data-main="./js/main.js"></script> </head> <body> <div id="Main" style="width:600px;height:400px;"></div> </body> </html>
效果如下:
标签:
原文地址:http://www.cnblogs.com/juedui0769/p/5084993.html