我开源了一款轻量级的web编辑器标尺插件！我开源了一款轻量级的web编辑

前言做过web端编辑器的前端同仁们，或多或少都会接触标尺插件，类似于ps或PPT这些软件中的插件。
比较老的web插件比如jqury的，会产生很多dom，于是写了1个用纯TS和canvas绘制的标尺，不依赖任何第三方库。文档即使用方法如下，欢迎使用，贡献以及提issue!
PS：暂时还不支持辅助线功能，会尽快上线
该插件在一些思路上也参考了另一个大牛的标尺插件daybrush/ruler
light-ruler
文章图片

【我开源了一款轻量级的web编辑器标尺插件！】DEMO / Github
主要特性(Features)

使用 canvas 绘制，支持无限滚动，不会生成多个 DOM 和引起页面重绘
支持自定义标尺背景色、文字色、刻度色以及单位
支持 translate 模式，即首次 canvas 绘制标尺后，滚动通过 css transform 实现
使用 Typescript 编写，不依赖任何第三方库，打包后文件仅有 26kb(包含样式)
支持缩放刻度值
目前提供 2 种标尺主题样式
提供多实例控制器，可管理多个标尺实例

安装(Installation)
npm i light-ruler
使用(Useage)

基本使用

import LightRuler from "light-ruler"; const ruler = new LightRuler({ mode: "infinite", wrapperElement: document.getElementById("box"), scrollElement: document.getElementById("wrap"), rulerId: "my-ruler", width: 30000, height: 30000, style: { mode: "right", }, onScroll: (x, y) => { console.log(x, y); }, });

React 使用

import React, { useRef, useEffect } from "react"; import LightRuler from "light-ruler"; export default function () { const rulerRef = useRef(null); useEffect(() => { const ruler = new LightRuler({ mode: "infinite", mountRef: rulerRef.current, scrollElement: document.getElementById("wrap"), rulerId: "ruler", width: 30000, height: 30000, onScroll: (x, y) => { console.log(x, y); }, }); }, []); return (...); }

Vue3 使用

Tips: 由于标尺使用的 position: absolute，所以包裹标尺的容器一定要设置 position 属性。
同时要使标尺固定不动，监听滚动的 element 不能是包裹标尺的 element

配置(Config)

名称	含义	值
mode？	绘制模式	'infinite'/'translate'/'auto'
mountRef？	标尺挂载的 DOM（优先于 wrapperElement，会将 mountRef 的 parentElement 作为父容器）	HTMLElement
wrapperElement？	标尺的父容器 DOM (会自动生成标尺 DOM)	HTMLElement / CSSSelector
scrollElement?	监听滚动的 DOM	HTMLElement / CSSSelector
width？	标尺绘制宽度	number
height？	标尺绘制高度	number
rulerId?	标尺 id	string
style?	标尺样式	Object
onScroll?	滚动回调函数	(x: number, y: number) => Function

style 属性

名称	含义	值
size？	标尺尺寸(如 20, 则横向标尺 height 为 20px，纵向标尺 width 为 20px)	number
backgroundColor？	标尺背景颜色	string
fontColor？	标尺字体颜色	string
fontSize?	标尺字体大小(若不设置会自动计算合适大小，如设置了则为绝对值，不会自适应)	number
fontWeight？	标尺字体粗细	'bold'/ number
tickColor？	标尺刻度颜色	string
unit?	标尺单位样式	Object
gap?	标尺刻度间隔	number
scale?	标尺刻度值缩放系数	number
show?	标尺初始化后是否显示	boolean
mode?	标尺主题样式	'center'/'right'