AntV X6 实现鼠标右键框选
项目中,鼠标左键是用来移动项目,使用鼠标框选只能用中键和右键了,X6中的选择插件是支持鼠标中键框选的,奈何项目经理要求用鼠标右键进行框选,才有了本篇博客记录。
实现的具体方式还是使用@antv/x6-plugin-selection插件中的方法startRubberband就可以了,因为X6提供的监听鼠标移动事件中获取不到右键事件(或许我没找到),我就直接监听画布容器上的mousedown事件
const container = graph.container;
// 定义事件处理器
const handleMouseDown = (e: MouseEvent) => {
if (e.button === 2) {
e.preventDefault(); // 阻止默认右键菜单
const selectionPlugin = graph.getPlugin<Selection>('selection');
if (selectionPlugin) {
selectionPlugin.enableRubberband();
selectionPlugin.startRubberband(e as MouseEvent);
}
}
};
const handleMouseUp = (e: MouseEvent) => {
if (e.button === 2) {
e.preventDefault();
graph.getPlugin<Selection>('selection')?.disableRubberband();
}
};
// 添加事件监听器
container.addEventListener('mousedown', handleMouseDown);
container.addEventListener('mouseup', handleMouseUp);

浙公网安备 33010602011771号