采用d3开发流程设计器（四）实现线条的绘制，以及线条的箭头

矫情吗；* 2023-02-15 03:42 285阅读 0赞

前面三节完成了开始、结束、普通节点的拖拽生成，这些都还比较简单，这节来实现下线条都绘制以及拖拽相关功能：  
需求：  
1、拖拽生成线条，连接2个节点  
2、拖拽节点的时候 线条跟着移动  
3、选中线条变换样式  
4、右键点击可以删除线条  
5、线条末端带上箭头

效果大概：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXlvbmdsaWFuZ184MTM_size_16_color_FFFFFF_t_70]  
核心函数有：

绘制箭头

/**
     * 绘制箭头
     * @param link
     * @param linkArrowId
     * @private
     */
    FlowDesCtl.prototype._addLinkArrow=function (link,linkArrowId) {
        //添加marker标签及其属性
        var arrowMarker = link.append("marker")
            .attr("id","arrow"+linkArrowId)
            .attr("markerUnits","strokeWidth")
            .attr("markerWidth",12)
            .attr("markerHeight",12)
            .attr("viewBox","0 0 12 12")
            .attr("refX",13)
            .attr("refY",6)
            .attr("orient","auto");
    
        //绘制直线箭头
        var arrow_path = "M2,2 L10,6 L2,10 L6,6 L2,2";
        arrowMarker.append("path")
            .attr("d",arrow_path)
            .attr("fill",this.options.linkColor);
    };

箭头跟线条关联起来

/**
     * 添加线条
     * @param d
     * @param nodeData
     * @private
     */
    FlowDesCtl.prototype._addLink=function (d,nodeData,drageType) {
        //如果线条不存在 才需要这么操作
        const link = this.svgObj.append("g")
            .attr("fill", "none")
            .attr("stroke", this.options.linkColor)
            .data([nodeData])
            .attr("stroke-opacity", 1)
            .attr("stroke-width", 1)
            .attr("id", (d)=>{
                d.curLinkParentId="link_"+drageType+"_"+GoingUtils.getUUid(10);
                return d.curLinkParentId;
            })
            .on("click", (d) => {
               
            });
    
        let linkArrowId=GoingUtils.getUUid(10);
        //绘制箭头
        this._addLinkArrow(link,linkArrowId);
    
        link.append("path")
            .attr("id", (d)=>{
                if(d.linkAdded==null){
                    d.linkAdded={};
                }
                d.linkAdded[drageType]=true;
                d.curLinkId="link_"+drageType+"_"+GoingUtils.getUUid(10);
                return d.curLinkId;
            })
            .attr("marker-end","url(#"+"arrow"+linkArrowId+")")
            .attr("d", (d)=>{
                return `M${d.linkDrage[drageType].startX} ${d.linkDrage[drageType].startY}L${d.linkDrage[drageType].endX} ${d.linkDrage[drageType].endY}`;
            })
    
        ;
    };

拖拽节点生成线条

/**
     * 添加外框生成线条的节点
     * @param borderNode
     * @param nodeData
     * @param cx
     * @param cy
     * @private
     */
    FlowDesCtl.prototype._addLinkBorderNode=function({borderNode,nodeData,cx,cy,drageType}){
        let dexObj=this;
        /**
         * 节点圆形
         */
        borderNode.append("circle")
            .attr("r", '4')
            .attr("fill", "#99BBE8")
            .attr("stroke", "#ff7f0e")
            .attr("stroke-opacity", 0)
            .attr("stroke-width", 4)
            .attr("drageType", drageType)
            .attr("class","linkDrageNode")
            .attr("id",(d)=>{
                return 'drag_link_node_'+drageType+"_"+d.id;
            })
            .attr("cx", d=>{
                if(d.linkDrage[drageType]==null){
                    d.linkDrage[drageType]={};
                }
                d.linkDrage[drageType]["cx"]=cx;
                return cx;
            })
            .attr("cy", d=>{
                if(d.linkDrage[drageType]==null){
                    d.linkDrage[drageType]={};
                }
                d.linkDrage[drageType]["cy"]=cy;
                return cy;
            })
            .on("mouseover", function(d) {
                window.d3.select(this).attr("stroke-opacity",1);
                var _drageType=window.d3.select(this).attr("drageType");
                dexObj.linkTarget=d;
                dexObj.linkTargetDragType=_drageType;
                dexObj.linkTargetId=window.d3.select(this).attr("id");
            })
            .on("mouseout", function(d) {
                dexObj.linkTarget=null;
                dexObj.linkTargetId=null;
                dexObj.linkTargetDragType=null;
                window.d3.select(this).attr("stroke-opacity",0);
            })
            .call(window.d3.drag().on("start", function(d){
                //进行节点线条拖拽操作
                if (d != null) {
                    if(dexObj.linkTimer!=null){
                        clearTimeout(dexObj.linkTimer);
                    }
                    //获取当前节点拖拽类型位置
                    let _drageType=window.d3.select(this).attr("drageType");
                    d.curDrageType=_drageType;
                    if(d.linkDrage[_drageType]==null){
                        return void(0);
                    }
                    dexObj.linkTimer=setTimeout( ()=>{
                        //设置开始坐标
                        d.linkDrage[_drageType].startX= d.fx+d.linkDrage[_drageType]["cx"];
                        d.linkDrage[_drageType].startY= d.fy+d.linkDrage[_drageType]["cy"];
                        // //设置结束坐标
                        d.linkDrage[_drageType].endX= d.linkDrage[_drageType].startX;
                        d.linkDrage[_drageType].endY= d.linkDrage[_drageType].startY;
                        //创建一条空的线条
                        dexObj._addLink(d,nodeData,_drageType);
                        dexObj.addLinkFlag=true;
                    },100);
                }
            }).on("drag", function(d){
                let _drageType=window.d3.select(this).attr("drageType");
                if(d!=null&&dexObj.addLinkFlag){
                    let moveX=window.d3.event.x-d.linkDrage[_drageType]["cx"];
                    let moveY=window.d3.event.y-d.linkDrage[_drageType]["cy"];
                    d.linkDrage[_drageType].endX= parseFloat(d.linkDrage[_drageType].startX)+parseFloat(moveX);
                    d.linkDrage[_drageType].endY= parseFloat(d.linkDrage[_drageType].startY)+parseFloat(moveY);
                    window.d3.select("#"+d.curLinkId).attr("d", `M${d.linkDrage[_drageType].startX} ${d.linkDrage[_drageType].startY}L${d.linkDrage[_drageType].endX} ${d.linkDrage[_drageType].endY}`);
                }
            }).on("end", (d)=>{
                if(dexObj.linkTarget!=null){
                    dexObj._endLinkDragAddLink(d);
                }else{
                    let _drageType=d.curDrageType;
                    d.linkDrage[_drageType].startX=null;
                    d.linkDrage[_drageType].startY=null;
                    d.linkDrage[_drageType].endX=null;
                    d.linkDrage[_drageType].endY=null;
                    window.d3.select("#"+d.curLinkId).remove();
                    console.log("线条目标节点不存在，移除");
                }
            }))
        ;
    };

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXlvbmdsaWFuZ184MTM_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200604141639959.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXlvbmdsaWFuZ184MTM=,size_16,color_FFFFFF,t_70