連載
» 2008年03月19日 00時00分 公開

.NETを知らない人でも分かるSilverlight入門(3):Silverlightのリッチなグラフィックス描画サンプル集 (3/3)

[松原晋啓,@IT]
前のページへ 1|2|3       

PathGeometryオブジェクトでベジェ曲線も思いのまま!

 PathGeometryオブジェクトは、線、弧、カーブから成る複数の複雑な数字を記述する方法を提供します。PathGeometryオブジェクトは中心にPathFigureオブジェクトのコレクションを持ち、PathFigureオブジェクト自体も1つ以上のPathSegmentオブジェクトから構成されます。

 PathFigureオブジェクトは、開始位置だけを持ち、実質はPathSegmentオブジェクトで描画しています。PathSegmentオブジェクトには描画方法によっていくつかのタイプがあり、それが以下の表3になります。

表3 PathSegmentオブジェクトのセグメントタイプ
セグメントタイプ 詳細
ArcSegment 2つのポイント間で楕円上の弧を生成
BezierSegment 2つのポイント間で3次ベジェ曲線を生成
LineSegment 2つのポイント間で直線を生成
PolyBezierSegment 一連の3次ベジェ曲線を生成
PolyLineSegment 一連の直線を生成
PolyQuadraticBezierSegment 一連の2次ベジェ曲線を生成
QuadraticBezierSegment 2次ベジェ曲線を生成
図12 PathGeometryオブジェクトサンプル実行例の画像 図12 PathGeometryオブジェクトサンプル実行例の画像(実際にSilverlightで見たい場合は画像をクリック!)※サンプルを動かすには、事前に実行環境のインストールが必要です。→ダウンロードページ
ソース10 PathGeometryオブジェクトサンプル
<Canvas xmlns="http://schemas.microsoft.com/client/2007"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Width="640" Height="480" Background="White" x:Name="Page">

  <Path Stroke="Black" StrokeThickness="1" >
    <Path.Data>
      <PathGeometry>
        <PathGeometry.Figures>

          <PathFigure StartPoint="10,50">
            <PathFigure.Segments>
              <BezierSegment Point1="100,0" Point2="200,200"
                Point3="300,100"/>
              <LineSegment Point="400,100" />
              <ArcSegment Size="50,50" RotationAngle="45"
                IsLargeArc="True" SweepDirection="Clockwise"
                Point="200,100"/>
            </PathFigure.Segments>
          </PathFigure>

          <PathFigure StartPoint="10,100">
            <PathFigure.Segments>
              <PolyLineSegment Points="50,100 50,150" />
              <QuadraticBezierSegment Point1="200,200"
                Point2="300,100"/>
            </PathFigure.Segments>
          </PathFigure>

        </PathGeometry.Figures>
      </PathGeometry>
    </Path.Data>
  </Path>
</Canvas>

画像を自由自在に変化させるトランスフォーム!

 本稿の最後となる解説は、次回説明するアニメーションに最も深く関連するトランスフォームについてです。トランスフォームはその名のとおり、2D図形を変形させることで、それによって拡大・縮小、回転、傾斜、平行移動など多くの動作を図形に与えることができます。Silverlightでサポートするトランスフォームは以下の表4のとおりです。

表4 Silverlightでサポートするトランスフォーム
クラス 詳細
RotateTransform 指定されたAngleによって要素を回転
ScaleTransform 指定されたScaleXとScaleYの値によって要素を拡大・縮小
SkewTransform 指定されたAngleXとAngleYの値によって要素に傾斜を与える
TranslateTransform 指定されたXとYの値によって要素を移動

 トランスフォームは、オブジェクトのTransformationプロパティに指定することで作用させることができますが、その作用するプロパティは以下の表5のとおりです。

表5 トランスフォームが作用するTransformationプロパティ
タイプ Transformationプロパティ
Brush Transform、RelativeTransform
Geometry Transform
UIElement RenderTransform

 トランスフォーム機能が発揮できる状態はアニメーションを使用するときですので、詳しい紹介や実行例は次回に譲ることにしますが、今回はトランスフォームを行うことでオブジェクトがどのように変形されるかのイメージをつかむために簡単なサンプルを以下に示します。

