zrender学习

这个是项目总结，不适合学习

 

定义zrender初始化对象，背景是一个gif图

样式如下 ↓

 

工程里， topo.html 

画布
                #container{
                     /* width: calc(83.5% - 200px); */
                     width: calc(83.5%);  /** calc是用来设置动态值 **/
                     height: calc(99% - 30px - 1%);
                     box-sizing: border-box;
                     border: 2px solid;
                     border-color: #0C554A;
                     overflow: hidden;
                     background-color: white;
                     float: left;
                     margin-right: 0.5%;
                }

在topo.html中初始化

 

zrender初始化对象

 

 

画布背景图已经解决...现在开始学习起zrender

 

 

 

body{margin:0;}

margin控制元素外框与包含该元素的容器的边框距离。这句话让网页顶部顶到浏览器顶部，（默认是有一段空白的）。但是这么写会使网页也靠着浏览器左边，最好写成margin-top:0;margin-left:auto;

 

在topo-painter.js 324行

收到了后端数据，然后画出了zrender图像

 

步骤：先画一条母线

 

文档中初始化zrender是 : zrender.init(dom, opts)

 

现在的写法 ：  var zr = zrender.init(document.getElementById('canvas')),

 

这样就得到了一个初始化的zrender对象，可以进行各种操作。

刚刚一直没有反应是因为那个傻逼用了自己定义的zrender.js。草他妈一直以为的是官方的js,别人拷过来的项目也不管用才知道的是那个傻逼把js改了。草他妈

 

要注意引入的js包，看一下成功代码

 

     

     

     

     

     html, body{margin: 0;  height:100%; overflow-x: hidden; overflow-y: hidden;}

                #container{

                     /* width: calc(83.5% - 200px); */

                     width: calc(83.5%);  /** calc是用来设置动态值 **/

                     height: calc(99% - 30px - 1%);

                     box-sizing: border-box;

                     border: 2px solid;

                     border-color: #0C554A;

                     overflow: hidden;

                     background-color: white;

                     float: left;

                     margin-right: 0.5%;

                }          

     

     

     

           

     

     

           //alert("123");

           var con = document.getElementById("container");

           //alert(con.getHeight());

         var zr = zrender.init(document.getElementById('canvas')),

          //window.alert("123"),

          h = zr.getHeight(),

             w = zr.getWidth(),

             line = new zrender.Line({

             shape: {

                 x1: 350,

                 y1: 100,

                 x2: 350,

                 y2: 600

             },

             style: {

                 stroke: 'black',

                 lineWidth: 5

             },

             draggable:true

         });

         zr.add(line);

     

 

前台已经出现一个可拖拽的竖线。

第一个问题，背景是 container , zrender是canvas .container的宽高设置的动态值，canvas也要设置动态值，canvas不设置宽高，没有东西显示

canvas是画布，所有东西要放到里面才能显示。

 

那些器材设备先不管，

先把主要线路画出来...

比如谁的谁的子，谁是什么东西，赶紧画出来，还有递归，要重新写。 逻辑没问题。但是遍历，只遍历到第一个的时候，就跳到下一个了

花了将近一个小时，不出图，只是因为格式写错了，height:100px;  后面跟的是分号，我写的逗号。好无语

 

 

拿到了zrender初始化对象，现在要做的就是如何从后台拿到数据，传给zrender自动绘图。

 

zrender是怎么初始化，然后接收数据，最后在成图的呢？ 请我们拭目以待。

 

topo-painter.js  361行，onload页面加载函数，页面加载完整之后，对zrender进行初始化。

1.获得背景的宽高，对zrender进行同 宽高 -2 放置

2.定义了鼠标选中移动，按下，弹起，滚轮的放大放小事件

（前端不是我的主力，没必要把精力放在这里，如何画出图，创造最效率的后台，是我的重心）

 

...

现在是自己画，不需要加绕组什么的，先把图做出来。，然后再添加素材

1.传什么数据过来，可以传List吗，还是传什么？ //已经传了一个List过来，就要进行参数设置了

2.现在桌面已经成图了。可以慢慢先画着

 

 

 

当前有两个问题，

1.前面的是一个的，就会导致，后面会增长很多

 

 

2.当前上面是一个的，也会导致下面的长度增加

 

 

添加动画

绘制一条虚线，加上动画,在0.5秒的时间里绘制从0%到100%

 

 

 

 var line = new zrender.Line({  

       shape: {  

            x1:10,  

            y1:10,  

           x2:100,  

           y2:10,  

            percent:0  

        },  

        style: {  

            stroke:'#434348',  

            lineDash:[5,5]

        }

    });

    line.animate('shape', false)  

       .when(500, {  

           percent: 1  

        }).start();  

    zr.add(line);

 

当前就是一个动画，只不过上面的是虚线的动画