资料
annotation 这个对象
isShowing() 判断目前显示还是隐藏 Boolean
show() 显示,展示动画
hide() 隐藏,这不是动画
remove() 删除跟dom的联系
确定的东西不能被修改
const e = document.querySelector('#myElement');
const annotation = annotate(e, { type: 'underline', color: 'red' });
annotation.show();
annotation.color = 'green';// 颜色不能被修改
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.aaa {
line-height: 40px;
}
</style>
<body>
<main>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed accumsan nisi hendrerit augue molestie tempus.
<em>Phasellus画横线</em> purus quam, aliquet nec commodo quis, pharetra ut orci. Donec laoreet ligula nisl, placerat
molestie
mauris luctus id. Fusce dapibus non libero nec lobortis. Nullam iaculis nisl ac eros consequat, sit amet placerat
massa vulputate. Maecenas euismod volutpat ultrices. Pellentesque felis ex, ullamcorper in felis finibus, feugiat
dignissim augue. Integer malesuada non eros consectetur interdum. Mauris mollis non urna in porta.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed accumsan nisi hendrerit augue molestie tempus.
<strong>Phasellus框起来</strong> purus quam, aliquet nec commodo quis, pharetra ut orci. Donec laoreet ligula nisl,
placerat molestie
mauris luctus id. Fusce dapibus non libero nec lobortis. Nullam iaculis nisl ac eros consequat, sit amet placerat
massa vulputate. <span>Maecenas euismod volutpat ultrices. Pellentesque felis ex, ullamcorper in felis finibus, feugiat
dignissim augue. Integer malesuada non eros consectetur interdum. Mauris mollis non urna in porta.圈起来</span>
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed accumsan nisi hendrerit augue molestie tempus.
<span id="block">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed accumsan nisi hendrerit augue molestie tempus.
Phasellus purus quam, aliquet nec commodo quis, pharetra ut orci. Donec laoreet ligula nisl, placerat
molestie
mauris luctus id. Fusce dapibus non libero nec lobortis. Nullam iaculis nisl ac eros consequat, sit amet placerat
massa vulputate. Maecenas euismod volutpat ultrices. Pellentesque felis ex, ullamcorper in felis finibus, feugiat
dignissim augue. Integer malesuada non eros consectetur interdum. Mauris mollis non urna in porta.涂上颜色
</span>
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed accumsan nisi hendrerit augue molestie tempus.
Phasellus purus quam, aliquet nec commodo quis, pharetra ut orci. Donec laoreet ligula nisl, placerat
molestie
mauris luctus id. Fusce dapibus non libero nec lobortis. Nullam iaculis nisl ac eros consequat, sit amet placerat
<b id="b">ullamcorper feugiat画叉叉</b>
massa vulputate. Maecenas euismod volutpat ultrices. Pellentesque felis ex,
dignissim augue. Integer malesuada non eros consectetur interdum. Mauris mollis non urna in <b id="a">portasdsddssd删除线</b>.
<br>
dignissim augue. Integer malesuada non eros consectetur interdum. Mauris mollis non urn <b id="c"> massa vulputate. Maecenas euismod vol包起来</b>
</p>
</main>
<script type="module">
import {annotate,annotationGroup} from 'https://unpkg.com/rough-notation?module'
// 下划线
const e = document.querySelector('em');
const annotation = annotate(e, {type: 'underline', color: 'blue'});
// annotation.show();
// 方框框起来
const e1 = document.querySelector('strong');
const annotation1 = annotate(e1, {type: 'box', color: 'red', padding: 10});
// annotation1.show();
// 圈起来
const e2 = document.querySelector('span');
const annotation2 = annotate(e2, {type: 'circle', color: 'orange', padding: 10});
// annotation2.show();
// 涂上
const e3 = document.querySelector('#block');
const annotation3 = annotate(e3, {type: 'highlight', color: 'yellow',animationDuration: 1500, multiline: true,});
// multiline 多行展示,发现一个问题就是,首先他不是在首行展示的,才有效
// annotation3.show();
// 删除线
const e4 = document.querySelector('#a');
const annotation4 = annotate(e4, {type: 'strike-through', color: 'rgb(27, 94, 32)'});
// annotation4.show();
// 画叉叉
const e5 = document.querySelector('#b');
const annotation5 = annotate(e5, {type: 'crossed-off', color: 'rgb(94,39,30)',animationDuration:2000,iterations:6});
// animationDuration 持续时间,默认800ms
// iterations 迭代的次数,默认2,也就是说默认画两下
// annotation5.show();
// 画中括号
const e6 = document.querySelector('#c');
const annotation6 = annotate(e6, {type: 'bracket', color: 'rgb(94,39,30)',padding:[2,10],brackets: ['right','left'], strokeWidth: 3});
// animate 类型Boolean,默认true,用途动画的开启关闭
// strokeWidth 线的宽度默认1
// padding 默认5 就是top, left ,right,bottom 都是5
// * 如果是中括号 [top,right,bottom,left]或者 [top & bottom, right & left]
// annotation6.show();
// brackets 中括号的回执
// 是取值 string/[]
// 单个值 left,right,top,bottom
//多个值 ['left','right'] 就是先画做括号,再画右括号
//放在一个数组中一起添加添加
const ag = annotationGroup([annotation, annotation2, annotation3, annotation4, annotation5, annotation6]);
ag.show();
// 这个比较有条理性
//区别就是会从左到右依次开始动画加载
</script>
</body>
</html>