どうも!LSSです!!
今回はまたSVG。
ですが、SVGとJavaScriptの連携のごくごく基本的なところを試してみます!
真っ赤な太陽
青空、お日様、草原!
…今となっては懐かしい?
LSSが初めてSVGで描いた絵をもう一回、引っ張りだしてきました。
で、絵自体は前と全く同じものなんですが、ここにJavaScriptの仕掛けを施してみました!
「赤い太陽」をクリックしてみてください^^
…クリックするたび、ちょっとづつ、赤い太陽が下に降りていきます。
太陽以外の部分では反応しないのもポイント。
コード
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="400" viewbox="0 0 300 400">
<rect x="0" y="0" width="300" height="400" fill="lightblue"></rect>
<circle id="sun" cx="230" cy="70" r="40" fill="red"></circle>
<rect x="0" y="300" width="300" height="100" fill="yellowgreen"></rect>
</svg>
<script>
sun.addEventListener("click",sunclk,false);
function sunclk(e){
sun.setAttribute("cy",parseFloat(sun.getAttribute("cy"))+5);
}
</script>
新たに付け加えた部分を赤文字にしています。
試しなので、ごくごく単純なコードにしました。
コード解説
SVGコード中の太陽にあたる部分
今回、操作する対象である「真っ赤な太陽」。
SVGコード中で言うと、
<circle id="sun" cx="230" cy="70" r="40" fill="red"></circle>
この部分になります。
cx と cy は「円の中心座標」
この絵の場合、230と70なので、
「(絵の左上の角から見て)右に230、下に70」
の位置を中心とした円、って事になります。
r は「円の半径」
この絵の場合、40なので、
「円の半径は40」
って事になります。
最後の fill は「塗りつぶしの色」
塗りつぶさない場合は "none" を指定しますが、この絵の場合 red を指定しているので
「円の内側は赤く塗りつぶす」
って事になります。
そうして描いていた太陽に、id="sun" を追加しました。
これで、この「赤く塗りつぶした円」を sun という id で制御できるようになります。
太陽をクリックした時に処理を実行
sun.addEventListener("click",sunclk,false);
↑スクリプト内にまず、こんな記載を入れています。
この一文を日本語で言うと、
「sunというモノに対して、イベント監視を付与する(addEventListener)。
今後は、クリックされた時("click")に、関数 sunclk を実行する。
上位要素にイベント伝播はしない(false)。」
という意味になります。(最後の一行はあまり気にしなくていいですw)
関数 sunclk 内での処理
sun.setAttribute("cy",parseFloat(sun.getAttribute("cy"))+5);
一行ですが、3階層構造になっているので、色分けしてみました。
一番内側から見ていきます。
sun.getAttribute("cy")
「getAttribute」は、要素のプロパティの現在の値を取り出します。
「sun というモノの cy っていうプロパティの値」って事になります。
SVGコード中で、sunというidをつけた太陽の、cyは「円の中心座標」の上下位置を指定していたもので、最初 "70" にしていたものでした。
なので、最初に太陽をクリックした時、「sun.getAttribute("cy")」は"70"って事になります。
※ただし、ここで取得できる値は数値としての70ではなく、"70"という文字列になります。
parseFloat(文字列)+5
parseFloatは「文字列から数値を取り出し、数値に変換」する関数です。
例えば
parseFloat("70")
だったら、数値としての 70 に変換されます。
そうして数値に変換した上で、後ろに「+5」をつけているので、
parseFloat(sun.getAttribute("cy"))+5は「75」という値になります。
※もし、数値化せず「"70"+5」としてしまうと、文字列として付け足してしまい、"705"になってしまう事になります^^:
sun.setAttribute("cy",値);
「setAttribute」は「getAttribute」の逆で、要素のプロパティに値をセットします。
「sun というモノの cy っていうプロパティの値」を書き換える、という事ですね。
例えば、
sun.setAttribute("cy","100");
を実行すると、「太陽の中心座標が下に100の位置」に変化する事になります。
この3つを組み合わせた、
sun.setAttribute("cy",parseFloat(sun.getAttribute("cy"))+5);
は、「実行される度に cy の値が 5 づつ増える」というコードになります。
一回目にクリックした時は「70」だったのが「75」になり、さらにクリックすると「75」から「80」に変化するわけです。
こうして、
「太陽をクリックする」
→「関数 sunclk が実行される」
→「太陽の「中心座標」が 5 だけ下に下がる」
という仕組みが完成し、「クリックするたびに太陽は下がっていく」事になります^^
SVGの一部分をJavaScriptから変化させられる、って事は
今後、JavaScriptでゲームを作る時、もう
「ゲーム画面全体をひとつのSVG」
にしてしまえば、
などのメリットがありそうです^^
ってなとこで、今回はこのへんで!
次回もまた、よろしくお願いします^^