现在位置首页 / 项目实战 /正文

zrender教程-如何搭建环境及配置

作者: IT小兵 | 2014年5月3日| 热度:℃ | 评论: |参与:

在前几篇文章中,使用echarts进行报表和人物关系图(力导向图)的设计和开发工作。echarts是基于zrender的,

zrender在百度上教程也不多。今天在这里初步想,写一个小系列,介绍zrender的搭建环境、部署及配置,深度开发等。

先看一下我做的一个小demo:

先看一下官方介绍:

MVC核心封装实现图形仓库、视图渲染和交互控制。
  1. Stroage(M) : shape数据CURD管理

  2. Painter(V) : canvase元素生命周期管理,视图渲染,绘画,更新控制

  3. Handler(C) : 事件交互处理,实现完整dom事件模拟封装

  4. shape : 图形实体,分而治之的图形策略,可定义扩展

  5. tool : 绘画扩展相关实用方法,工具及脚手架

  6. animation : 动画扩展,提供promise式的动画接口和常用缓动函数

支持一下浏览器:

  (IE8- supported by excanvas )

zrender的特色有:

1、简单:无需canvas基础,精简的接口方法,符合AMD标准,易学易用。

2、数据驱动

利用zrender绘图,你只需做的是定义图形数据,剩下的事情就交给zrender吧~

哦,对了,差点忘记告诉你,只要在你定义图形数据时设置draggable属性为true,图形拖拽就已经可用了!

3、完整的事件封装

用你再熟悉不过的dom事件模型去操作canvas里的图形元素是件很cool的事情~

你不仅可以响应zrender全局事件,你甚至可以为在特定shape上添加特定事件,后续发生的一切都会按你想的那样去运行~

4、高效的分层刷新

正如css中zlevel的作用一样,你可以定义把不同的shape分别放在不同的层中,这不仅实现了视觉上的上下覆盖,更重要的是当图形元素发生变化后的refresh将局限在发生了变化的图形层中,这在你利用zrender做各种动画效果时将十分有用,性能自然也更加出色~

5、丰富的图形选项

当前内置多种图形元素(圆形、椭圆、圆环、扇形、矩形、多边形、直线、曲线、心形、水滴、路径、文字、图片。Will be more..),统一且丰富的图形属性充分满足你的个性化需求!

6、强大的动画支持

提供promise式的动画接口和常用缓动函数,轻松实现各种动画需求~

7、易于扩展

分而治之的图形定义策略允许你扩展自己独有的图形元素,你既可以完整实现三个接口方法(brush、drift、isCover),也可以通过base派生后仅实现你所关心的图形细节。


有这么多特色,我们就开始试试吧。

第一步:代码文件夹放置:

官方下载的代码结构是这样的:

其中,比较重要的是src和doc。doc里面是实例代码和用到css、js等资源。

把zrender的代码放在asp.net项目中的结构,我是这样的:

只需把src的代码copy进去就可以了。

2、引用必要的js文件:

   <script src="zrender/asset/js/jquery.js"></script>
    <script src="zrender/asset/js/esl/esl.js"></script>

需要bootstrap样式的话,也可以引进去,这个看具体项目需要吧。

    <link href="zrender/asset/css/bootstrap.css" rel="stylesheet">
    <link href="zrender/asset/css/bootstrap-responsive.css" rel="stylesheet">

3、定义一个dom容器,放置我们需要的图形:

 <div id="main" class="main"></div>

4、好了,现在就是调用zrender提供的函数进行逻辑js的编写:

zrender包和需要的图形配置:

var zr; // 全局可用zrender对象
var domMain = document.getElementById('main');
require.config({
    packages: [
        {
            name: 'zrender',
            location: './zrender/src',
            main: 'zrender'
        }
    ]
});
var color;
var colorIdx = 0;
var width;
var height;
require(
    ['zrender', 'zrender/shape/rose', 'zrender/shape/trochoid'],
    function (zrender) {
         
        zr = zrender.init(domMain);
          color = require('zrender/tool/color');
        
          width = Math.ceil(zr.getWidth());
          height = Math.ceil(zr.getHeight());
          addjuxing();
    }
)

添加图形的函数:

function addimg(xx,yy,text) {
    // 图片
    zr.addShape({
        shape: 'image',
        style: {
            x: xx,
            y: yy,
            image: "css/16x16_0020/add.png",
            width: 20,
            height: 20,
            color: 'rgba(135, 206, 250, 0.8)',
            text: text,
            textColor: 'red'
        },
        draggable: false
    });
    
}
function addjuxing2(xx,yy,text,hh,color) {
    // 矩形
    
        zr.addShape({
            shape: 'rectangle',
            style: {
                x: xx,
                y: yy,
                width: 30,
                height: hh,
                color: color,
                text: text,
                textPosition: 'inside'
            },
            draggable: false
        });
        addimg(xx + 8, yy  , "");
   
}
function addjuxing(){
    // 矩形
    for (i = 0; i < 80; i++)
    {
        var tx = i * 90;
        var ty=height / 2;
        var coo = color.getColor(colorIdx++);
        zr.addShape({
            shape: 'rectangle',
            style: {
                x: tx,
                y: ty,
                width: 90,
                height: 30,
                color: coo,
                text: '2014-4-'+i,
                textPosition: 'inside'
            },
            draggable: true,
            ondragstart : _update,
            ondragend : _update,
            ondragenter : _update,
            ondragover : _update,
            ondragleave : _update,
            ondrop : _update
        });
        var hh2 = i * 10 + 30;
        addjuxing2(tx + 30, ty - hh2, "事件" + i, hh2, coo);
        if (i==2){
            addzhexian([tx + 40, ty - hh2], [Getxy(6)+40, ty - hh2], 100, 100);
        }
    }
    
    //addjuxing2(); 
    zr.render();
}

我这个写的比较简单,就是初始化的画几个时间轴,并用几个矩形代表发生在这个时间上的事件。

该功能我会继续完善。敬请期待。


转发注明:IT分享  或者关注我的新浪微博,或者腾讯微博,进行更多交流。谢谢

点击阅读本文所属分类的更多文章: 项目实战 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:[email protected]

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:[email protected]

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询