开源框架Zrender初始化机制

GitHub上的个一个开源HTML5框架，可以画出效果非常酷炫的图形，不需要自己使用画布

今天尝试在项目中引用

因为之前没有用过类似的动态加载JS机制，并且在文档中写的并不是很清晰，

所以把引用的方法记录下来，供大家参考

首先在head中引用两个JS文件

//最基本的就是这两个JS文件，其他JS文件是通过动态加载的方式

接下来完成一个最简单的程序

首先在body中加一个div,ID是Main

所以其他不需要，直接开始写JS

这一步比较关键，在文档中没有明确说明，有说明也比较模糊

初始化配置动态路径

    require.config({
        packages: [
            {
                name: 'zrender',
                location: 'src',
                main: 'zrender'
            }
        ]
        });

注意的是路径一定要选择正确，不然无法加载其他的JS项目

配置完之后，我们来尝试画一个最简单的图形

    require(
            [
                "zrender/zrender",
                 "zrender/shape/Rectangle"
            ],
            function (zrender, RectangleShape) {
                // 初始化zrender
                var zr = zrender.init(document.getElementById("Main"));
                var RectangleObj = new RectangleShape({
                    style: {
                        x: 100,
                        y: 100,
                        width: 100,
                        lineWidth: 5,
                        height: 100,
                        radius: 10,
                        brushType: 'stroke',
                        strokecolor: "#000000",
                    },
                    draggable: true,
                    clickable: true
                });

这里动态引用了zrender.js （必须）和Rectangle.js ，具体的属性什么的在文档中说明的比较清晰，这里没有加事件，实际还可以添加各种事件

最后只需要把这么一个矩形画出来

 zr.addShape(RectangleObj);
 zr.render();

两句话就可以了

当然zrender的功能不止画图而已，大家可以继续探索。