getPoint当quadratic曲线设置了curvePosition后获取对应点位置不正确

[xiaoxiaofu1]

问题描述

getPoint当quadratic曲线设置了curvePosition后获取对应点位置不正确

重现链接

无

重现步骤

可用官网例子改动
import G6 from '@antv/g6';

/**

• Custom the edge with extra shapes
• by Shiwu
  */

// custom the edge with an extra rect
G6.registerEdge(
'extra-shape-edge',
{
afterDraw(cfg, group) {
// get the first shape in the graphics group of this edge, it is the path of the edge here
// 获取图形组中的第一个图形，在这里就是边的路径图形
const shape = group.get('children')[0];
// get the coordinate of the mid point on the path
// 获取路径图形的中点坐标
const midPoint = shape.getPoint(0.5);
const rectColor = cfg.midPointColor || '#333';
// add a rect on the mid point of the path. note that the origin of a rect shape is on its lefttop
// 在中点增加一个矩形，注意矩形的原点在其左上角
group.addShape('rect', {
attrs: {
width: 10,
height: 10,
fill: rectColor || '#333',
// x and y should be minus width / 2 and height / 2 respectively to translate the center of the rect to the midPoint
// x 和 y 分别减去 width / 2 与 height / 2，使矩形中心在 midPoint 上
x: midPoint.x - 5,
y: midPoint.y - 5,
},
});

  // get the coordinate of the quatile on the path
  // 获取路径上的四分位点坐标
  const quatile = shape.getPoint(0.25);
  const quatileColor = cfg.quatileColor || '#333';
  // add a circle on the quatile of the path
  // 在四分位点上放置一个圆形
  group.addShape('circle', {
    attrs: {
      r: 5,
      fill: quatileColor || '#333',
      x: quatile.x,
      y: quatile.y,
    },
  });
},
update: undefined,

},
'quadratic',//改动
);

const data = {
nodes: [
{
id: 'node1',
x: 100,
y: 100,
},
{
id: 'node2',
x: 300,
y: 100,
},
{
id: 'node3',
x: 300,
y: 200,
},
],
edges: [
{
source: 'node1',
target: 'node2',
midPointColor: '#f00',
quatileColor: '#f00',
curvePosition:0.1 //增加
},
{
source: 'node1',
target: 'node3',
midPointColor: '#0f0',
quatileColor: '#0f0',
curvePosition:0.9//增加
},
],
};

const container = document.getElementById('container');
const width = container.scrollWidth;
const height = container.scrollHeight || 500;
const graph = new G6.Graph({
container: 'container',
width,
height,
// translate the graph to align the canvas's center, support by v3.5.1
fitCenter: true,
modes: {
default: ['drag-node', 'drag-canvas'],
},
defaultEdge: {
type: 'extra-shape-edge',
style: {
stroke: '#F6BD16',
},
},
});
graph.data(data);
graph.render();

if (typeof window !== 'undefined')
window.onresize = () => {
if (!graph || graph.get('destroyed')) return;
if (!container || !container.scrollWidth || !container.scrollHeight) return;
graph.changeSize(container.scrollWidth, container.scrollHeight);
};

预期行为

获取对应点位置正确

平台

• 操作系统: [macOS, Windows, Linux, React Native ...]
• 网页浏览器: [Google Chrome, Safari, Firefox]
• G6 版本: [4.5.1 ... ]

屏幕截图或视频（可选）

No response

补充说明（可选）

No response

[Yanyan-Wang]

确实有这个问题，原始需求是什么，看看有没有别的方式可以规避

[zhaoguangyue]

我也遇到了该问题，需求是在线的中间，展示一个图标

[github-actions]

This issue has been closed because it has been outdate for a long time.
Please open a new issue if you still need help.

这个 issue 已经被关闭，因为 它已经过期很久了。
如果你仍然需要帮助，请创建一个新的 issue。