1.0.1 • Published 3 years ago
medlinkerscale v1.0.1
medlinkerscale
采用 Canvas 绘制的一个可配置的刻度(尺)组件。 主要常用于移动端数值滑动选择,增强用户交互体验。
说明
本刻度组件支持的功能:
- 采用 canvas 绘制组件
- 支持刻度尺基本参数配置传入,
- 监听滑动事件,滑动时实时输出刻度值,
- 支持平滑/缓动滑动、实时绘制刻度,
- 兼容移动端/pc 端滑动,
支持的传入的可配置项参数:
// 默认配置
const defaultConf = {
height: 50, // 画布高度
start: 1000, // 刻度开始值
end: 10000, // 刻度结束值
def: 100, // 中心线停留位置 刻度值
unit: 10, // 刻度间隔 'px'
capacity: 100, // 刻度容量值
background: "#fff", // 设置颜色则背景为对应颜色虚幻效果,不设置默认为全白。
lineColor: "#087af7", // 中心线颜色
openUnitChange: true, // 是否开启间隔刻度变更
fontColor: "#68ca68", // 刻度数值颜色, 刻度线颜色暂未提供设置
fontSize: "16px SimSun, Songti SC", // 刻度数值 字体样式
};
使用
项目中引入 npm 包
npm install medlinkerscale
scale 模块对外暴露一个 init()初始化方法:scale.init()
- 第一个参数为可通过
document.querySelector()
获取到的 HTML 节点; - 第二个参数为需要重置的配置项;
- 第三个参数传入刻度变更时的回调函数,可通过该回调函数获取最新刻度值;
- 返回一个实例对象,对外暴露一些操作方法。
/**
* scale 刻度函数
* @param {String} el html节点
* @param {Object} options 配置信息
* @param {Function} callBack 刻度变更回调函数
* @returns { Object}
*/
// 绘制刻度尺
import newScale from 'medlinkerscale';
const myScale = scale.init('#myScale', {height: 50, start: 10000, end: 2000},callBack);
function callBack(value) {
console.log(value);
}