{"id":18113378,"url":"https://github.com/gxy5202/light-ruler","last_synced_at":"2025-04-14T07:11:09.991Z","repository":{"id":42125704,"uuid":"423302631","full_name":"gxy5202/light-ruler","owner":"gxy5202","description":"🚀A web ruler component made by canvas and typescript","archived":false,"fork":false,"pushed_at":"2024-02-17T15:29:48.000Z","size":61,"stargazers_count":21,"open_issues_count":6,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-10T15:26:51.036Z","etag":null,"topics":["canvas","dom","ruler","typescript"],"latest_commit_sha":null,"homepage":"https://gomi.site/LightRuler","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gxy5202.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-11-01T01:31:18.000Z","updated_at":"2024-07-05T06:36:06.000Z","dependencies_parsed_at":"2022-09-01T16:51:52.149Z","dependency_job_id":null,"html_url":"https://github.com/gxy5202/light-ruler","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gxy5202%2Flight-ruler","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gxy5202%2Flight-ruler/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gxy5202%2Flight-ruler/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gxy5202%2Flight-ruler/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gxy5202","download_url":"https://codeload.github.com/gxy5202/light-ruler/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248837287,"owners_count":21169374,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["canvas","dom","ruler","typescript"],"created_at":"2024-11-01T02:08:07.961Z","updated_at":"2025-04-14T07:11:09.968Z","avatar_url":"https://github.com/gxy5202.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# light-ruler\n\n[![oBz0Qe.png](https://s4.ax1x.com/2021/12/05/oBz0Qe.png)](https://imgtu.com/i/oBz0Qe)\n\n![](https://img.shields.io/github/stars/gxy5202/light-ruler) ![](https://img.shields.io/github/package-json/v/gxy5202/light-ruler)\n\n[DEMO](https://www.gomi.site/LightRuler \"DEMO\") / [Github](https://github.com/gxy5202/light-ruler \"Github\")\n\nPS: This project was accomplished by refering to daybrush's project and I would like to extend my sincere thanks to him.\n[daybrush's Github](https://github.com/daybrush/ruler \"Github\")\n\n### 主要特性(Features)\n\n-   使用 canvas 绘制，支持无限滚动，不会生成多个 DOM 和引起页面重绘\n-   支持自定义标尺背景色、文字色、刻度色以及单位\n-   支持 translate 模式，即首次 canvas 绘制标尺后，滚动通过 css transform 实现\n-   使用 Typescript 编写，不依赖任何第三方库，打包后文件仅有 26kb(包含样式)\n-   支持缩放刻度值\n-   目前提供 2 种标尺主题样式\n-   提供多实例控制器，可管理多个标尺实例\n\n### 安装(Installation)\n\n---\n\n`npm i light-ruler`\n\n### 使用(Useage)\n\n---\n\n-   基本使用\n\n```javascript\nimport LightRuler from \"light-ruler\";\n\nconst ruler = new LightRuler({\n    mode: \"infinite\",\n    wrapperElement: document.getElementById(\"box\"),\n    scrollElement: document.getElementById(\"wrap\"),\n    rulerId: \"my-ruler\",\n    width: 30000,\n    height: 30000,\n    style: {\n        mode: \"right\",\n    },\n    onScroll: (x, y) =\u003e {\n        console.log(x, y);\n    },\n});\n```\n\n-   React 使用\n\n```javascript\nimport React, { useRef, useEffect } from \"react\";\nimport LightRuler from \"light-ruler\";\n\nexport default function () {\n    const rulerRef = useRef(null);\n\n    useEffect(() =\u003e {\n        const ruler = new LightRuler({\n            mode: \"infinite\",\n            mountRef: rulerRef.current,\n            scrollElement: document.getElementById(\"wrap\"),\n            rulerId: \"ruler\",\n            width: 30000,\n            height: 30000,\n            onScroll: (x, y) =\u003e {\n                console.log(x, y);\n            },\n        });\n    }, []);\n    return (\n        \u003cdiv id=\"root\"\u003e\n            \u003cdiv id=\"box\"\u003e\n                \u003cdiv id=\"wrap\"\u003e...\u003c/div\u003e\n                \u003cdiv id=\"ruler\" ref={rulerRef}\u003e\u003c/div\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n    );\n}\n```\n\n-   Vue3 使用\n\n```javascript\n\u003ctemplate\u003e\n\t\u003cdiv id=\"gomi-homePage\"\u003e\n\t\t\u003cdiv\n\t\t\tid=\"box\"\n\t\t\t:style=\"{ position: 'relative', width: '800px', height: '600px', overflow: 'hidden', background: 'red' }\"\n\t\t\u003e\n\t\t\t\u003cdiv id=\"s\" :style=\"{ width: '100%', height: '100%', overflow: 'auto' }\"\u003e\n\t\t\t\t\u003cdiv id=\"wrap\" :style=\"{ width: '30000px', height: '4600px' }\"\u003e\u003c/div\u003e\n\t\t\t\u003c/div\u003e\n\t\t\t\u003cdiv id=\"ruler\" ref=\"ruler\"\u003e\u003c/div\u003e\n\t\t\u003c/div\u003e\n\t\t\u003cfooter\u003e\n\t\t\u003c/footer\u003e\n\t\u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript lang=\"ts\"\u003e\nimport LightRuler from 'light-ruler';\nimport { onMounted, ref, defineComponent } from \"vue\";\n\nexport default defineComponent({\n\tname: \"Home\",\n\tprops: {},\n\tsetup: () =\u003e {\n\t\tconst ruler = ref(null);\n\t\tonMounted(() =\u003e {\n\t\t\tconst myRuler = new LightRuler({\n\t\t\t\tmountRef: ruler.value,\n\t\t\t\tmode: \"infinite\",\n\t\t\t\tscrollElement: \"#s\",\n\t\t\t\trulerId: \"hh\",\n\t\t\t\twidth: 30000,\n\t\t\t\theight: 30000,\n\t\t\t\tstyle: {\n\t\t\t\t\tmode: 'right'\n\t\t\t\t},\n\t\t\t\tonScroll: (x, y) =\u003e {\n\t\t\t\t\tconsole.log(x, y);\n\t\t\t\t},\n\t\t\t})\n\t\t});\n\n\t\treturn {  ruler };\n\t},\n});\n\u003c/script\u003e\n\n\u003cstyle scoped lang=\"scss\"\u003e\n\u003c/style\u003e\n\n```\n\n\u003e Tips: 由于标尺使用的 position: absolute， 所以包裹标尺的容器一定要设置 position 属性。\n\u003e 同时要使标尺固定不动，监听滚动的 element 不能是包裹标尺的 element\n\n### 配置(Config)\n\n---\n\n| 名称             | 含义                                                                               | 值                                 |\n| :--------------- | :--------------------------------------------------------------------------------- | :--------------------------------- |\n| mode？           | 绘制模式                                                                           | 'infinite'/'translate'/'auto'      |\n| mountRef？       | 标尺挂载的 DOM（优先于 wrapperElement，会将 mountRef 的 parentElement 作为父容器） | HTMLElement                        |\n| wrapperElement？ | 标尺的父容器 DOM (会自动生成标尺 DOM)                                              | HTMLElement / CSSSelector          |\n| scrollElement?   | 监听滚动的 DOM                                                                     | HTMLElement / CSSSelector          |\n| width？          | 标尺绘制宽度                                                                       | number                             |\n| height？         | 标尺绘制高度                                                                       | number                             |\n| rulerId?         | 标尺 id                                                                            | string                             |\n| style?           | 标尺样式                                                                           | Object                             |\n| onScroll?        | 滚动回调函数                                                                       | (x: number, y: number) =\u003e Function |\n\n-   style 属性\n\n| 名称              | 含义                                                                     | 值               |\n| :---------------- | :----------------------------------------------------------------------- | :--------------- |\n| size？            | 标尺尺寸(如 20, 则横向标尺 height 为 20px，纵向标尺 width 为 20px)       | number           |\n| backgroundColor？ | 标尺背景颜色                                                             | string           |\n| fontColor？       | 标尺字体颜色                                                             | string           |\n| fontSize?         | 标尺字体大小(若不设置会自动计算合适大小，如设置了则为绝对值，不会自适应) | number           |\n| fontWeight？      | 标尺字体粗细                                                             | 'bold'/ number   |\n| tickColor？       | 标尺刻度颜色                                                             | string           |\n| unit?             | 标尺单位样式                                                             | Object           |\n| gap?              | 标尺刻度间隔                                                             | number           |\n| scale?            | 标尺刻度值缩放系数                                                       | number           |\n| show?             | 标尺初始化后是否显示                                                     | boolean          |\n| mode?             | 标尺主题样式                                                             | 'center'/'right' |\n\n-   unit 属性\n\n| 名称              | 含义         | 值     |\n| :---------------- | :----------- | :----- |\n| backgroundColor？ | 单位背景颜色 | string |\n| fontColor？       | 单位字体颜色 | string |\n| fontSize?         | 单位字体大小 | number |\n| text？            | 单位显示内容 | string |\n\n### API\n\n---\n\n#### scale\n\n\u003e 设置标尺缩放系数，标尺刻度值会根据该缩放系数变化\n\nparams\n\n| 名称        | 含义     | 值     |\n| :---------- | :------- | :----- |\n| scaleNumber | 缩放系数 | number |\n\n```javascript\nruler.scale(0.5);\n```\n\n#### resize\n\n\u003e 重置标尺宽高或尺寸\n\nparams\n\n| 名称    | 含义         | 值     |\n| :------ | :----------- | :----- |\n| width?  | 标尺绘制宽度 | number |\n| height? | 标尺绘制高度 | number |\n| size?   | 标尺尺寸     | number |\n\n```javascript\nruler.resize({\n    width: 1920,\n    height: 1080,\n    size: 18,\n});\n```\n\n#### update\n\n\u003e 更新标尺样式\n\nparams\n\n| 名称   | 含义     | 值     |\n| :----- | :------- | :----- |\n| style? | 标尺样式 | Object |\n\n```javascript\nruler.update({\n    fontColor: \"#fff\",\n    unit: {\n        text: \"mm\",\n    },\n});\n```\n\n#### changeScrollElement\n\n\u003e 改变标尺监听的滚动对象\n\nparams\n\n| 名称          | 含义           | 值                      |\n| :------------ | :------------- | :---------------------- |\n| scrollElement | 监听的滚动对象 | HTMLElement/CSSSelector |\n\n```javascript\nruler.changeScrollElement(\"#wrap\");\n```\n\n#### show\n\n\u003e 显示标尺\n\n```javascript\nruler.show();\n```\n\n#### hide\n\n\u003e 隐藏标尺\n\n```javascript\nruler.hide();\n```\n\n#### destroy\n\n\u003e 清除标尺\n\n```javascript\nruler.destroy();\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgxy5202%2Flight-ruler","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgxy5202%2Flight-ruler","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgxy5202%2Flight-ruler/lists"}