図13 トランスフォームサンプル実行例の画像(実際にSilverlightで見たい場合は画像をクリック!) 図13 トランスフォームサンプル実行例の画像(実際にSilverlightで見たい場合は画像をクリック! 写真の撮影は筆者)※サンプルを動かすには、事前に実行環境のインストールが必要です。→ダウンロードページ
ソース11 トランスフォームサンプル
<Canvas xmlns="http://schemas.microsoft.com/client/2007"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Width="904" Height="757.5" Background="White" x:Name="Page">

  <TextBlock Canvas.Left="860" Foreground="Black"
    Text="This is Rotated Text" FontSize="48">
    <TextBlock.RenderTransform>
      <RotateTransform Angle="90" />
    </TextBlock.RenderTransform>
  </TextBlock>

<!-- オリジナルイメージ -->
  <TextBlock Width="236" Height="29" Canvas.Left="21"
    Text="Original Image" TextWrapping="Wrap" FontWeight="Bold"/>

  <Image Width="261" Height="167" Canvas.Left="21" Canvas.Top="27"
    Source="images/img_3214.jpg" Stretch="Fill"/>

<!-- 23度角のRotateTransformを適用 -->
  <TextBlock Width="236" Height="29" Canvas.Left="307"
    Canvas.Top="27" Text="RotateTransform" TextWrapping="Wrap"
    FontWeight="Bold"/>

  <Image Width="261.867" Height="167.379" Canvas.Left="350"
    Canvas.Top="48" Source="images/img_3214.jpg"
    Stretch="Fill" RenderTransformOrigin="0.5,0.5">
    <Image.RenderTransform>
      <RotateTransform Angle="-23"/>
    </Image.RenderTransform>
  </Image>

<!-- 横に2倍、縦に1.5倍のScaleTransformを適用 -->
  <TextBlock Width="236" Height="29" Canvas.Left="224.5"
    Canvas.Top="274" Text="ScaleTransform" TextWrapping="Wrap"
    FontWeight="Bold"/>

  <Image Width="261.867" Height="167.379" Canvas.Left="354"
    Canvas.Top="341" Source="images/img_3214.jpg"
    Stretch="Fill" RenderTransformOrigin="0.5,0.5">
    <Image.RenderTransform>
      <ScaleTransform ScaleX="2" ScaleY="1.5"/>
    </Image.RenderTransform>
  </Image>

<!-- TransformGroup要素の中で25度角のSkewTransformを適用 -->
  <TextBlock Width="236" Height="29" Canvas.Left="21"
    Canvas.Top="546.5" Text="SkewTransform"
    TextWrapping="Wrap" FontWeight="Bold"/>

  <Image Width="261.867" Height="167.379" Canvas.Left="62"
    Canvas.Top="572" Source="images/img_3214.jpg"
    Stretch="Fill" RenderTransformOrigin="0.5,0.5">
    <Image.RenderTransform>
      <TransformGroup>
        <SkewTransform AngleX="25" AngleY="0"/>
        <RotateTransform Angle="0"/>
        <TranslateTransform X="0" Y="0"/>
      </TransformGroup>
    </Image.RenderTransform>
  </Image>

</Canvas>

Silverlightを支える重要な機能を身に付けよう

 さて、今回は機能的な説明上、グラフィックス編ということで次回と併せて前後編となるうちの前編を解説しました。

 Silverlightはユーザーエクスペリエンスを向上させる最先端のRIAテクノロジーとして生まれてきたため、グラフィックス機能については多くの機能と自由度を持っております。このグラフィックス機能はSilverlightを支える重要な機能になるため、その全体像を把握してフルに活用いただけるようにするために分かりやすく書いたつもりです。

 次回の後編は、今回の内容を踏まえたアニメーション機能の解説をし、連載第2回で紹介した、動画を再生するグローアップ・アプリケーションに機能を追加します。前後編併せて皆さんのお力になれることを心より願っております。

 今回のサンプルすべてのソースコードはこちらになります。

プロフィール

松原 晋啓(まつばら のぶあき)

松原 晋啓

SE、コンサルタント、エバンジェリストを経て、現在はソリューションスペシャリストとして活動。その傍ら、イベントや記事寄稿を通じてマイクロソフトのテクノロジーや製品の普及に努めている。

趣味は小学校から続けているバスケットボールで、4年前にチームを作り、現在もリーダーとして活動を行っている



前のページへ 1|2|3       

Copyright © ITmedia, Inc. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。