最近在网上闲逛,发现一个特别好玩的 JavaScript 库,叫 RoughNotation。干嘛用的呢?就是在网页上给文字加标注,比如下划线、方框、高亮文字背景等,不过是手写风格的!截图给大家感受下:
怎么样?是不是感觉网页瞬间就生动了?是不是有种手捧纸质书,用彩笔在纸上做笔记的感觉?文艺 bigger 范儿就出来了!
它支持多种标注形式,除了前面提到的,还有圆圈、叉、删除线等,还能够自定义样式(颜色和粗细等),并且支持动画效果。
使用也很简单,可以通过npm
安装:
npm install --save rough-notation
或者直接通过 ES 模块引入(浏览器支持才行):
<script type="module" src="https://unpkg.com/rough-notation?module">script>
还可以直接引入 IIFE 格式的脚本,这样就会得到一个全局变量RoughNotation
:
<script src="https://unpkg.com/rough-notation/lib/rough-notation.iife.js">script>
用法也很简单,找到需要标注的 DOM 元素,调用 API 就行:
import { annotate } from 'rough-notation';
const e = document.querySelector('#myElement');
const annotation = annotate(e, { type: 'underline' });
annotation.show();
更多用法可参考官方文档和 Github 仓库。
作为技术人,其实我们更关心的是它怎么实现的。RoughNotation 基于 RoughJS 这个库开发,后者就是一个用手绘风格绘图的库。打开 Chrome 控制台查看下元素,发现这些标注是通过 SVG 绘制出来的。SVG 使用了绝对定位,根据目标 DOM 元素位置计算坐标。
好了,就简单介绍到这。有兴趣的可以去安装使用下,分分钟让你的页面变得个性十足,快分享给你的小伙伴们吧!
想加群交流前端技术的看这里:
在前端学习的这条道路上,我么总是会遇到这样或者那样的问题,如果自己蒙头解决或许要花很多时间,如果这个时候你的身边有很多前端大佬,有很多前端小伙伴聚集的地方,就可能遇到过同样的问题,给出解决方案,这样就简单方便多了,困扰自己的问题也能够很快解决,头发也能少掉几根。
为了让你每天学会一个技术,少掉两根头发,多认识一个女生,黔在在创建了一个「前端迷 交流群」,更好的跟大家一起学习交流,大家一起进步,一起成为更好的自己。
有兴趣入群的同学,可长按扫描下方二维码,或添加微信号「xiao_mi_mei6」
一定要备注:城市+昵称+技术方向,根据格式备注,可更快被通过且邀请进群