1、我们用鼠标来拖动节点的时候,发现位置不精准,这个比较麻烦,有的时候,还是需要微调的,比如一些软件,像ps,还有一些图编辑软件都支持用方向键来调整。
2、下面是具体的实现,引入键盘包:
import { Keyboard } from '@antv/x6-plugin-keyboard';
3、加入启用权限功能:
graph.use(
new Keyboard({
enabled: true,
global: true,
}),
);
4、加入键盘的绑定事件:
graph.bindKey(['arrowleft'], () => {
const nodes = graph.getNodes();
if (nodes.length == 1) {
nodes[0].prop('position', {
x: nodes[0].getBBox().x - 1,
y: nodes[0].getBBox().y,
});
}
});
graph.bindKey(['arrowright'], () => {
const nodes = graph.getNodes();
if (nodes.length == 1) {
nodes[0].prop('position', {
x: nodes[0].getBBox().x + 1,
y: nodes[0].getBBox().y,
});
}
});
graph.bindKey(['arrowup'], () => {
const nodes = graph.getNodes();
if (nodes.length == 1) {
nodes[0].prop('position', {
x: nodes[0].getBBox().x,
y: nodes[0].getBBox().y - 1,
});
}
});
graph.bindKey(['arrowdown'], () => {
const nodes = graph.getNodes();
if (nodes.length == 1) {
nodes[0].prop('position', {
x: nodes[0].getBBox().x,
y: nodes[0].getBBox().y + 1,
});
}
});
5、通过上面的几步,我们就轻松的实现了,通过键盘方向键来微调节点的功能。