SVGでテキストにマーカーを引いたり、くるっと丸く囲む超軽量JavaScriptライブラリ -Rough Notation
Post on:2020年6月15日
sponsors
テキストに蛍光ペンで引いたようなマーカーを引いたり、下線をつかたり、丸や矩形で囲ったり、さまざまなスタイルでテキストを強調表示できる超軽量（3.63Kb）のJavaScriptライブラリを紹介します。
アニメーションにも対応しており、マーカーをさっと引いたり、丸でくるっと囲んだりも簡単に実装できます。アニメーションはオフにすることもできます。
Rough Notation
Rough Notation -GitHub
Rough Notationの特徴
Rough NotationはRoughJSを使用して、SVGでマーカーを引いたり、下線をつけたり、丸で囲ったり、さまざまなスタイルでテキストを強調表示できます。マーカーや下線や丸はアニメーションにも対応しており、オフにすることもできます。
下記のGIFアニメはコマ数を落としています、実際はもっと滑らかです。
マーカーや下線や丸はアニメーションにも対応
MITライセンスで、商用プロジェクトでも無料で利用できます。
Rough Notationのデモ
デモでは、マーカーや下線や丸などRough Notationの動作を楽しめます。
デモページ: 下線と矩形
デモページ: 丸とマーカー
デモページ: 打ち消し線と×
デモページ: グループ
カラー、ストローク、アニメーションの持続時間など、さまざまなプロパティを設定することができます。
Rough Notationの使い方
Step 1: インストール
npm経由で、プロジェクトにRough Notationを追加できます。
|
1 |
npm install --save rough-notation |
または、ESモジュールを直接ロードします。
|
1 |
<script type="module" src="https://unpkg.com/rough-notation?module"></script> |
または、スコープにRoughNotationオブジェクトを作成したIIFEバージョンをロードします。
|
1 |
<script type="module" src="https://unpkg.com/rough-notation/lib/rough-notation.iife.js"></script> |
Step 2: 使い方
強調をつける要素と強調のスタイルを記述する構成を渡すことにより、annotationオブジェクトを作成します。annotationオブジェクトを取得したら、そのオブジェクトに対してshow()を呼び出して強調を表示できます。
|
1 2 3 4 5 |
import { annotate } from 'rough-notation'; const e = document.querySelector('#myElement'); const annotation = annotate(e, { type: 'underline' }); annotation.show(); |
このコードにより、SVG要素が兄弟要素として追加されます。
sponsors
