Using one platform to build another [HTML 5's canvas tag implemented using Silverlight!] より。
Microsoft の Silverlight と WPF のデベロッパの方のブログですが、HTML 5 の <canvas> を Silverlight で実装してみたそうです。
いやぁ、すごい。
つか、その発想は無かったな。
記事にはいろいろと <canvas> を表示させてみたスクリーンキャプチャが貼り付けられています。
ただ、さすがにネット上のページを自由に表示できるというわけではなく、自分で HTML を画いてる必要があります。
まずは、<head> の中あたりにでも
<script type="text/javascript" src="Html5Canvas.js"></script>
と追加してやります。
そして、たとえば、
<canvas id="canvas1" width="150" height="150"></canvas>
<script type="text/javascript">
function draw() {
var canvas = document.getElementById('canvas1');
:
}
</script>
という風に <canvas> が使われていた場合は、<canvas>～</canvas> を
<script type="text/javascript">
InsertCanvasObject("canvas1", 150, 150, draw);
</script>
と置き換えてやります。
<canvas> を操作するための JavaScript たち （上記の draw() 関数など） はそのままで OK です。
これで InsertCanvasObject のところに Silverlight アプリが作られて、その中から draw() 関数が呼び出されます。
また、<canvas> の仕様をすべて実装したというわけではないそうです。
Mozilla のサンプルページの最初の 5ページを動かすのに十分な分だけサポートされているそうです。（たぶん Mozilla Developer Center's Canvas tutorial のことだと思う）
また、記事の最初の方に
- Paths and shapes (move/line/curve/arc/clipping/etc.)
- Strokes and fills (using solid colors/gradients/images/etc.)
- Images
- Context save/restore
- Transformations (scale/rotate/translate/etc.)
- Compositing (alpha/blending/etc.)
- Text (font/alignment/measure/etc.)
- Pixel-level manipulation
- Shadows
というリストがありますが、これのイタリックになっているものは何も実装していないそうです。
ソースコードは記事の下の方にある "[Please click here to download the complete source code to Html5Canvas and the sample application shown above.]” というリンクからダウンロードできます。
Html5Canvas.Web プロジェクトを 「スタートアッププロジェクトに設定」 して、TestPage.html を 「スタートページに設定」 して実行すればサンプルページが開きます。
ちなみにソースは Ms-PL とのこと。
ちょこっとだけソースを見てみました。
CanvasRenderingContext2D.cs が処理のほとんどを行ってるんですが、思った以上にシンプルです。
というか、<canvas> の fillRect は XAML の Rectangle に、drawImage は Image に、Path は PathGeometry に、というようにほぼ単に XAML に置き換えてるだけなんですね。
記事にも <canvas> のことを調べてたら Silverlight でネイティブにサポートされているのと同じものが多いと思ったというようなことが書いてありますが、ほんとにそうなんですね。
0 件のコメント:
コメントを投稿
注: コメントを投稿できるのは、このブログのメンバーだけです。