这个是项目总结，不适合学习
<div id="canvas" style="background-image:url(./canvasbg.gif)"></div>
定义zrender初始化对象，背景是一个gif图
样式如下 ↓
工程里， topo.html
<div id = "container">
画布
#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中初始化
<div id="div-canvas" style="overflow-x: hidden; overflow-y: hidden;"></div>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包，看一下成功代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>zrender测试</title>
<script type="text/javascript" src="js/zrender.js"></script>
<script type="text/javascript" src="js/esl.js"></script>
<script type="text/javascript" src="js/prototype.min.js"></script>
<style type="text/css">
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%;
}
</style>
</head>
<body>
<!-- 定义一个zrender初始化的对象 -->
<div id ="container" >
<div id="canvas" class="canvas" style="height:100px;width:100px;" ></div>
</div>
<script type="text/javascript">
//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);
</script>
</body>
</html>
前台已经出现一个可拖拽的竖线。
第一个问题，背景是 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);
当前就是一个动画，只不过上面的是虚线的动画
扫一扫
752
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
