参数说明
提示
最新版本为 v1.1.0
1. 修复默认使用情况下的一些问题增加
mniGridSize,scaleStep,scaleStepList,zoomToCursor等配置参数，移除配置参数zoomStep优化随鼠标方向缩放的方式
js
const ruler = new Ruler(canvasId, options);canvasId
- 类型：
string - 要求：必须
canvas的id
options
- 类型：
object - 要求：可选
标尺的配置项
listener
- 类型：
boolean - 要求：可选
- 默认值：
true
是否启用鼠标监听事件，如果不启用，标尺没有任何交互功能
width
- 类型：
number - 要求：可选
canvas的宽度，也可以选择直接在canvas标签上设置，如果使用了默认的宽度（300）和高度（150），canvas将默认使用其父元素的宽高
height
- 类型：
number - 要求：可选
canvas的高度，同width
grid
- 类型：
boolean - 要求：可选
- 默认值：
true
是否绘制网格，如果为false则只绘制刻度
gridChange
- 类型：
boolean - 要求：可选
- 默认值：
true
网格大小是否跟随缩放变化，同时变化的还有刻度数以及刻度数间隔
rulerWidth
- 类型：
number - 要求：可选
- 默认值：
20
标尺的宽度
rulerColor
- 类型：
string - 要求：可选
- 默认值：
rgba(255,255,255,0.8)
标尺的背景颜色
scaleColor
- 类型：
string - 要求：可选
- 默认值：
black
刻度的颜色
scaleHeight
- 类型：
number - 要求：可选
- 默认值：
6
刻度的高度（长度）
topNumberPadding
- 类型：
number - 要求：可选
- 默认值：
11
刻度数离容器顶部的间距
leftNumberPadding
- 类型：
number - 要求：可选
- 默认值：
2
刻度数离容器左边的间距
dragButton
- 类型：
0 | 1 | 2 - 要求：可选
- 默认值：
0
拖拽时使用的鼠标按键，默认为0（左键）
minGridSize
- 类型：
number - 要求：可选
- 默认值：
20网格最小尺寸，低于该尺寸不再变小
scaleStepList
- 类型：
Array<number> - 要求：可选
- 默认值：
[1, 2, 5, 10, 25, 50, 100, 150, 300]刻度值数组，必须从小到大
scaleStep
- 类型
number - 要求：可选
- 默认值：
scaleStepList数组的第一个
reverseY
- 类型
boolean - 要求：可选
- 默认值：
false是否将Y轴数值改为从大到小（从上往下）
zoomSpeed
- 类型
number - 要求：可选
- 默认值：
1滚轮缩放速度，仅在默认使用时有效
zoomToCursor
- 类型
boolean - 要求：可选
- 默认值：
true缩放时是否根据鼠标位置进行平移，目前v1.1.0中未实装，默认是true
zoomStep(v1.1已弃用，不再生效)
- 类型：
number - 要求：可选
- 默认值：
0.2
方法
destroy
js
ruler.destroy()销毁此类实例
bindThreeCamera
js
ruler.bindThreeCamera(camera, controls, origin)与three相机同步
camera
- 类型：
THREE.Camera - 要求：必须
three的相机，推荐使用OrthographicCamera
controls
- 类型：
THREE.Controls - 要求：必须
three的控制器，推荐使用MapControls
origin
- 类型：
THREE.Vector3 - 要求：必须
three的坐标原点，一般是Vector3(0,0,0)
reDraw
js
ruler.reDraw(x, y, zoom)绘制标尺，当想手动更改canvas的平移量和缩放时，可调用此方法
x
- 类型：
number - 要求：可选
- 默认值：当前
x
x轴偏移量
y
- 类型：
number - 要求：可选
- 默认值：当前
y
y轴偏移量
zoom
- 类型：
number - 要求：可选
- 默认值：当前
zoom
缩放层级，层级默认为1，且不会小于0
unproject
js
ruler.unproject(x, y, zoom)将鼠标坐标转换为世界坐标（像素）
x
- 类型：
number - 要求：必选
鼠标坐标x
y
- 类型：
number - 要求：必选
鼠标坐标y
zoom
- 类型：
number - 要求：可选
- 默认值：当前
zoom
缩放层级，层级默认为1，且不会小于0
toScale
js
ruler.toScale(x, y)将世界坐标（像素）转为刻度尺坐标
x
- 类型：
number - 要求：必选
世界坐标x
y
- 类型：
number - 要求：必选
世界坐标y