raphael.jsベクトル描画(3)描画方法–Dx.Yang

RaphaelJsでは、形を描く方法は多くなく、把握しやすい.
長方形
パラメータ:x軸座標、y軸座標、幅、高さ
paper.rect(x, y, width, height);
 
円
パラメータ:円心のx軸座標、y軸座標、円半径
paper.circle(x, y, r);
だえん
パラメータ:円心のx軸座標、y軸座標、x軸半径、y軸半径
paper.ellipse(x, y, xr, yr);
パス
paper.path('M10,10 L20,20');
パスはベクトル描画で最も強力なツールであり、複雑です.
パスのパラメータは、コマンドアルファベット+座標数の組み合わせで構成された文字列のセットです.
具体的な設定方法は、他のいくつかの紹介を参照してください.
パスの詳細1(基本):http://xbingoz.com/171.html 
パスの詳細2(カーブ):http://xbingoz.com/194.html  
MDNパスチュートリアル:http://xbingoz.com/320.html 
画像
イメージメソッドは画像ファイルを導入することができ,HTMLのimgタグと同様の役割を果たす.
paper.image(src, x, y, width, height);
テキスト
RaphaelJsには2つの方法があります.
1、paper.text(50, 50, "Raphaëlkicksbutt!");
textメソッドは一般的な文字を描くために使用され、HTMLの文字と同様にブラウザでサポートされているフォントしか使用できません.
文字列パラメータに複数行の文字を入力できます
2、paper.print(10, 50, "print", paper.getFont("Museo"), 30);
printメソッドは任意のフォントの文字をレンダリングすることができ、その4番目のパラメータはフォントであり、ここではpaperを使用する必要がある.取得するフォント名を表す文字列パラメータを受け入れるgetFont()メソッド.フォントがシステムに登録されている限り、取得し、テキストをレンダリングできます.
グラフィックオブジェクト
シェイプを描画する方法は、show()、hide()などの方法を使用できるシェイプオブジェクトを返します.
attr()は、シェイプオブジェクトの一般的な方法です.たとえば、次のように、シェイプオブジェクトのプロパティを変更できます.
1
2
3
4
5
6
7
8
9
10 // ， (10,10)， 800， 600， // paper.rect(10, 10, 800, 600).attr( 'fill' , '#000' );
  // ， var rect1 = paper.rect(10, 10, 800, 600); rect1.attr( 'fill' , '#000' ); setTimeout( function (){       rect1.attr( 'fill' , 'red' ); },1000);
全文を読むと...