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——齿轮转动关键代码
May 02 HTML / CSS
CSS3与动画有关的属性transition、animation、transform对比(史上最全版)
Aug 18 HTML / CSS
通过一张图教会你CSS3倒影的实现
Sep 26 HTML / CSS
CSS3中引入多种自定义字体font-face
Jun 12 HTML / CSS
html5 自定义播放器核心代码
Dec 20 HTML / CSS
HTML5拖放效果的实现代码
Nov 17 HTML / CSS
canvas探照灯效果的示例代码
Nov 30 HTML / CSS
使用placeholder属性设置input文本框的提示信息
Feb 19 HTML / CSS
HTML5表单验证特性(知识点小结)
Mar 10 HTML / CSS
HTML5 Canvas实现放大镜效果示例
Mar 25 HTML / CSS
HTML5拖拽文件上传的示例代码
Mar 04 HTML / CSS
html解决浏览器记住密码输入框的问题
May 07 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代码
2012/09/14 PHP
Parse正式发布开源PHP SDK
2014/08/11 PHP
jQuery 各种浏览器下获得日期区别
2008/12/22 Javascript
javascript 进阶篇3 Ajax 、JSON、 Prototype介绍
2012/03/14 Javascript
javascript确认框的三种使用方法
2013/12/17 Javascript
JS逆序遍历实现代码
2014/12/02 Javascript
js实现带有介绍的Select列表菜单实例
2015/08/18 Javascript
jQuery取得iframe中元素的常用方法详解
2016/01/14 Javascript
JS正则替换掉小括号及内容的方法
2016/11/29 Javascript
nodejs入门教程四:URL相关模块用法分析
2017/04/24 NodeJs
Bootstrap里的文件分别代表什么意思及其引用方法
2017/05/01 Javascript
基于webpack 实用配置方法总结
2017/09/28 Javascript
VueJs使用Amaze ui调整列表和内容页面
2017/11/30 Javascript
详解Vue项目编译后部署在非网站根目录的解决方案
2018/04/26 Javascript
vuex的module模块用法示例
2018/11/12 Javascript
vue-cli的build的文件夹下没有dev-server.js文件配置mock数据的方法
2019/04/17 Javascript
vue2 v-model/v-text 中使用过滤器的方法示例
2019/05/09 Javascript
ES6 Class中实现私有属性的一些方法总结
2019/07/08 Javascript
js实现左右轮播图
2020/01/09 Javascript
Openlayers实现距离面积测量
2020/09/28 Javascript
Python lxml模块安装教程
2015/06/02 Python
利用Python脚本生成sitemap.xml的实现方法
2017/01/31 Python
Django压缩静态文件的实现方法详析
2018/08/26 Python
Python批处理更改文件名os.rename的方法
2018/10/26 Python
Python button选取本地图片并显示的实例
2019/06/13 Python
关于python字符串方法分类详解
2019/08/20 Python
详解java调用python的几种用法(看这篇就够了)
2020/12/10 Python
python中remove函数的踩坑记录
2021/01/04 Python
CSS3模块的目前的状况分析
2010/02/24 HTML / CSS
使用html2canvas将页面转成图并使用用canvas2image下载
2019/04/04 HTML / CSS
爱国卫生月实施方案
2014/02/21 职场文书
旅行社各个岗位职责
2014/03/15 职场文书
环保倡议书范文
2014/05/12 职场文书
司法所长先进事迹
2014/06/02 职场文书
法制教育演讲稿
2014/09/10 职场文书
2015年社区纪检工作总结
2015/04/21 职场文书