我开源了一款轻量级的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 种标尺主题样式
- 提供多实例控制器，可管理多个标尺实例
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 属性。配置(Config)
同时要使标尺固定不动，监听滚动的 element 不能是包裹标尺的 element
| 名称 | 含义 | 值 |
|---|---|---|
| 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' |
- unit 属性
| 名称 | 含义 | 值 |
|---|---|---|
| backgroundColor？ | 单位背景颜色 | string |
| fontColor？ | 单位字体颜色 | string |
| fontSize? | 单位字体大小 | number |
| text？ | 单位显示内容 | string |
scale
设置标尺缩放系数，标尺刻度值会根据该缩放系数变化params
| 名称 | 含义 | 值 |
|---|---|---|
| scaleNumber | 缩放系数 | number |
ruler.scale(0.5);
resize
重置标尺宽高或尺寸params
| 名称 | 含义 | 值 |
|---|---|---|
| width? | 标尺绘制宽度 | number |
| height? | 标尺绘制高度 | number |
| size? | 标尺尺寸 | number |
ruler.resize({
width: 1920,
height: 1080,
size: 18,
});
update
更新标尺样式params
| 名称 | 含义 | 值 |
|---|---|---|
| style? | 标尺样式 | Object |
ruler.update({
fontColor: "#fff",
unit: {
text: "mm",
},
});
changeScrollElement
改变标尺监听的滚动对象params
| 名称 | 含义 | 值 |
|---|---|---|
| scrollElement | 监听的滚动对象 | HTMLElement/CSSSelector |
ruler.changeScrollElement("#wrap");
show
显示标尺
ruler.show();
hide
隐藏标尺
ruler.hide();
destroy
清除标尺
ruler.destroy();
推荐阅读
- 热闹中的孤独
- 我要做大厨
- 2018-02-06第三天|2018-02-06第三天 不能再了，反思到位就差改变
- 尽力
- 一个小故事，我的思考。
- 家乡的那条小河
- 第三节|第三节 快乐和幸福（12）
- 你到家了吗
- 这辈子我们都不要再联系了
- 死结。