|
8. ダイナミックSVG42006.01.13 株式会社四次元データ 藤本将光
SVG 8章 ダイナミックSVG4
前章では、animate要素によるアニメーションを説明しましたが、本章では、JavaScriptとDOMの組み合わせによるアニメーションの解説を行います。 8.1. JavaScriptアニメーションJavaScriptアニメーションは、SVG文書内において、JavaScriptとDOMを組み合わせることによって、アニメーション化させることができます。 スクリプトの書き方を以下に示します。 ・<script>部分に処理を定義した関数を書き、それをsvg要素中に書くことによって、イベントに対応した処理を行わせることができます。 (例) <svg width="300" height="300">
<script>
<![CDATA[
function click_transform(evt)
{
･･････････
}
]]>
</script>
<rect onclick="click_transform(evt)" ････ />
</svg>
この例では、矩形がクリックされると、スクリプト内で定義されたclick_transform(evt)関数が呼び出され、実行されます。 ・簡単な処理の場合は、svg要素中に直接スクリプトを書くことも可能です。 (例) <svg width="300" height="300">
<circle････ onclick="evt.target.setAttribute('fill', 'green')”/>
</svg>
ここでは、円がクリックされたとき、円が緑色に塗りつぶされます。 では、実際のサンプルを見てみましょう。 (サンプル) この例では、円をドラックすることによって移動することができます。動いているときは、赤色になり、止まると青色に戻ります。 (サンプルのソース)
<svg width="600" height="300" onload="DoOnLoad(evt)">
<script>
<![CDATA[
var dragger;
var circleX;
var circleY;
var oldX;
var oldY;
function DoOnMouseOver(evt){}
function DoOnMouseOut(evt){}
function DoOnLoad(evt) {}
function DoOnMouseDown(evt) {
var onObject = evt.getTarget();
if( onObject.getAttribute("id") == "bg"){
}else{
dragger = onObject;
setOld(evt,dragger); ･･･ (1)
}
}
function setOld(evt,dragger){
oldX = evt.getClientX();
oldY = evt.getClientY();
}
function getDiff(evt){
var difX = evt.getClientX() - oldX;
var difY = evt.getClientY() - oldY;
setOld(evt);
return "translate("+difX+" "+difY+")";
}
function DoOnMouseUp(evt) {
if(dragger != null)
{
dragger.getStyle().setProperty("fill", "blue"); ･･･ (2)
dragger = null;
}
}
function DoOnMouseMove(evt) {
if(dragger == null){
return;
}
dragger.setAttribute("transform",dragger.getAttribute("transform") + getDiff(evt)); ･･･ (3)
dragger.getStyle().setProperty("fill", "red"); ･･･ (4)
}
]]></script>
<g onmousedown="DoOnMouseDown( evt )" onmouseup="DoOnMouseUp( evt )" onmousemove="DoOnMouseMove( evt )" >
<rect id="bg" x="0" y="0" width="3000" height="2500" fill="yellow"/>
<circle id="circle" cx="300" cy="150" r="25" fill="blue"/>
</g>
</svg>
上記の例では、以下のDOMを使用しています。
(1)で円上でカーソルが押されたとき、その座標をsetOld関数によって取得します。
|
|
