SVGでテキストにマーカーを引いたり、くるっと丸く囲む超軽量JavaScriptライブラリ -Rough Notation

テキストに蛍光ペンで引いたようなマーカーを引いたり、下線をつかたり、丸や矩形で囲ったり、さまざまなスタイルでテキストを強調表示できる超軽量(3.63Kb)のJavaScriptライブラリを紹介します。

アニメーションにも対応しており、マーカーをさっと引いたり、丸でくるっと囲んだりも簡単に実装できます。アニメーションはオフにすることもできます。

SVGでテキストにマーカーを引いたり、くるっと丸く囲む超軽量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を追加できます。

または、ESモジュールを直接ロードします。

または、スコープにRoughNotationオブジェクトを作成したIIFEバージョンをロードします。

Step 2: 使い方

強調をつける要素と強調のスタイルを記述する構成を渡すことにより、annotationオブジェクトを作成します。annotationオブジェクトを取得したら、そのオブジェクトに対してshow()を呼び出して強調を表示できます。

このコードにより、SVG要素が兄弟要素として追加されます。

sponsors

top of page

©2024 coliss