leafer-x-snap

吸附插件，为 Leafer 应用提供元素自动吸附功能。

安装

npm install leafer-x-snap

类型定义

type SnapConfig = {
  snapSize?: number;
  lineColor?: string;
  showLine?: boolean;
  strokeWidth?: number;
  dashPattern?: number[];
  isDash?: boolean;
  showLinePoints?: boolean;
  filter?: (element: IUI) => boolean;
};

基础使用

import { Snap } from 'leafer-x-snap';

const app = new App({
  view: window,
  editor: {}
});

const snap = new Snap(app, {
  snapSize: 5,
  strokeWidth: 2,
});

// 启用吸附功能
snap.enable(true);

可以在元素上设置 isSnap 属性来控制元素是否参与吸附计算，默认为 true

new Rect({ isSnap: false });
// or
rect.isSnap = false;

API 文档

构造函数

constructor(app: IApp, config?: SnapConfig)

参数

• app: Leafer App 实例
• config: 可选的配置项

配置项

| 属性 | 类型 | 默认值 | 说明 | | ---------------- | ------------------------- | --------- | -------------------------- | | snapSize | number | 5 | 吸附距离范围 | | lineColor | string | '#D2D4D7' | 吸附辅助线颜色 | | showLine | boolean | true | 是否显示辅助线 | | strokeWidth | number | 1 | 线宽 | | dashPattern | number[] | [5] | 虚线样式 | | isDash | boolean | true | 是否使用虚线 | | showLinePoints | boolean | true | 是否显示辅助线端点 | | filter | (element: IUI) => boolean | undefined | 过滤需要参与吸附计算的元素 |

实例方法

enable(enable: boolean)

控制吸附功能的开启/关闭

// 启用吸附
snap.enable(true)

// 禁用吸附
snap.enable(false)

destroy()

销毁吸附实例

snap.destroy()

changeFilter(filter: (element: IUI) => boolean)

更改元素过滤器函数

// 示例：只对矩形元素进行吸附
snap.changeFilter((element) => element.tag === 'Rect')

使用示例

// 创建带配置的实例
const snap = new Snap(app, {
  snapSize: 10,
})

// 启用吸附功能
snap.enable(true)

注意事项

1. 必须传入有效的 Leafer App 实例
2. 吸附功能默认是禁用的，需要调用 enable(true) 来启用
3. 吸附功能会自动检测视口内的元素作为吸附参考点
4. 建议在页面元素加载完成后再初始化 Snap 实例
5. 必须安装editor插件