码迷,mamicode.com
首页 > 其他好文 > 详细

使用百度zrender, demo抛砖引玉.

时间:2015-12-29 11:09:44      阅读:230      评论:0      收藏:0      [点我收藏+]

标签:

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>

效果如下:

技术分享

 

使用百度zrender, demo抛砖引玉.

标签:

原文地址:http://www.cnblogs.com/juedui0769/p/5084993.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!