mxGraph中線段多次摺疊，然後拖動cell至線上，出現放置錯誤與連線線錯誤連線的情況修復

沙师弟demo發表於2024-11-22

當線段如下摺疊後，拖動一個cell到線上

出現問題如下

透過閱讀原始碼，發現他的計算或者傳遞有誤，一直返回的是0

src\view\mxGraph.js 檔案中的

mxGraph.prototype.splitEdge = function(edge, cells, newEdge, dx, dy, x, y, parent)
{
//....    
　　　　　　　　　　//下面的 mxUtils.findNearestSegment 計算結果一直為0 
　　　　　　　　　　var idx = mxUtils.findNearestSegment(state, (dx + t.x) * s, (dy + t.y) * s); 
//....
};

為了不影響其他功能，臨時修改成下面內容。

//var idx = mxUtils.findNearestSegment(state, (dx + t.x) * s, (dy + t.y) * s);
                var idx = 0;
                if(cells!=null && cells.length >0){
                    var pointX = cells[0].geometry.x + dx
                    var pointY = cells[0].geometry.y + dy
                    idx = mxUtils.myFindNearestSegment(state, (dx + t.x) * s, (dy + t.y) * s);
                }

mxUtils.js新增下面的內容

    myFindNearestSegment: function(edge, x, y)
    {
        if( edge.geometry!=null && edge.geometry.sourcePoint!=null && edge.geometry.targetPoint !=null ){
            if( edge.geometry.points!=null && edge.geometry.points.length > 0){
                var lineList = []
                var startPoint = {
                    x2: edge.geometry.sourcePoint.x,
                    x3: edge.geometry.points[0].x,
                    y2: edge.geometry.sourcePoint.y,
                    x3: edge.geometry.points[0].y
                }
                lineList.push(startPoint)
                for(var i = 0; i<edge.geometry.points.length -1 ; i++){
                    var middlePoint = {
                        x2: edge.geometry.points[i].x,
                        x3: edge.geometry.points[i+1].x,
                        y2: edge.geometry.points[i].y,
                        x3: edge.geometry.points[i+1].y
                    }
                    lineList.push(middlePoint)
                }
                var endPoint = {
                    x2: edge.geometry.points[edge.geometry.points.length-1].x,
                    x3: edge.geometry.targetPoint.x,
                    y2: edge.geometry.points[edge.geometry.points-1].y,
                    x3: edge.geometry.targetPoint.y
                }
                lineList.push(endPoint)

                var distance = null;
                var pointIndex = 0;
                for(var index = 0; index<lineList.length ; index ++ ){
                    var line = lineList[index]
                    var diff = this.pointToLineDisTance(x,y,line.x2,line.y2,line.x3,line.y3)
                    if(distance ==null || distance > diff){
                        distance = diff
                        pointIndex = index
                    }
                }
                return pointIndex;
            }
        }else{
            return 0
        }
    },

    pointToLineDistance: function (x1, y1, x2, y2, x3, y3) {
        // 計算直線 (x2, y2) 到 (x3, y3) 的方向向量
        var numerator = Math.abs((y3 - y2) * x1 - (x3 - x2) * y1 + x3 * y2 - y3 * x2);
        var denominator = Math.sqrt(Math.pow(y3 - y2, 2) + Math.pow(x3 - x2, 2));
        return numerator / denominator;
    },

相關文章