官方文档：链接
在线体验：有标尺功能的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);
});
