html5利用canvas绘画二级树形结构图的示例


Posted in HTML / CSS onSeptember 27, 2017

上周需要做一个把页面左侧列表内容拖拽到右侧区域,并且绘制成关系树的功能。

看了设计图,第一反应是用canvas绘制关系线。

吭哧吭哧搞定这个功能后,发现用canvas绘图,有一个很严重的缺陷。那就是如果左侧关系特别多,需要绘制成百上千条时,而canvas画布的宽高在写dom的时候就已声明。关系很多的情况下,无法使用canvas。

不过还是记录一下研究成果。

下面是设计图:

html5利用canvas绘画二级树形结构图的示例

做出效果如下:

html5利用canvas绘画二级树形结构图的示例

html、css代码就不贴了。 js主要用到了拖拽、canvas绘制。

function startDrag(ev) {
    ev.dataTransfer.setData("Text",ev.target.innerText);
}

function allowDrop(ev) {
    ev.preventDefault();
}

function decideDrop(ev) {
    ev.preventDefault();
    var length = $('.main-target').length;
    if(length == 0){
        dropToMain(ev);
    }else {
        dropToRelate(ev);
    }
}

function dropToMain(ev) {
    var data=ev.dataTransfer.getData("Text");
    var _html = '<div class="main-target">' + data + '</div>';
    $('.main-target-wrap').width('auto').append(_html);
}

function dropToRelate(ev) {
    //画关系线
    drawLineOne(document.getElementById('canvasOne'), 'begin');
    drawLineOne(document.getElementById('canvasTwo'), 'end');

    //插入图片 以及图片初始化点击事件
    var _img = $('<img src="inner.png">');
    $('.imgBox').append(_img);
    _img.click(showRelationBox);
    //写入数据
    var data = ev.dataTransfer.getData('Text');
    var _html = '<div class="item-text">' + data + '</div>';
    $('.relation-text-box').append(_html);
}

以上是拖拽的方法,我也是一边看菜鸟教程,一边写出的拖拽方法。

function drawLineOne(canvas, flag) {
    var context = canvas.getContext('2d');
    var position = {};
    if(flag == "begin"){
        position = getCanvasOnePosition();
    }else {
        position = getCanvasTwoPosition();
    }
    context.beginPath();
    context.moveTo(position.beginX, position.beginY);
    context.lineTo(position.endX, position.endY);
    if(position.endX2 && position.endY2){
        context.lineTo(position.endX2, position.endY2);
    }
    context.strokeStyle = "#333";
    context.stroke();
}

/**
 * 左侧关系线
 * @returns {{beginX: *, beginY: *, endX: *, endY: *}}
 */
function getCanvasOnePosition() {
    var imgLength = $('.imgBox img').length;
    var beginX = (imgLength == 0) ? 0 : 77,
        beginY = (imgLength == 0) ? 15 : (15 + 60 * (imgLength-1)),
        endX = (imgLength == 0) ? 155 : 77,
        endY = 60*imgLength + 15;
    var position = {beginX: beginX, beginY: beginY, endX: endX, endY: endY};
    if(imgLength > 0){
        position.endX2 = 155;
        position.endY2 = endY;
    }
    return position;
}

function getCanvasTwoPosition() {
    var imgLength = $('.imgBox img').length;
    var endY = 15 + 60*imgLength
    return {beginX: 0, beginY: endY, endX: 155, endY: endY}
}

