PlusOne Blog

【JavaScript】手書き風マーカや強調、囲いなど

今回は、手書き風のマーカや強調、囲いなどを作成するjsライブラリ「Rough Notation」(WEBサイトGitHub)を紹介します。
サイトの中で、ワンポイントのアクセントに使用するとイイ感じになると思います。
 
 

jsの実装

「annotation注釈 を付ける要素」と「注釈スタイルを記述する構成」を渡してオブジェクトを作成します。
注釈オブジェクトを取得したら、それを呼び出しshow()て注釈を表示できます。
 

 <script type="module">
  import { annotate } from "https://unpkg.com/rough-notation?module";

  const e = document.querySelector('#myElement');
  const annotation = annotate(e, { type: 'underline' });
  annotation.show();
 </script>

 
OPTIONのプロパティ
 
 type
  装飾の種類を指定
  ・underline: アンダーライン
  ・box: ボックスで囲う
  ・circle: 円で囲う
  ・highlight: 蛍光ペンでマークされてようにマーカを引く
  ・strike-through: 取り消し線を引く
  ・crossed-off: ×マークを書く
  ・bracket: 周りに角かっこを描画 デフォルトでは右側にありますが、左、右、上、下のいずれかまたはすべてに構成できます
 
 animate
  アニメーション効果をつけるかどうかを指定
  デフォルトは true
 
 animationDuration
  アニメーションする時間を指定
  デフォルトは 800ms
 
 color
  装飾の色を指定
  デフォルトは currentColor
 
 strokeWidth
  装飾の線幅を指定
  デフォルトは 1
 
 padding
  要素と装飾の隙間の幅を指定
  上下左右を個別に、[top,right,bottom,left] [top & bottom, left & right] と指定することもできます。
  デフォルトは 5px
 
 multiline
  インライン要素のみ有効
  複数行に装飾するときに true に設定します
 
 iterations
  装飾を描画する際の繰り返し数を設定します
  デフォルトは 2
 
 brackets
  角かっこを装飾する位置を設定します(left, right, top, bottom)
  デフォルトは right
 
 rtl
  左から右へ記載する文章のときに、true を設定します。
 
 
Annotation Group
装飾するオブジェクトをグループ化することにより、描画順を指定することができます。

 <script type="module">
  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();
 </script>

 

サンプル

 

 

この記事を読む
記事一覧に戻る