polyline的controlPoints未按预期工作 #5156

Describe the bug

polyline的controlPoints未按预期工作：

1. 小正方形为起始点、弯折点、终点的坐标标记
2. 红色的线不是预期路径，和预期路径有偏离
3. 蓝色的线是我们预期想要弯折的路径

Your Example Website or App

https://codesandbox.io/s/sad-haze-hr6pm7?file=/index.js

Steps to Reproduce the Bug or Issue

代码如下：

import G6 from '@antv/g6';

G6.registerNode('node-with-ports', {
    draw(cfg, group) {
      if (cfg.id.startsWith('mark')) {
        const [width, height] = [cfg.width || 10, cfg.height || 10];
        return group.addShape('rect', {
            attrs: {
                x: -width / 2,
                y: -height / 2,
                width,
                height,
                fill: '#9ec9ff',
                stroke: '#5b8ff9',
                fillOpacity: 0.5,
            },
        });
      }
        const [width, height] = [240, 80];
        const keyShape = group.addShape('rect', {
            attrs: {
                x: -width / 2,
                y: -height / 2,
                width,
                height,
                fill: '#9ec9ff',
                stroke: '#5b8ff9',
                fillOpacity: 0.5,
            },
        });
        group.addShape('text', {
            attrs: {
                x: -width / 2 + 10,
                y: -height / 2 + 10,
                text: cfg.id,
                fontSize: 14,
                textAlign: 'left',
                textBaseline: 'middle',
                fill: '#0000D9',
            },
        });
        // // 添加端口
        cfg.ports?.forEach((port, index) => {
            const isBottom = port?.layoutOptions?.['elk.port.side'] === 'SOUTH';
            group.addShape('circle', {
                attrs: {
                    r: 3,
                    x: -width / 2 + (width / (cfg.ports.length + 1)) * (index + 1),
                    y: isBottom ? height / 2 : -height / 2,
                    fill: '#fff',
                    stroke: '#5b8ff9',
                },
                name: `port${index}`,
            });
        });

        return keyShape;
    },
});
const data = {
  "nodes": [
    {
      "id": "n1",
      "width": 240,
      "height": 80,
      "ports": [
        {
          "id": "n1_p1",
          "width": 7,
          "height": 7,
          "layoutOptions": {
            "elk.port.side": "SOUTH",
            "elk.port.index": 0
          },
          "x": 75.5,
          "y": 80
        },
        {
          "id": "n1_p2",
          "width": 7,
          "height": 7,
          "layoutOptions": {
            "elk.port.side": "SOUTH",
            "elk.port.index": 1
          },
          "x": 157.5,
          "y": 80
        }
      ],
      "layoutOptions": {
        "elk.portConstraints": "FIXED_SIDE"
      },
      "$H": 277,
      "x": 51,
      "y": 10,
      "anchorPoints": [
        [
          0.3333333333333333,
          1
        ],
        [
          0.6666666666666666,
          1
        ]
      ],
      "type": "node-with-ports",
      "style": {}
    },
    {
      "id": "n2",
      "width": 240,
      "height": 80,
      "ports": [
        {
          "id": "n2_p1",
          "width": 7,
          "height": 7,
          "layoutOptions": {
            "elk.port.side": "NORTH",
            "elk.port.index": 0
          },
          "x": 116.5,
          "y": -7
        }
      ],
      "layoutOptions": {
        "elk.portConstraints": "FIXED_SIDE"
      },
      "$H": 282,
      "x": 10,
      "y": 264,
      "anchorPoints": [
        [
          0.5,
          0
        ]
      ],
      "type": "node-with-ports",
      "style": {}
    },
    {
      "id": "n3",
      "width": 240,
      "height": 80,
      "ports": [
        {
          "id": "n3_p1",
          "width": 7,
          "height": 7,
          "layoutOptions": {
            "elk.port.side": "NORTH",
            "elk.port.index": 0
          },
          "x": 116.5,
          "y": -7
        }
      ],
      "layoutOptions": {
        "elk.portConstraints": "FIXED_SIDE"
      },
      "$H": 285,
      "x": 530,
      "y": 264,
      "anchorPoints": [
        [
          0.5,
          0
        ]
      ],
      "type": "node-with-ports",
      "style": {}
    },

    {
      id: 'mark1',
      "x": 212 - 120,
      "y": 97 - 40,
    },    
    {
      id: 'mark2',
      "x": 650 - 120,
      "y": 257 - 40,
    },   
    {
      id: 'mark3',
      "x": 212 - 120,
      "y": 177 - 40,
    },   
    {
      id: 'mark4',
      "x": 650 - 120,
      "y": 177 - 40,
    },            
  ],
  "edges": [
    {
      "id": "e0",
      "source": "n1",
      "target": "n2",
      "sourceAnchor": 0,
      "targetAnchor": 0,
      "controlPoints": [],
    },
    {
      "id": "e1",
      "source": "n1",
      "target": "n3",
      "sourceAnchor": 1,
      "targetAnchor": 0,
      "controlPoints": [
        { "x": 212, "y": 177 },
        { "x": 650, "y": 177 }
      ],
    }
  ]
};

const width = document.getElementById('container').scrollWidth;
const height = document.getElementById('container').scrollHeight || 500;
const graph = new G6.Graph({
  container: 'container',
  width,
  height,
  fitCenter: true,
  modes: {
    default: ['drag-node'],
  },
  defaultNode: {
      type: 'node-with-ports', // 使用自定义节点
  },  

  defaultEdge: {
      type: 'polyline',
      style: {
          stroke: '#ff0000',
          endArrow: true,
      },
  },

});

graph.data(data);
graph.render();

Expected behavior

预期：n1到n3，采用polyline的controlPoints控制点可以按直角的预期路径弯折 期望按如下弯折：

Screenshots or Videos

No response

Platform

• OS: macOS 13.5
• Browser: Chrome 119.0.6045.105
• Version: @antv/g6 - 4.8.23

Additional context

No response