使用canvas画两级树结构图
时间：2023-04-02 23:20:00
HTML
上周需要做一个功能，将页面左侧的列表内容拖到右侧区域，绘制成关系树。看完设计图，第一反应是用canvas画关系线。做完这个功能后，发现用canvas画图有一个很严重的缺陷。也就是如果左边的关系太多，需要绘制成百上千个，在写dom的时候已经声明了canvas画布的宽高。关系多的时候不能用canvas。但是，记录研究结果。下面是设计图：效果如下：html和css代码就不贴了。js主要使用拖拽和canvas绘图。functionstartDrag(ev){ev.dataTransfer.setData("Text",ev.target.innerText);}functionallowDrop(ev){ev.preventDefault();}functiondecideDrop(ev){ev.preventDefault();varlength=$('.main-target').length;如果（长度==0）{dropToMain（ev）；}else{dropToRelate(ev);}}functiondropToMain(ev){vardata=ev.dataTransfer.getData("文本");var_html=''+data+'
';$('.main-target-wrap').width('auto').append(_html);}functiondropToRelate(ev){//绘制关系线drawLineOne(document.getElementById('canvasOne'),'begin');drawLineOne(document.getElementById('canvasTwo'),'end');//插入图片和图片初始化点击事件var_img=$('
');$('.imgBox').append(_img);_img.click(showRelationBox);//写入数据vardata=ev.dataTransfer.getData('Text');var_html=''+data+' ';$('.relation-text-box').append(_html);}以上就是拖放的方法。看菜鸟教程的时候也写过拖拽的方法functiondrawLineOne(canvas,flag){varcontext=canvas.getContext('2d');变种位置={};如果（标志==“开始”）{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:*}}*/functiongetCanvasOnePosition(){varimgLength=$('.imgBoximg').length;varbeginX=(imgLength==0)?0:77,beginY=(imgLength==0)?15:(15+60*(imgLength-1)),endX=(imgLength==0)?155:77,endY=60*imgLength+15;varposition={beginX:beginX,beginY:beginY,endX:endX,endY:endY};如果（imgLength>0）{正on.endX2=155;position.endY2=endY;}返回位置；}functiongetCanvasTwoPosition(){varimgLength=$('.imgBoximg').length;varendY=15+60*imgLengthreturn{beginX:0,beginY:endY,endX:155,endY:endY}}以上就是在画布上画线的方法。代码没什么难度，主要问题是分析直线起始坐标比较麻烦
