2012年12月18日火曜日

CSS3を駆使して描く!「Donatello」

皆さんこんにちは!B3の坂井(mozuku)です.
AdventCalenderも、もう残り一週間となりました.

普段はWeb班では無いですが、今回はWebっぽいコンテンツ
ドローライブラリ「Donatello」を紹介したいと思います!

Donatelloって?
Donatelloは幾何学模様をJavaScript,CSS3で描くドローライブラリです.
ブラウザ上にどれくらいキレイなグラフィックスを書けるのか,いかに手軽に実現できるのかHTML5によって広がった描画の幅を知るのに最適なライブラリです.

CanvasではなくCSS3で描画するところに「Donatello」の面白さはあるとおもいます!

Canvasの簡単なおさらい
比較にも出したことなのでCanvasも簡単なおさらいをしましょう.
*Canvas Sample
$(document).ready(function(){

 /*create CanvasElement*/
 $('body').append('');
 
 /*create 2d context obj*/
 var context = $('canvas').get(0).getContext('2d'); 

 /*draw square*/ 
 context.beginPath();
 context.moveTo(20,20);
 context.lineTo(120,20);
 context.lineTo(120,120);
 context.lineTo(20,120);
 context.closePath();
 context.stroke();

});

ソースコードの内容はこんな感じです.
beginPath:描画開始宣言
moveTo:始点座標の指定
lineTo:終点座標の指定
closePath:描画終了宣言

このソースコードで図のような描画ができます.
lineTo等を見ればわかるとおり、座標位置等を意識し描画しています.
ここでの肝は「ソースから安易には正方形だとは読みとれないこと」です.

Donatelloで描画してみる
百聞は一見に如かずサンプルをとりあえずみてみましょう.
*Donatello Sample
$(document).ready(function(){
 /*Convert DOM Element*/
 var paper = Donatello.paper('paper-div', 20, 20, 500, 500);
 /*draw ellipse*/
 var ellipse = paper.ellipse(250, 250, 120, 75, {
  'stroke-width':4,
  'stloke': '#FFFFFF'
 });
 
});

Donatelloは上記のような形で記述します.
Donatelloの描画領域はpaperと呼ばれ、DOM要素となっています.
また、描画される要素も個々にDOM要素として描画されます。

複雑な例ではこのような描画が可能です.
for( var i=0; i < 8; i ++ ) {
    var x = Math.cos( i*Math.PI/4 )*r;
    var y = Math.sin( i*Math.PI/4 )*r;
    var circle = paper.ellipse( 250 + x, 250 + y, 120, 75, { 
        'stroke-width': 4*i,
        'stroke': colors[i%8],
        'stroke-style': 'solid'
    });
    ellipse.rotate( (i*Math.PI/4)*180/Math.PI );
}

このソースであれば、以下の図のような描画が行えます。

ここでDonatelloを使う4つの利点をあげたいと思います.
・描画領域は'紙'と呼ばれる一つのオブジェクトとして管理されること
・四角や円、楕円、多角形といった形を描画するという仕組み→コードの理解が安易
・描画された形は一つのオブジェクトであること
・jQuery等外部ライブラリへの対応


特に3つ目の1つ1つがオブジェクトであるという点はCanvasでの描画と違い、一度描いたものの一部分だけを操作できる等の利点であるといえます.


まとめ
Webデザイナー等にとってはCSS等の知識を使って扱えるDonatelloは便利かも
CanvasだけがHTML5での描画方法じゃない!
(SVG⇔Donatello変換ソフトウェアとかあったら便利そう!)←言うのはタダ


これだけじゃなくHTML5と総括される技術分野は様々なチャレンジ要素があるとおもいます。
Web系なみなさんどんどん遊びましょう!(そして面白いことを紹介してください!)

記事を見て気になったら↓
dnewcome/Donatello - Github


そんなこんなで本当に触りだけとなりましたが、Donatelloのご紹介とさせていただきます.

以上mozukuでした!

10 件のコメント:

  1. Nice one! Thank you for sharing this post. Your blog posts are more interesting and impressive. Feel free to visit my website; 국산야동

    返信削除
  2. Hey there! I simply would like to offer you a big thumbs up for the great information you have got here on this post. I will be returning to your blog for more soon. Feel free to visit my website; 한국야동

    返信削除
  3. Wonderful web site. Plenty of helpful information here. 파워볼사이트닷컴

    返信削除
  4. このコメントは投稿者によって削除されました。

    返信削除
  5. Pizza Hut Menu Price ; Tandoori Onion (cheese & onion with tandoori sauce). Rs. 149. Rs. 215 ; Spiced Chicken Meatballs (schezwan chicken meatball ... Pizza Hut Menu Prices

    返信削除

  6. Myrus Careshield Portal is a robust development platform that offers a complete learning system where all Careshield products are accessible. Careshield myrus

    返信削除
  7. Your content is both dedicated and brilliant, captivating and enlightening as it showcases a distinct approach to a wide array of subjects. You have become my reliable source for insights and information, nurturing curiosity and promoting learning. I hold great admiration for your exceptional work and eagerly look forward to experiencing more of it!Prevention of Domestic Violence Act New Jersey

    返信削除