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