我开源了一款轻量级的web编辑器标尺插件!
source link: https://segmentfault.com/a/1190000041067779
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
做过web端编辑器的前端同仁们,或多或少都会接触标尺插件,类似于ps或PPT这些软件中的插件。
比较老的web插件比如jqury的,会产生很多dom,于是写了1个用纯TS和canvas绘制的标尺,不依赖任何第三方库。文档即使用方法如下,欢迎使用,贡献以及提issue!
PS:暂时还不支持辅助线功能,会尽快上线
该插件在一些思路上也参考了另一个大牛的标尺插件daybrush/ruler
light-ruler
主要特性(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 ( <div id="root"> <div id="box"> <div id="wrap">...</div> <div id="ruler" ref={rulerRef}></div> </div> </div> ); }
- Vue3 使用
<template> <div id="gomi-homePage"> <div id="box" :style="{ position: 'relative', width: '800px', height: '600px', overflow: 'hidden', background: 'red' }" > <div id="s" :style="{ width: '100%', height: '100%', overflow: 'auto' }"> <div id="wrap" :style="{ width: '30000px', height: '4600px' }"></div> </div> <div id="ruler" ref="ruler"></div> </div> <footer> </footer> </div> </template> <script lang="ts"> import LightRuler from 'light-ruler'; import { onMounted, ref, defineComponent } from "vue"; export default defineComponent({ name: "Home", props: {}, setup: () => { const ruler = ref(null); onMounted(() => { const myRuler = new LightRuler({ mountRef: ruler.value, mode: "infinite", scrollElement: "#s", rulerId: "hh", width: 30000, height: 30000, style: { mode: 'right' }, onScroll: (x, y) => { console.log(x, y); }, }) }); return { ruler }; }, }); </script> <style scoped lang="scss"> </style>
Tips: 由于标尺使用的 position: absolute, 所以包裹标尺的容器一定要设置 position 属性。
同时要使标尺固定不动,监听滚动的 element 不能是包裹标尺的 element
配置(Config)
名称含义值mode?绘制模式'infinite'/'translate'/'auto'mountRef?标尺挂载的 DOM(优先于 wrapperElement,会将 mountRef 的 parentElement 作为父容器)HTMLElementwrapperElement?标尺的父容器 DOM (会自动生成标尺 DOM)HTMLElement / CSSSelectorscrollElement?监听滚动的 DOMHTMLElement / CSSSelectorwidth?标尺绘制宽度numberheight?标尺绘制高度numberrulerId?标尺 idstringstyle?标尺样式ObjectonScroll?滚动回调函数(x: number, y: number) => Function
- style 属性
- unit 属性
scale
设置标尺缩放系数,标尺刻度值会根据该缩放系数变化
params
名称含义值scaleNumber缩放系数numberruler.scale(0.5);
resize
重置标尺宽高或尺寸
params
名称含义值width?标尺绘制宽度numberheight?标尺绘制高度numbersize?标尺尺寸numberruler.resize({ width: 1920, height: 1080, size: 18, });
update
更新标尺样式
params
名称含义值style?标尺样式Objectruler.update({ fontColor: "#fff", unit: { text: "mm", }, });
changeScrollElement
改变标尺监听的滚动对象
params
名称含义值scrollElement监听的滚动对象HTMLElement/CSSSelectorruler.changeScrollElement("#wrap");
显示标尺
ruler.show();
隐藏标尺
ruler.hide();
destroy
清除标尺
ruler.destroy();
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK