标尺（ruler）

简述

使用原生canvas绘制标尺，可以进行平移与缩放，适用于低代码平台作为背景画布，也可以以此基础制作2d图形编辑器，或与Three.js 结合制作场景编辑器

由于是js，所以不受前端框架限制，适用于各个项目中

ruler

原生canvas绘制标尺，可以进行平移与缩放，js库，所以不受前端框架限制，适用于各个项目中

在线示例

标尺初始化

标尺初始化

绑定three

标尺绑定three

安装

npm

$ npm i @night-tea/ruler

pnpm

$ pnpm i @night-tea/ruler

yarn

$ yarn add @night-tea/ruler

使用

单独使用

<div class="top">
  <canvas id="rulerBox"></canvas>
</div>

*,
body {
  margin: 0px;
  padding: 0px;
}
.top {
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}
#rulerBox {
  position: absolute;
  top: 0;
}

import Ruler from '@night-tea/ruler'
const ruler = new Ruler("rulerBox", { grid: true, isListener: true });

绑定Three

ruler.bindThreeCamera(camera, controls, new THREE.Vector3(0, 0, 0));