Menu


Microsoft Most Valuable Person

Silverlight 1.0+JavaScriptでベクタ画像表示

Tiger
ベクタ画像の表示 (要 Silverlightプラグイン バージョン1.0以降)

ソースコード

リンク先のページのHTMLに全て(XAML+JavaScript)が含まれている。

アプリケーションの説明

虎画像が描画される。ラジオボタンとスライダー(YUI)を操作することで虎画像が拡大縮小する。

ソースコードの説明

<object>タグでSilverlightプラグインを指定している。 <param>タグで起動パラメータを指定できるが、その際にsourceプロパティに HTML DOMのID (#tigerXaml) を指定している。

指定されたノードは<script>タグ。

<script id="tigerXaml" type="text/xaml">
  // XAMLを記述
</script>

スライダーのイベントハンドラ内で、Silverlightのコントロール(object要素)を取得し、 そこを基点としてSilverlight DOMの要素を取得し、拡大縮小の値を指定している。

function onSliderChange(value) {
  var f = document.getElementById('sd').checked;
  var scale = f ? 1 - (value/ 100) : 1 + (value/ 10);
  var sl = document.getElementById("silverlightControl");
  var scaleTransform = sl.content.findName("tigerScale");
  scaleTransform.scaleX = scale;
  scaleTransform.scaleY = scale;
}

Silverlight インデックスへ戻る


Last Update: 2012-12-30 18:37:48