javascript

您所在的位置：网站首页 › slideviewer怎么加标尺 › javascript

javascript

2023-08-19 11:31| 来源: 网络整理| 查看: 265

前言

做过web端编辑器的前端同仁们，或多或少都会接触标尺插件，类似于ps或PPT这些软件中的插件。

比较老的web插件比如jqury的，会产生很多dom，于是写了1个用纯TS和canvas绘制的标尺，不依赖任何第三方库。文档即使用方法如下，欢迎使用，贡献以及提issue!

PS：暂时还不支持辅助线功能，会尽快上线

该插件在一些思路上也参考了另一个大牛的标尺插件daybrush/ruler

light-ruler

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 使用 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 }; }, }); 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) => Functionstyle 属性名称含义值size？标尺尺寸(如 20, 则横向标尺 height 为 20px，纵向标尺 width 为 20px)numberbackgroundColor？标尺背景颜色stringfontColor？标尺字体颜色stringfontSize?标尺字体大小(若不设置会自动计算合适大小，如设置了则为绝对值，不会自适应)numberfontWeight？标尺字体粗细'bold'/ numbertickColor？标尺刻度颜色stringunit?标尺单位样式Objectgap?标尺刻度间隔numberscale?标尺刻度值缩放系数numbershow?标尺初始化后是否显示booleanmode?标尺主题样式'center'/'right'unit 属性名称含义值backgroundColor？单位背景颜色stringfontColor？单位字体颜色stringfontSize?单位字体大小numbertext？单位显示内容stringAPIscale设置标尺缩放系数，标尺刻度值会根据该缩放系数变化

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");show显示标尺ruler.show();hide隐藏标尺ruler.hide();destroy清除标尺ruler.destroy();

【本文地址】

javascript

javascript

今日新闻

推荐新闻