Little Strange Software

スマホアプリの開発を行う LittleStrangeSoftware のブログです。

【SVG・JavaScript】SVG内の要素をJavaScriptから制御してみるテスト

 どうも!LSSです!!

 

今回はまたSVG

ですが、SVGJavaScriptの連携のごくごく基本的なところを試してみます!

 

 

真っ赤な太陽

 

 青空、お日様、草原!

 

…今となっては懐かしい?

 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
にしてしまえば、 

  • 表現の自由度が高くなる
  • CSSに頼らずに済む
  • 画面全体のサイズが容易に拡大縮小できるので、PC・スマホのサイズ差をあまり考慮しなくて良くなる

などのメリットがありそうです^^ 

 

 

 ってなとこで、今回はこのへんで!

次回もまた、よろしくお願いします^^