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实现毛玻璃效果示例源码
Sep 25 HTML / CSS
CSS3动画效果回调处理详解
Dec 10 HTML / CSS
html5 localStorage本地存储_动力节点Java学院整理
Jul 06 HTML / CSS
HTML5 Canvas标签使用收录
Jul 07 HTML / CSS
html5使用canvas绘制一张图片
Dec 15 HTML / CSS
在canvas上实现元素图片镜像翻转动画效果的方法
Mar 20 HTML / CSS
吃透移动端 1px的具体用法
Dec 16 HTML / CSS
html5 canvas手势解锁源码分享
Jan 07 HTML / CSS
详解canvas.toDataURL()报错的解决方案全都在这了
Mar 31 HTML / CSS
canvas绘制树形结构可视图形的实现
Apr 03 HTML / CSS
关于canvas.toDataURL 在iOS运行失败的问题解决
Sep 16 HTML / CSS
CSS3 制作的书本翻页特效
Apr 13 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
PHP获取文件夹大小函数用法实例
2015/07/01 PHP
Yii2选项卡的简单使用
2017/05/26 PHP
JSON PHP中,Json字符串反序列化成对象/数组的方法
2018/05/31 PHP
PHP实现将上传图片自动缩放到指定分辨率,并保持清晰度封装类示例
2019/06/17 PHP
用PHP做了一个领取优惠券活动的示例代码
2019/07/05 PHP
ThinkPHP 5.x远程命令执行漏洞复现
2019/09/23 PHP
jQuery登陆判断简单实现代码
2013/04/21 Javascript
seaJs的模块定义和模块加载浅析
2014/06/06 Javascript
js类定义函数时用prototype与不用的区别示例介绍
2014/06/10 Javascript
JavaScript实现动态删除列表框值的方法
2015/08/12 Javascript
Bootstrap每天必学之前端开发框架
2015/11/19 Javascript
JavaScript String 对象常用方法总结
2016/04/28 Javascript
JavaScript定义数组的三种方法(new Array(),new Array('x','y')
2016/10/04 Javascript
JavaScript字符集编码与解码详谈
2017/02/02 Javascript
JavaScript中最常见的三个面试题解析
2017/03/04 Javascript
Three.js实现绘制字体模型示例代码
2017/09/26 Javascript
angularJS实现动态添加,删除div方法
2018/02/27 Javascript
js如何找出字符串中的最长回文串
2018/06/04 Javascript
ES6基础之默认参数值
2019/02/21 Javascript
jQuery设置下拉框显示与隐藏效果的方法分析
2019/09/15 jQuery
详解vue-template-admin三级路由无法缓存的解决方案
2020/03/10 Javascript
python之wxPython应用实例
2014/09/28 Python
使用Python脚本将绝对url替换为相对url的教程
2015/04/24 Python
Python3调用微信企业号API发送文本消息代码示例
2017/11/10 Python
使用python对文件中的单词进行提取的方法示例
2018/12/21 Python
Python设计模式之代理模式实例详解
2019/01/19 Python
Python 通过截图匹配原图中的位置(opencv)实例
2019/08/27 Python
Python安装及Pycharm安装使用教程图解
2019/09/20 Python
anaconda安装pytorch1.7.1和torchvision0.8.2的方法(亲测可用)
2021/02/01 Python
加拿大时尚少女服装品牌:Garage
2016/10/10 全球购物
Parts Express:音频、视频和扬声器的第一来源
2017/04/25 全球购物
德国古洛迷亚百货官网:GALERIA Kaufhof
2017/06/20 全球购物
临床医学专业求职信
2014/08/08 职场文书
道德模范事迹材料
2014/12/20 职场文书
技术员岗位职责
2015/02/04 职场文书
安全生产协议书
2016/03/22 职场文书