「AntV」X6 画布添加标尺

官方文档：链接

在线体验：有标尺功能的x6 | 完整版标尺演示（2025-02-13更新）

安装

yarn add @scena/guides

使用

import Guides from "@scena/guides";


/**
 * 初始化标尺
 */
const initRuler = () => {
  const config = {
    // 标尺的位置，默认是end
    direction: 'start',
    // ruler 的背景色
    backgroundColor: 'transparent',
    // 刻度文字的颜色
    textColor: '#333',
    // 刻度文字的偏移值
    textOffset: [-2, 0],
    // 拖拽线的时候是否实时显示坐标位置
    displayDragPos: true,
    // 刻度的间隔值，默认50
    unit: 40,
    // guide 拖动结束后线的颜色，配合dragGuideStyle使用
    guideStyle: { background: '#18a058' },
    // guide 拖动中线的颜色 配合guideStyle使用
    dragGuideStyle: { background: '#18a058' },
    // 实时显示坐标的样式
    guidePosStyle: { color: '#18a058' }
  };
  // https://daybrush.com/guides/release/latest/doc/Guides.html#.event:dragStart
  guides = new Guides(guideRef.value, {
    type: 'vertical',
    ...config
  }).on('changeGuides', e => {
    eyeDisabled.value = e.guides.length == 0;
  });

  // x轴的标尺
  guidesX = new Guides(guideRefX.value, {
    type: 'horizontal',
    ...config
  }).on('changeGuides', e => {
    eyeDisabled.value = e.guides.length == 0;
  });
  // 监听页面尺寸发生变化
  window.addEventListener('resize', () => {
    guides.resize();
    guidesX.resize();
  });
};

画布平移，标尺同步平移

//画布平移时，标尺、参考线也跟着平移
this.graphRef.on("translate", ({ tx, ty }) => {
  this.guidesX.scroll(-tx);
  this.guidesY.scroll(-ty);
  this.guidesX.scrollGuides(-ty); //滚动标尺对面参考线的位置
  this.guidesY.scrollGuides(-tx);
});

---

🚀 官方链接

Dnd插件

Stencil插件

图片导出

1.x常见问题

坐标转换

Transform

Model

getsuccessors

X6 Vue3 Components

微信收录文章

✈️ demo体验

关系图谱(国内镜像)

关系图谱(备用地址)

拖拽demo(国内镜像)

自定义拖拽(备用地址)

自定义拖拽（备用地址2）

🌍 关联文章

自定义拖拽

框选添加右键菜单

图片导出问题汇总

自定义html节点

自定义vue节点(vue3)

画布添加标尺

移动端画布平移失效

给我留言