2010年04月05日

jQuery ArrowMark: HTML5のCanvasでjQueryプラグインを作る

今回はCanvasを使ったjQueryプラグインを作成してみた。
任意のHTMLエレメントを矢印でつなぐという、単純なプラグインだ。
個人的に前からこういうのが欲しかったのだけれど、探しても見あたらないので自分で作ってみた。
サンプルデモでは複数のdivを矢印でつないでいる。下のほうのスクロールエリアをスクロールさせてみると、矢印がdivの位置に追従するようになっている。
また、divの部分をクリックすると、そこから飛び出す矢印がトグル動作で消えたり出たりする。

jQuery ArrowMark
jQuery ArrowMark Image
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でやれたかも。

posted by lislis at 18:44| Comment(1) | TrackBack(0) | jQuery
この記事へのコメント
素晴らしい…。
まさにこういうの探してました。

これ、両矢印には対応していますか?「⇔」みたいなやつ。
それがあれば(僕にとっては)完璧です。
なければがんばって研究して、機能足して使いたいと思いますが、もし可能であれば将来的に機能追加していただけるとありがたいですm(_ _)m

需要は絶対多いプラグインだと思うんですよね。汎用性高いし、類似の見たことないし。
そこまで知られてないのが不思議。
ちょっとツイートでもしときます。
Posted by カラス at 2013年10月15日 19:38
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

この記事へのトラックバックURL
http://blog.sakura.ne.jp/tb/36885135

この記事へのトラックバック