【JavaScript】文字列を扇状に表示するためのスクリプト「Arctext.js」

村上 著者:村上

【JavaScript】文字列を扇状に表示するためのスクリプト「Arctext.js」

今回は使わなかったのですが、今後使う機会があるかもしれないので備忘録としてまとめ。
文字列を扇状に表示する方法です。
画像にしてしまうのが一番簡単そうですが、それができない場合には有効です。

そのスクリプトがこちらの「Arctext.js」です。
公式サイトは下記からご確認ください。

Arctext.js – Curving text with CSS3 and jQuery
https://tympanus.net/Development/Arctext/

 

使い方は、まず公式の配布ページから、ソースをダウンロードします。
で、ダウンロードしたファイル内にある jquery.arctext.js を任意の場所にアップロードし、HTML の head 要素内で読み込みます。
なお、こちらの実行には jQuery も必要なので、一緒に読み込みます。
コードは下記のとおりです。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="./jquery.arctext.js"></script>

準備はこれでOK。

あとは実装ですが、まず、装飾したいテキストに任意の ID 名を指定します。

<p id='arc-text'>扇状に表示したいテキスト</p>

そして、任意のタイミングで下記の処理を実行します。

$('#arc-text').arctext({radius: 300});

HTML が読み込み終わったタイミングとかでOKだと思います。
なお、上記の記述では、半径 300px の扇状にテキストをカーブさせています。
もう少し急なカーブを描きたい場合は、数値を大きくしてください。

ほかにもオプションがあり、文字列をカーブさせたいけれど、文字の向きはまっすぐなままにしたい、ということもできます。

$('#arc-text').arctext({radius: 300, rotate: false});

また、今までの指定では、山型のカーブになりましたが、dir: -1 というオプションを追加すると、谷型のカーブを描くようにもできます。

$('#arc-text').arctext({radius: 300, dir: -1});

これらを組み合わせれば、文字列を円状に表示することもできますね。

 

以上、文字列を扇状に表示するためのスクリプト「Arctext.js」のご紹介でした。
機会があればぜひ使ってみたいと思います。

  • この記事いいね! (0)

著者について

村上

村上 administrator