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>
效果如下:
