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>
效果如下:
时间： 2024-10-09 12:58:51