今回はCanvasを使ったjQueryプラグインを作成してみた。
任意のHTMLエレメントを矢印でつなぐという、単純なプラグインだ。
個人的に前からこういうのが欲しかったのだけれど、探しても見あたらないので自分で作ってみた。
サンプルデモでは複数のdivを矢印でつないでいる。下のほうのスクロールエリアをスクロールさせてみると、矢印がdivの位置に追従するようになっている。
また、divの部分をクリックすると、そこから飛び出す矢印がトグル動作で消えたり出たりする。
jQuery ArrowMark
Show me
/ Download
使い方
これを使うにはjQuery 1.4.2以降の"jquery.js"、ArrowMarkプラグインの本体"arrowmark.js"の順番に読み込む必要がある。
具体的には、以下のように記述すると、"from"から"to"に矢印が描かれる。
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="arrowmark.js"></script>
<script type="text/javascript">
$(function(){
$("div#from").arrowMark($("div#to"));
});
</script>
<div id="from" style="position:absolute; top:0px; left:0px">From</div>
<div id="to" style="position:absolute; top:50px; left:100px">To</div>
上記の方法では、矢印で結ばれたエレメントのどちらかの位置が変わると、矢印とずれてしまう。
その場合は{monitor:true}というオプションを追加すると、矢印がエレメントの動きに追従するようになる。
これは負荷のかかる処理なので、位置が動かない場合は指定しない方が軽くなる。
$("div#from").arrowMark($("div#to"), {monitor: true});
オプションは他にも矢印のデザインやエレメントとの間隔を設定するものなど幾つかある。 以下にオプションとデフォルト値を列挙する。
strokeColor : "#ffffff" // Border color
fillColor : "#000000" // Fill color
lineWidth : 0 // Border width
barWidth : 3 // Width of the bar of the ArrowMark
arrowWidth : 12 // Width of the head of the arrow
arrowLength : 16 // Length of the head of the arrow
clipMargin : 4 // Margin from the elements
zIndex : 10 // z-index
monitor : false // If true, the Arrowmark chaces after connected elements
arrowMarkのかわりにarrowMarkByLinkを使うと、ページ内リンクしているaエレメントの親同士を矢印で結ぶ。
これもarrowMarkと同じオプションが使える。
サンプルではこちらを使用している。
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="arrowmark.js"></script>
<script type="text/javascript">
$(function(){
$("a.from").arrowMarkByLink();
});
</script>
<div id="from" style="position:absolute; top:0px; left:0px"><a class="from" href="#to"></a>From</div>
<div id="to" style="position:absolute; top:50px; left:100px"><a name="to"></a>To</div>
その他に、矢印のCanvasエレメントを取得するgetArrowMarkメソッドがある。
下記のようにすると、クリックするたびに矢印が出たり消えたりする。
$("div#from").toggle(
function(){
$(this).getArrowMark().hide();
},
function(){
$(this).getArrowMark().show();
}
);
矢印を削除する場合はdeleteArrowMarkメソッドを使う。
下記の例ではクリックすると矢印が消える。
$("div#from").click(
function(){
$(this).deleteArrowMark();
}
);
最後に、このプラグインはExplorerCanvasでも動作する。
ExplorerCanvasを同じディレクトリに入れて、下記の1行をheadの上のほうに入れてやれば、IEにも対応する。
<!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
Chrome 4.1: ○
FireFox 3.6.2: ○
Opera 10.51: ○
Safari 4.0.5: ○
IE 8.0: ○ (ExplorerCanvas使用時)
jQueryのプラグインなので、実用性重視でIEにも対応できるようにした。
ExplorerCanvasでの既知の問題点として、矢印にfadeIn/fadeOutなどアルファ値を変更するjQueryメソッドを使用すると、矢印の縁が黒くなる問題点が確認されている。
どうやらアンチエイリアスで半透明になっている部分が不透明になってしまうようだ。
今回のまとめ
これ、わざわざCanvasを使わなくてもCSS3でやれたかも。
