We can't find the internet
Attempting to reconnect
# 使用rough-notation创建强调信息
`rough-notaion`是一个用`javascript`开发的可以用在web页面上，对内容进行强调的标记工具。
`rough-notaion`使用svg在目标元素上创建对应的标记图。
可以创建出多种样式：
* underline
* box
* circle
* highlight
* strike-through
* crossed-off
* brackets
* multiple lines
* annotation group
* annotation styling
* no animation
### 安装方式
npm
```bash
npm install --save rough-notation
```
Or load es module directly
```html
<script type="module" src="https://unpkg.com/rough-notation?module"></script>
```
Or load IIEF version directly by a global object `RoughNotation`
```html
<script src="https://unpkg.com/rough-notation/lib/rough-notation.iife.js"></script>
```
### 使用方式
```js
import { annotate } from 'rough-notation';
// Or using unpkg
// import { annotate } from 'https://unpkg.com/rough-notation?module';
const e = document.querySelector('#myElement');
const annotation = annotate(e, { type: 'underline' });
annotation.show();
```
**Annotation Group**
```js
import { annotate, annotationGroup } from 'rough-notation';
const a1 = annotate(document.querySelector('#e1'), { type: 'underline' });
const a2 = annotate(document.querySelector('#e3'), { type: 'box' });
const a3 = annotate(document.querySelector('#e3'), { type: 'circle' });
const ag = annotationGroup([a3, a1, a2]);
ag.show();
```
### 配置
代码是通过typescript编写的，可通过typescript查看到所有的配置选项。
```
type
This is a mandatory field. It sets the annotation style. Following are the list of supported annotation types:
underline: This style creates a sketchy underline below an element.
box: This style draws a box around the element.
circle: This style draws a circle around the element.
highlight: This style creates a highlight effect as if marked by a highlighter.
strike-through: This style draws horizontal lines through the element.
crossed-off: This style draws an 'X' across the element.
bracket: This style draws a bracket around an element, usually a paragraph of text. By default on the right side, but can be configured to any or all of left, right, top, bottom.
animate
Boolean property to turn on/off animation when annotating. Default value is true.
animationDuration
Duration of the animation in milliseconds. Default is 800ms.
color
String value representing the color of the annotation sketch. Default value is currentColor.
strokeWidth
Width of the annotation strokes. Default value is 1.
padding
Padding between the element and roughly where the annotation is drawn. Default value is 5 (in pixels). If you wish to specify different top, left, right, bottom paddings, you can set the value to an array akin to CSS style padding [top, right, bottom, left] or just [top & bottom, left & right].
multiline
This property only applies to inline text. To annotate multiline text (each line separately), set this property to true.
iterations
By default annotations are drawn in two iterations, e.g. when underlining, drawing from left to right and then back from right to left. Setting this property can let you configure the number of iterations.
brackets
Value could be a string or an array of strings, each string being one of these values: left, right, top, bottom. When drawing a bracket, this configures which side(s) of the element to bracket. Default value is right.
rtl
By default annotations are drawn from left to right. To start with right to left, set this property to true.
```
### API
```
isShowing(): boolean
Returns if the annotation is showing
show()
Draws the annotation. If the annotation is set to animate (default), it will animate the drawing. If called again, it will re-render the annotation, updating any size or location changes.
*Note: to reanimate the annotation, call hide() and then show() again.
hide()
Hides the annotation if showing. This is not animated.
remove()
Unlinks the annotation from the element.
```
**Updating styles**
All the properties in the configuration are also exposed in this object. e.g. if you'd like to change the color, you can do that after the annotation has been drawn.
```js
const e = document.querySelector('#myElement');
const annotation = annotate(e, { type: 'underline', color: 'red' });
annotation.show();
annotation.color = 'green';
```
*Note: the type of the annotation cannot be changed. Create a new annotation for that.*