1、先上个图,来自官方网站:https://x6.antv.antgroup.com/zh/examples/node/group/#restrict-movement
说明:图中的child只能在Parent的范围内进行移动,这个效果不错,在一些定制的场合中会用到。
2、代码:
import { Graph } from '@antv/x6'
const graph = new Graph({
container: document.getElementById('container'),
grid: true,
translating: {
restrict(view) {
const cell = view.cell
if (cell.isNode()) {
const parent = cell.getParent()
if (parent) {
return parent.getBBox()
}
}
return null
},
},
})
const child = graph.addNode({
x: 120,
y: 80,
width: 80,
height: 40,
label: 'Child',
zIndex: 10,
attrs: {
body: {
stroke: 'none',
fill: '#3199FF',
},
label: {
fill: '#fff',
fontSize: 12,
},
},
})
const parent = graph.addNode({
x: 40,
y: 40,
width: 640,
height: 160,
zIndex: 1,
label: 'Parent\n(try to move me)',
attrs: {
label: {
refY: 120,
fontSize: 12,
},
body: {
fill: 'transparent',
stroke: '#ffe7ba',
},
},
})
parent.addChild(child)
3、说明:
这个是指定节点的移动范围,更加方便,如果碰到了需要节点在某一个范围内进行移动,不出这个rect(x,y,width,height)的区域,只要定义的时候指定restrict = 矩形区域,就可以完成。