antv x6 交互行为配置详解

方法

通过Graph的构造参数interacting可实现限制交互行为

const graph = new Graph({
    
    
    ...
    interacting: false
});

可用配置

  1. boolean 启用/停用全部交互行为
  2. InteractionMap
interface InteractionMap {
  // 边
  edgeMovable?: Interactable // 移动边
  edgeLabelMovable?: Interactable // 移动边的标签
  arrowheadMovable?: Interactable // 移动箭头方向
  vertexMovable?: Interactable // 移动路径点
  vertexAddable?: Interactable // 添加路径点
  vertexDeletable?: Interactable // 删除路径点
  useEdgeTools?: Interactable // 使用边工具

  // 节点
  nodeMovable?: Interactable // 移动节点
  magnetConnectable?: Interactable // 在启用磁铁的节点上创建连接
  stopDelegateOnDragging?: Interactable // 暂不明确

  // 通用
  toolsAddable?: Interactable // 添加工具
}
// 项目值类型
type Interactable = 
  // 对所有元素生效
  boolean 
  // 可根据cellView进行判断,实现对特定元素的设定
  | ((this: Graph, cellView: CellView) => boolean)
  1. ((this: Graph, cellView: CellView) => InteractionMap | boolean)
    可通过cellView来判断并限制特定元素的交互行为

注:默认配置为

{
    
    
  edgeLabelMovable: false,
}

猜你喜欢

转载自blog.csdn.net/zhoudingding/article/details/130204885