実践あるのみ。o(^O^*=*^O^)oでも面倒だからjQueryを使用する。
■円を描く
JavaScript
$(function(){ // 描画エリアをidで指定 var paper = Raphael("notepad", 320, 50); // 円を描く var circle = paper.circle(20, 20, 10); });
HTML
<div id="notepad"></div>
サンプル
おー。できた(*^-^)
■パスを描く
JavaScript
$(function(){ // 描画エリアをidで指定 var paper = Raphael("notepad", 320, 200); // パスを描く var path = paper.path("M25 25L20 65L25 105L65 110L105 105L110 65L105 25L75 20L45 25L40 55L45 85L65 90L85 85L90 65L85 45L75 40L65 45L60 55L65 65"); });
サンプル
ふむふむ。分かってきた。パスの書き方を見てみると相対的でも座標を指定できるらしい。
■文字を描く
JavaScript
$(function(){ // 描画エリアをidで指定 var paper = Raphael("notepad", 320, 30); // 文字を描く var string = paper.text (90, 10, "なめらかなベクターグラフィックス。\nSVGです。"); });
サンプル
おー。どうやらセンタリングされるらしいな★
■ドラッグ&ドロップしてみる
JavaScript
$(function(){ var paper = Raphael("notepad", 500, 100); var circle = paper.circle(50, 40, 10); circle.attr("fill", "#55ccff"); circle.attr("stroke", "#55ccff"); circle.drag( function(dx, dy){// move this.attr({ "cx" : this.ox + dx, "cy" : this.oy + dy }); }, function(){// start this.ox = this.attr("cx"); this.oy = this.attr("cy"); this.attr({"opacity" : 0.5}); }, function(){// end this.attr({"opacity" : 1}); } ); });
サンプル
おー。キター(゜∀゜)
■DOM
DOMが取り出せるらしいぞ!
JavaScript
$(function(){ var paper = Raphael("notepad", 320, 50); var circle = paper.circle(20, 20, 10); circle.attr('fill', 'blue'); circle.node.onclick = function(){ alert('hello!'); } });
サンプル
jQueryと組み合わせは・・・
$(function(){ var paper = Raphael("notepad", 320, 50); var circle = paper.circle(20, 20, 10); circle.attr('fill', 'blue'); $(circle.node).click(function(){ alert('hello!'); }); });
サンプル
むはっ★
$(function(){ var paper = Raphael("notepad", 320, 50); var circle = paper.circle(20, 20, 10); circle.attr('fill', 'blue'); $(circle.node).click(function(){ circle.hide(); }); });