zk-scale-plate v2.2.0

zk-scale-plate 标尺 刻度尺

使用方法

npm i zk-scale-plate

示例

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
                };
            }
        });