以上是canvas画线的方法,代码没什么难点,主要就是分析线的起始坐标麻烦一些。希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
css3实现input输入框颜色渐变发光效果代码
Apr 02 HTML / CSS
CSS3中的Media Queries学习笔记
May 23 HTML / CSS
CSS3实现文字波浪线效果示例代码
Nov 20 HTML / CSS
CSS3属性 line-clamp控制文本行数的使用
Mar 19 HTML / CSS
详解HTML5中的标签
Jun 19 HTML / CSS
html5教程实现Photoshop渐变色效果
Dec 04 HTML / CSS
html5中JavaScript removeChild 删除所有节点
May 16 HTML / CSS
html5 postMessage解决跨域、跨窗口消息传递方案
Dec 20 HTML / CSS
记一次高分屏下canvas模糊问题
Feb 17 HTML / CSS
简洁自适应404页面HTML好看的404源码
Dec 16 HTML / CSS
CSS3实现的侧滑菜单
Apr 27 HTML / CSS
td 内容自动换行 table表格td设置宽度后文字太多自动换行
Dec 24 HTML / CSS
html5新增的定时器requestAnimationFrame实现进度条功能
Dec 13 #HTML / CSS
详解使用HTML5的classList属性操作CSS类
Oct 13 #HTML / CSS
HTML5网页音乐播放器的示例代码
Nov 09 #HTML / CSS
js实现移动端H5页面手指滑动刻度尺功能
Nov 16 #HTML / CSS
HTML5实现视频直播功能思路详解
Nov 16 #HTML / CSS
基于HTML5 Canvas 实现商场监控实例详解
Nov 20 #HTML / CSS
微信浏览器左上角返回按钮拦截功能
Nov 21 #HTML / CSS
You might like
zend framework文件上传功能实例代码
2013/12/25 PHP
利用php + Laravel如何实现部署自动化详解
2017/10/11 PHP
ajax 文件上传应用简单实现
2009/03/03 Javascript
jquery 利用show和hidden实现级联菜单示例代码
2013/08/09 Javascript
原生JavaScript实现合并多个数组示例
2014/09/21 Javascript
js实现C#的StringBuilder效果完整实例
2015/12/22 Javascript
分享js粘帖屏幕截图到web页面插件screenshot-paste
2020/08/21 Javascript
jQuery EasyUI学习教程之datagrid点击列表头排序
2016/07/09 Javascript
tab栏切换原理
2017/03/22 Javascript
layui分页效果实现代码
2017/05/19 Javascript
Vue实例中生命周期created和mounted的区别详解
2017/08/25 Javascript
基于百度地图api清除指定覆盖物(Overlay)的方法
2018/01/26 Javascript
vue实现点击当前标签高亮效果【推荐】
2018/06/22 Javascript
pycharm 使用心得(三)Hello world!
2014/06/05 Python
python递归打印某个目录的内容(实例讲解)
2017/08/30 Python
Python把csv数据写入list和字典类型的变量脚本方法
2018/06/15 Python
详解Python网络框架Django和Scrapy安装指南
2019/04/01 Python
django页面跳转问题及注意事项
2019/07/18 Python
基于python2.7实现图形密码生成器的实例代码
2019/11/05 Python
Python 排序最长英文单词链(列表中前一个单词末字母是下一个单词的首字母)
2020/12/14 Python
Python 利用argparse模块实现脚本命令行参数解析
2020/12/28 Python
英国领先的酒类网上商城:TheDrinkShop
2017/03/16 全球购物
纽约家具、家居装饰和地毯店:ABC Carpet & Home
2017/06/21 全球购物
Kaufmann Mercantile官网:家居装饰、配件、户外及更多
2018/09/28 全球购物
The Athlete’s Foot新西兰:新西兰最大的运动鞋零售商
2019/12/23 全球购物
shallow copy和deep copy的区别
2016/05/09 面试题
保安自我鉴定范文
2013/12/08 职场文书
后勤部经理岗位职责
2014/02/23 职场文书
2014年道德讲堂实施方案
2014/03/05 职场文书
安全协议书
2014/04/23 职场文书
小学开学标语
2014/07/01 职场文书
日语系毕业求职信
2014/07/27 职场文书
小学生关于梦想的演讲稿
2014/08/22 职场文书
纪检干部先进事迹材料
2014/08/23 职场文书
在职证明格式样本
2015/06/15 职场文书
如何使用Tkinter进行窗口的管理与设置
2021/06/30 Python