html5利用canvas绘画二级树形结构图教程
2017-10-09 16:14:11文章来源:点点软件园热度:0
本文主要介绍了关于html5利用canvas绘画二级树形结构图教程的相关资料,文中通过示例代码介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面跟着小编一起来学习学习吧。更多最新IT资讯尽在金顺软件园http://www.jinshun168.com/
需要做一个把页面左侧列表内容拖拽到右侧区域,并且绘制成关系树的功能。看了设计图,第一反应是用canvas绘制关系线。
吭哧吭哧搞定这个功能后,发现用canvas绘图,有一个很严重的缺陷。那就是如果左侧关系特别多,需要绘制成百上千条时,而canvas画布的宽高在写dom的时候就已声明。关系很多的情况下,无法使用canvas。
不过还是记录一下研究成果。
下面是设计图:
做出效果如下:
html、css代码就不贴了。 js主要用到了拖拽、canvas绘制。
以上是拖拽的方法,我也是一边看菜鸟教程,一边写出的拖拽方法。
以上是canvas画线的方法,代码没什么难点,主要就是分析线的起始坐标麻烦一些。
金顺软件园小编推荐:
以上,就是金顺软件园小编给大家带来的html5利用canvas绘画二级树形结构图教程全部内容,希望对大家有所帮助!
编辑:张同学