zk-scale-plate 标尺 刻度尺

使用方法

``
npm i zk-scale-plate
`

示例

`js
const scaleCanvas=document.getElementByID("canvasId");
const start=new Date('2023/12/01').getTime();
const end=new Date('2023/12/03 12:00').getTime();
//开始时间和结束时间， 这里也可以是 米，海拔，高度等。
const _scale= (end-start)/scaleCanvas.width;
let zero=1;
const scaleBar = new scalePlate(scaleCanvas, {
startNum: start,
endNum: end,
//scale: _scale, //可不传，自动计算 (endNum-startNum)/(pxE-pxS)
pxS: 0, //X/Y轴开始位移 开头如果有留白在此设置
pxE: scaleCanvas.width, //底部结束所在位移 不是高 相对canvas 0点的位移
lineColor: "#fff", //刻度线的颜色
font: "normal 14px Helvetica",
width: scaleCanvas.height, //标尺宽度 size
fx: "x", //x 横向 y 纵向
textAlign: "center",
smallVisible: true,
bigLineSize: 12,
bigSizeMinPx: 45, //大刻度最小间距越大越稀疏
textMargin: 0, //刻度值文本的偏移
textSide: -6, //刻度值文本的偏移
isTime: true, //是否是时间 如果是时间，刻度显示在整点 整分上
fontColor: '#ffffff',
funScale: function (num, index, size, px) {
const date = new Date(num);
const hour = date.getHours();
const min = date.getMinutes();
const sec = date.getSeconds();
// if (zero != hour && hour == 0) { //遇到第一个0时绘制日期
// drawDate(this, num, px)
// }
//zero = hour;
let offsetX = 0, offsetY = 0;
if (size < 3600000) { // 小于 2小时
return ${hour}:${min};
}
//左边距小于20 文本向右偏移
if (px < 20) {
offsetX = 16 - px;
}
//右边距小于20 文本向左偏移
const py = _width - px;
if (py < 20) {
offsetX = py - 18;
}

return {
text: ${hour}时,
offsetX,
offsetY
};
}
});
``