光で始めるSilverlight
モノに属性を付けてみよう!
2010/10/10  

さて、前回のサンプルで画面にマルを出したのはいいんだけど・・・
このマルって、いつまでたっても消えないじゃない!
これじゃ困っちゃうんだよな〜。
なんとかしてマルが消えるようにしたいんだけど。。。
 
 「ならば、オブジェクトだ!」 -- by 業界の人

えっ、オブジェクトって、何?
 
 「オブジェクトとは、モノに“属性”と“働き”が付いたものだ。
  今の場合は、青いマルに“寿命”という属性を付けるのだ(クワッ!)」


えっ、えっ、何のこと?
何だかよくわからないけど、とにかく業界の人のアドバイス通りやってみるね。。。

スタートするには光をクリックしてね! >> サンプルをダウンロード

問題の、オブジェクトっていうのは、これ。

// 表示オブジェクト
var DispObject = function(obj0, lifetime0) {
  this.obj = obj0; // 表示オブジェクト
  this.lifetime = lifetime0; // 寿命
}
この DispObject っていうモノの中に、青いマルと、青いマルの寿命を1パッケージにまとめているんだ。
あと、一度作った青マルを後から消そうと思ったら、作りっぱなしじゃダメ。
ちゃんと作ったモノを、ぜーんぶ覚えてなくっちゃ。
そのために、objArray っていう配列を用意したよ。
var objArray = new Array();
この配列に、作った青マルを入れておくの。

準備ができたところで、青いマルを出すところを、こんな風にしてみるね。

myScript.js の中:
// Xamlオブジェクトを生成
function addObj()
{
  var obj = theControl.content.createFromXaml(
    '<Ellipse Width="20" Height="20" Fill="Blue"/> );

  obj["Canvas.Left"] = ClickX;
  obj["Canvas.Top"] = ClickY;

  // 作った青いマル+寿命(50)=表示オブジェクトを作る
  var dispObj = new DispObject( obj, 50 );
  objArray.push( dispObj ); // 表示オブジェクトを配列に記憶しておく。

  theCanvas.children.Add( obj ); // こうすると、青いマルが画面に追加される
}
こうすれば、「画面に出しっ放し」じゃなくて、ちゃんと寿命を覚えていられるようになるんだね。

一定時間で青マルを消すには、作った青マルを全部チェックして、
寿命が無くなったかどうか調べなくちゃいけません。
それをやっているのが、removeObj ってところ。

// Xamlオブジェクトを削除
function removeObj( obj_array )
{
  for(var i=0; i < obj_array.length; i++) { // 配列を順番にチェック
    var dispObj = obj_array[i];
    if( --dispObj.lifetime <= 0 ){ // 寿命を1つ縮めて、それが0になったら
      theCanvas.children.Remove( dispObj.obj ); // 画面から青マルを消す
      dispObj.obj = null; // こうするとメモリーからも完全に消えるみたい
      dispObj = null;
      objArray.splice( i, 1 ); // 配列からも青マルを消す
      --i; // 1つ消えたんだから、チェックの順番を繰り上げる
    }
  }
}
ふぅ。。。消すのって、出すのよりも手間かかるんだ。
そーいえば、部屋を散らかすより、片付ける方が大変だって気がするなぁ。。。

これでもう、モノに“属性”を付ける方法がわかったよね。
よ〜し、あとは一気に完成を目指しちゃうぞ!

ページ先頭に戻る▲