「どんどこわっしょーい!」で始める暗号資産生活

もっと多くの方にモナコインが愛されますように。

イラストマップの作り方教えます!

イラストマップってなんだよ!!!

っていう人のために。

 

これです。

f:id:rikuostory0206:20180403192305p:plain

 

f:id:rikuostory0206:20180403192235p:plain

私がよくサービスをまとめるのに使ってる画像です。

これをJavascriptでいい感じのライブラリ見つけたので

リンク貼って移動できるようにしたいな~

と思ってちまちま進めてました。

作り方

ライブラリ

 

こちらを参考にしております(*´∀`*)

qiita.com

 

まぁだいたいは↑に書いてるので

私の方でちょこっと変更加えた部分、かきますね♪

 

Nodeの追加

1つ1つ説明していくと

ここのsys.addEdgeでNodeを追加&連結させていきます

sys.addNodeでURLを付与させていきます

↑のだとsys.addEdgeで

monacoin→monaparty

monaparty→monalogin

monaparty→monacardを繋げています

画像の追加

画像の追加

3行目からnode.nameを指定して

img.srcでURLを付与してます(*´∀`*)

 

基本的に「他の通貨でイラストマップ作りたいぜ!」っていう人がいたら

上記2つ(画像用意してNode設定するだけ)でいいと思います。

つまり、sys.addNode,sys.addEdge,node.nameなどをポチポチして変えていくだけ。

 

クリック周り

ざっくり説明すると


oneclicked: function (e) {

でクリック時の挙動を設定してます(クリックでリンクを別タブで表示)

まぁ画像自体じゃなく座標に範囲指定されてるので

当たり判定がアレな所あるんですけど…。。

残りはドラッグ&ドロップでぬるぬる移動するようになってます…。。

(よくわかってない)

(ほんとざっくり)

重力いじった

重力をいじるのです。。

以下のリファレンスみながらちょいちょいと微調整しただけなんですけどね。。

実際出来たときに中央に寄ってるなぁ~(近すぎてかぶってるとリンク飛びたいとき邪魔)と感じてたので

方方に散るようにいじりました。(あんま変わってないかも)

f:id:rikuostory0206:20180403191203p:plain

 まぁこんなかんじでできましたよ。。

実際色んな人に手伝ってもらったので自分1人で出来た!!とは言えないんですけど

やってて楽しいですしこれありきでアイデンティティ確立してるとこもあるので続けていきます。。

自分のブログに入れたい!という方はHTMLで↓のを

入れてみてください。

(なんか問題あったら指摘してください…)

 

モナコインのイラストマップ

ビットゼニーのイラストマップ