# view-mark

Latest version **0.1.3** (published 2020-12-15) · 0 weekly downloads

## Install

```sh
npm install view-mark
pnpm add view-mark
yarn add view-mark
bun add view-mark
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; low quality score; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.3 |
| Published | 2020-12-15 |
| First published | 2020-12-11 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 27.3 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | Matt |
| Maintainers | matt_today_home |
| Keywords | view-mark, 标记, 图片标记 |

## Links

- npm: https://www.npmjs.com/package/view-mark
- Repository: https://github.com/MattToday/view-mark
- Homepage: https://github.com/MattToday/view-mark#readme
- Issues: https://github.com/MattToday/view-mark/issues
- npm.io page: https://npm.io/package/view-mark

## Dependencies (5)

- [vue](https://npm.io/package/vue.md) ^2.6.11
- [vuex](https://npm.io/package/vuex.md) ^3.4.0
- [core-js](https://npm.io/package/core-js.md) ^3.6.5
- [view-mark](https://npm.io/package/view-mark.md) ^0.1.1
- [vue-router](https://npm.io/package/vue-router.md) ^3.2.0

## Recent versions

- 0.1.3 (latest) — 2020-12-15
- 0.1.2 — 2020-12-15
- 0.1.1 — 2020-12-11
- 0.1.0 — 2020-12-11

## README

# view-mark



### 介绍

​	覆盖在图片上可以定义多个点并设置1-6个标记介绍线

## 安装
```
npm install view-mark -save
```

## API

mes需要设置的标记数组，textArr每个标记的信息，text标记文本描述，num 1-6标记描述线的位置。dot标记位置值为百分比值

angle 标记描述线分部距离

distance 标记描述线离标记中心距离

dotColor 标记中心点颜色

lineColor 标记线颜色

textColor 标记文本颜色

fontSize 标记文本大小

textPadding 标记文本距离下划线两端距离

animation 是否开启动画（暂未完善 ）

speed 动画速度

以下是默认值

````
config = {
  mes: [
    {
      textArr: [{txt: 'xxxx', num: 5}],
      dot: {x: 70, y: 40}
    },
    {
      textArr: [{txt: 'xxxx', num: 0}, {txt: 'xxx', num: 1}, {txt: 'xxx', num: 2}, {txt: 'xxx', num: 5}],
      dot: {x: 20, y: 50}
    }
  ],
  angle: 70,
  distance: 40,
  dotColor: '#00ff00',
  lineColor: '#00ff00',
  textColor: 'yellow',
  fontSize: '28',
  textPadding: 10,
  animation: true,
  speed: 3
}
````

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