RaphaëlによるSVGグラフィック (3/5)
作成:2010-04-28 13:03
更新:2010-05-11 16:32
更新:2010-05-11 16:32
■マウスイベントの利用
SVGの図形オブジェクトには、それぞれイベント処理を組み込むことができます。これらも、図形オブジェクトにメソッドとして用意されており、それにより「図形をユーザーが操作する」ということが簡単に行えるようになります。
以下のリストに簡単な例をあげておきましょう。マウスの状態によって、表示が変化するサンプルです。マウスポインタが円の中に入り、マウスボタンが押されると、それぞれの状態に応じて色が変わります。またマウスポインタが円の中にいる間は、リアルタイムに現在のマウスの位置とドラッグ中かどうかがテキストで表示されます。
ここでは、マウス関係のイベントを利用して処理を行っています。マウス関連イベントを設定するためのメソッドとして、キャンバス・オブジェクトには以下のようなものが用意されています。
click――クリック時
dbclick――ダブルクリック時
mouseover――キャンバス内に入った時
mouseout――キャンバス外に出た時
mousedown――マウスボタンが押された時
mouseup――マウスボタンが離された時
mousemove――マウスポインタがキャンバス内を移動した時
hover――キャンバス内にマウスポインタが入ったり出たりした時
これらは、（hover以外）すべて引数に関数を１つ渡します。指定のイベントが発生すると、設定された関数が呼び出され実行されるわけです。注意しておきたいのは「hover」で、これは２つの関数を引数に指定します。これにより「入ったとき」「出たとき」のそれぞれで異なる処理が実行されます。
引数に指定する関数では、eventオブジェクトが引数に渡されます。これは、JavaScriptのイベント処理関数で渡されるeventと同じものと考えてよいでしょう。ですから、イベントに関する情報などは、このeventオブジェクトから取り出すことができます。
以下のリストに簡単な例をあげておきましょう。マウスの状態によって、表示が変化するサンプルです。マウスポインタが円の中に入り、マウスボタンが押されると、それぞれの状態に応じて色が変わります。またマウスポインタが円の中にいる間は、リアルタイムに現在のマウスの位置とドラッグ中かどうかがテキストで表示されます。
ここでは、マウス関係のイベントを利用して処理を行っています。マウス関連イベントを設定するためのメソッドとして、キャンバス・オブジェクトには以下のようなものが用意されています。
click――クリック時
dbclick――ダブルクリック時
mouseover――キャンバス内に入った時
mouseout――キャンバス外に出た時
mousedown――マウスボタンが押された時
mouseup――マウスボタンが離された時
mousemove――マウスポインタがキャンバス内を移動した時
hover――キャンバス内にマウスポインタが入ったり出たりした時
これらは、（hover以外）すべて引数に関数を１つ渡します。指定のイベントが発生すると、設定された関数が呼び出され実行されるわけです。注意しておきたいのは「hover」で、これは２つの関数を引数に指定します。これにより「入ったとき」「出たとき」のそれぞれで異なる処理が実行されます。
引数に指定する関数では、eventオブジェクトが引数に渡されます。これは、JavaScriptのイベント処理関数で渡されるeventと同じものと考えてよいでしょう。ですから、イベントに関する情報などは、このeventオブジェクトから取り出すことができます。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8" />
<title>Sample Page</title>
<script type="text/javascript"
src="raphael-min.js"></script>
<script type="text/javascript">
<!--
var dragging = false;
function init(){
var paper = Raphael(50, 35, 200, 200);
var r = paper.rect(0,0,200,200);
r.attr({fill:"#99F",stroke:"#99F",opacity:0.25});
var c1 = paper.circle(50,50,100);
c1.attr({fill:"#F99",stroke:"#F99",opacity:0.5});
var c2 = paper.circle(125,125,50);
c2.attr({fill:"#9F9",stroke:"#F9F","stroke-width":10,opacity:0.5});
c2.click(function(event){
alert("クリックしたよ。");
});
c2.hover(
function(event){
c2.attr({fill:"#9A9"});},
function(event){
c2.attr({fill:"#9F9"});}
);
c2.mousedown(function(event){
c2.attr({fill:"#909"});
dragging = true;
});
c2.mouseup(function(event){
c2.attr({fill:"#9F9"});
dragging = false;
});
c2.mousemove(function(event){
var div = document.getElementById("msg");
div.innerHTML = "x:" + event.x + ", y:" + event.y +
" drag: " + dragging;
});
}
//-->
</script>
</head>
<body onload="init();">
<h1>サンプル</h1>
<div id="msg">これは、RaphaelによるSVGグラフィックの例です。</div>
</body>
</html>
※関連コンテンツ