SVGラインアートを楽しむ JQueryプラグイン Lazy Line Painter
投稿日: 2017年11月3日
線描で徐々にイラストや文字が描かれるサイトは見ていてなかなか楽しいものです。自分のサイトにも取り入れたいと思った結果、採用したのがJQueryのプラグイン「Lazy Line Painter」です。
Lazy Line Painter の使い方
サイトの「How it works」に書いてある通りです
- 線のみのパスでイラストを作成
- サイトの下部にある「SVG TO LASY LINE CONVERTER」にドロップ
- ドロップしたらプレビュー画面の下にあるコードを自分のサイトにコピー&ペースト
- jQueryとGitHubにあるLazy Line Painterのファイルを読み込ませる。
私の場合はSVGデータ部分を別のjsファイルにして作りました。
ちょっとした注意点
サイトにも書いてあるのですが、パスはオープンパスでないと動きません。SVGのパスは点つなぎのようなものですから始点と終点が必要になります。
私がサイトに読み込んだときは最初は動作しませんでした。SVGから生成されるコードを見ていると、終点が無い孤立点がありました。イラストを線描に変換している過程でできていたのですが、線にならなければエラーになりますよね。
他に、illustratorの設定で点線を作っていたのですが、これは動作こそするものの思った描画はされず、点線のアピアランスを分割して、オープンパスの線描に直しました。
座標を疑う
孤立点を消して、点線を修正しても一向に動作しません。そこで、SVGから生成されたコードを検証しました。コードそのものは単純で、
"strokepath": [
{
"path": "M 226 321.7 L 349 444.6",
"duration": 600
},
…
],
"dimensions": {
}
となっているので、[]の中を全部コメントアウトして、{}までを一つずつコメントアウトから戻しました。「,」をつけたり外したりするのを忘れないように。
すると、エラーが起こるデータの中の座標に問題があり、例えば、「”path”: “M 116. 266.1 L 112.3 284.8”,」となっていたのです。よく見ると、Mの後ろのx座標が「116.」となっています。正しくは「116.0」ですね。つまり、小数点の後ろの「0」がなかったのです!! これを直したら問題なく動作しました。
ただ、これはLazy Line Painter のサイトのコンバートエラーではないと思っています。illustratorのaiファイルをsvgに直す時に詳細設定に座標を小数点1位まで設定する項目があったのですが、おそらく、そこで小数点一位の「0」がつけられなかったのだと思います(未検証)。
どうしても動作しないときは座標を検証してみると意外と「0」が抜けているかも。パーツごとに色分けして動作させても面白いでしょうね。サイトのアクセントになりますので、取り組んでみてはいかがでしょうか。
コメントを残す