自定义节点,锚点问题问题
问题描述
自定义一个节点,作为edge的source,锚点应该是节点bbox,但却是内部元素
重现链接
代码如下
重现步骤
import { Graph } from '@antv/x6'
import { Transform } from '@antv/x6-plugin-transform'
const graph = new Graph({
container: document.getElementById('container'),
connecting:{
router:'normal',
connector: {
name:'normal',
args:{radius:8}
},
anchor:'midSide',
connectionPoint:'bbox',
},
grid: true,
})
let source = graph.addNode({
x: 500,
y: 200,
width: 100,
height: 100,
markup: [
{ tagName: 'polygon', selector: 'polygon4' },
{ tagName: 'rect', selector: 'polygon4rect', refFlag: true },
{ tagName: 'rect', selector: 'bg' },
],
attrs: {
bg: {
fill: "none",
pointerEvents: "all",
refHeight: "100%",
refWidth: "100%",
stroke: "none"
},
rect: {
fill: "#ffffff",
stroke: "#333333",
strokeWidth: 2
},
body: {
refWidth: "100%",
refHeight: "100%",
fill: "none",
strokeWidth: 0,
stroke: "none"
},
polygon4: {
refWidth: "100%",
refHeight: "100%",
stroke: "#8f8f8f",
strokeWidth: 2,
fill: "transparent",
rx: 0,
ry: 0,
refPoints: "38,36 68,36 68,62 38,62",
refX: 0,
refY: 0,
ref: "polygon4rect",
id: "c642e4b4-a05c-4f6d-b2b3-5f220b329347"
},
polygon4rect: {
refX: 0.38,
refY: 0.36,
refWidth: 0.3,
refHeight: 0.26,
fill: "none",
stroke: "none"
},
}
})
graph.use( new Transform({ resizing: true, rotating: true, }), ) let target = graph.addNode({ id: 'b', x: 800, y: 260, width: 100, height: 40, attrs: { body: { fill: '#f5f5f5', stroke: '#d9d9d9', }, }, })
let edge = graph.addEdge({ source, target, // https://x6.antv.vision/zh/docs/api/registry/connector#normal // connector: { name: 'normal' }, attrs: { line: { stroke: '#722ed1', }, }, }) console.log(edge)
预期行为
期望是bbox
平台
- 操作系统: [macOS, Windows, Linux, React Native ...]
- 网页浏览器: [Google Chrome, Safari, Firefox ...]
- X6 版本: [2.11.1 ...]
屏幕截图或视频(可选)
No response
补充说明(可选)
No response