svgをやりたいからRaphaëlを使ってみる
実践あるのみ。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();
});
});
サンプル
■参考
TrackBack URL :
Comments (1)
