@blog.justoneplanet.info

日々勉強

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();
    });
});

サンプル

■参考

Raphael Reference

1件のコメント»

RSS feed for comments on this post.TrackBack URL

Leave a comment