続・透過PNGをマスクにしてクリッカブルマップを作ろうとしたが挫折した話

あらすじ

unohanat.hatenablog.com

ムキイイイイイイイイイイイイイイイ！！

どうにかならないか調べてみた

「イメージマップを楽に作れないか？」と検索をかけてみると、結構対応策あるみたい。

tsudoi.org

www.vector.co.jp

とりあえず両方試してみました。
使い勝手としてはどちらも同じ、多角形選択ツールで選択すると、エリアのソースが出力される。

ただし上のClickableMapPanelの方が、抽出したエリアを後から操作できるのでより便利。
操作はだいたい下記の通り。

1. エリアを抽出する
2. エリアが「poly_map」レイヤーとして新規出力される（塗りつぶしレイヤー。マスクがパスで構成されてる（ベクトルマスク））
3. ベクトルマスクをパス選択ツールでうねうね修正
4. パス選択ツールでパスを選択したうえで右クリック→選択範囲を作成
5. ClickableMapPanelでpoly選択→「コードを取得する」ボタン押下！！

ただしベジェ曲線とか使うと多分だけどエリア情報がむっちゃ増える。イメージマップはSVGじゃないからね！！

SVGといえば

SVGで描いた地図をクリッカブルマップにする為のスクリプト・「twism」 - かちびと.net

SVGからクリッカブルマップを作るライブラリがあるらしい。
ただし元々したかったことに応用できるかは不明。多分試さない。

結論

PNGのアルファ値からエリア情報が作れるほど甘くはないけど、多角形選択する気力があるなら大丈夫！！