# medlinkerscale

> 刻度尺

Latest version **1.0.1** (published 2021-03-12) · ISC license · 0 weekly downloads

## Install

```sh
npm install medlinkerscale
pnpm add medlinkerscale
yarn add medlinkerscale
bun add medlinkerscale
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2021-03-12 |
| First published | 2021-03-12 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 15.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | leeycul |
| Maintainers | leeycul |

## Links

- npm: https://www.npmjs.com/package/medlinkerscale
- npm.io page: https://npm.io/package/medlinkerscale

## Recent versions

- 1.0.1 (latest) — 2021-03-12
- 1.0.0 — 2021-03-12

## README

# medlinkerscale

采用 Canvas 绘制的一个可配置的刻度(尺)组件。
主要常用于移动端数值滑动选择，增强用户交互体验。

## 说明

本刻度组件支持的功能：

- 采用 canvas 绘制组件
- 支持刻度尺基本参数配置传入，
- 监听滑动事件，滑动时实时输出刻度值，
- 支持平滑/缓动滑动、实时绘制刻度，
- 兼容移动端/pc 端滑动，

支持的传入的可配置项参数：

```javascript
// 默认配置
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 节点；
- 第二个参数为需要重置的配置项；
- 第三个参数传入刻度变更时的回调函数，可通过该回调函数获取最新刻度值；
- 返回一个实例对象，对外暴露一些操作方法。

```javascript
/**
 * 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);
}
```

---
_Source: https://npm.io/package/medlinkerscale · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._