leafer-x-dotwuxian

轻量的 DotMatrix 插件，为 @leafer-ui 提供可缩放、对齐的点/线网格背景，用于增强画布/画板类应用的视觉参考。

特点

• 支持 dots 和 lines 两种网格样式
• 根据 zoom 动态计算多层网格，平滑过渡
• 对齐主次网格，避免重复绘制（性能优化）
• 支持多种颜色格式：#rgb、#rrggbb、rgb(a)
• 可开启/关闭与销毁（enableDotMatrix / destroy）

安装

使用 pnpm / npm / yarn 安装（本包为纯插件，需配合 leafer/@leafer-ui 等使用）：

pnpm add leafer-x-dotwuxian
# or
npm install leafer-x-dotwuxian

快速开始

在你的 Leafer 应用初始化后，创建并挂载 DotMatrix：

import { App } from 'leafer'
import { DotMatrix } from 'leafer-x-dotwuxian'

const app = App({ /* ... */ })

// 可选配置
const dot = new DotMatrix(app, {
	dotColor: '#D2D4D7',
	gridGap: 45,
	gridType: 'dots', // 'dots' | 'lines'
	maxSize: 10,
	minSize: 0.1,
})

// 启用/禁用
dot.enableDotMatrix(true)

// 销毁
dot.destroy()

API

• new DotMatrix(app: IApp, config?: IDotMatrixConfig)

  • app: 来自 @leafer-ui/interface 的 IApp 实例（必须为 App）
  • config:
    • dotColor?: string - 点/线颜色，支持 #rgb / #rrggbb / rgb(a)，默认 #D2D4D7
    • gridGap?: number - 基础网格像素间距，默认 45
    • gridType?: 'dots' | 'lines' - 网格类型，默认 dots
    • maxSize?: number - 最大点/线宽，默认 10
    • minSize?: number - 最小点/线宽，默认 0.1

• enableDotMatrix(enable: boolean) - 启用或禁用网格渲染（会添加/移除内置事件监听）。

• destroy() - 卸载并销毁插件实例，清理引用和绘制层。

内部实现要点

• 根据 zoomLayer.scale 计算多层可见网格，并基于对数尺度平滑过渡。
• 在 canvas 像素空间中绘制，自动处理设备像素比和视口平移。
• 对齐跳过策略：当较粗网格可见时，会跳过细网格上与之对齐的点/线，减少重复绘制。

打包与构建

本项目使用 TypeScript + Rollup 打包，入口位于 src/index.ts，导出 DotMatrix。

常用命令：

pnpm install
pnpm run build

贡献

欢迎提交 issue 或 PR。请参阅项目根目录的 package.json 以了解脚本与构建细节。

许可证

MIT