4.10 座標変換
4.10.1 描画オブジェクトの変換と回転
WPF は、システムに依存しない完全にピュアなコントロール郡を提供しています。すでに説明したように、それらは全て UIElement という概念に抽象化され、描画オブジェクト（長方形や楕円、パス、イメージなど）とコントロールの境界を破壊しました。WPF では、コントロールも含め、表示するあらゆる描画要素を UIElement という概念で操作することができます。
これは、座標変換においても同様です。UIElement クラスには、描画オブジェクトの座標を変換するプロパティを公開しています。座標変換とは、単純にオブジェクトの座標を平行移動させるだけではありません。これを利用することで、開発者は自由にオブジェクトを伸縮させたり、傾かせることができます。実践的なシナリオでは考えられませんが、例えば斜め 40 度に傾いてる入力フォームなども WPF では容易に実現させることができます。
UIElement の座標を変換するには RenderTransform プロパティを用います。
public Transform RenderTransform { get; set; }
RenderTransform プロパティには、座標変換の方法を提供する System.Windows.Media.Transform クラスのオブジェクトを指定することができます。このクラスのオブジェクトに設定されている情報に従って、UIElement は移動、回転、伸縮します。
System.Object
System.Windows.Threading.DispatcherObject
System.Windows.DependencyObject
System.Windows.Freezable
System.Windows.Media.Animation.Animatable
System.Windows.Media.GeneralTransform
System.Windows.Media.Transform
[TypeConverterAttribute(typeof(TransformConverter))] [LocalizabilityAttribute(LocalizationCategory.None, Readability=Readability.Unreadable)] public abstract class Transform : GeneralTransform
Transform クラスは、2 次元座標変換を表す抽象クラスです。全ての座標変換クラスは、このクラスから派生しています。WPF の内部では、座標変換を行うために行列を用いていますが、開発者が行列を直接初期化する必要はありません。行列を用いて座標変換を行うことも可能ですが、より便利で簡単なクラスが用意されています。
Transform クラスを継承するサブクラスは、座標変換の種類別に存在しています。最初に、UIElement を回転させる System.Windows.Media.RotateTransform クラスを使って座標変換してみましょう。
System.Object
System.Windows.Threading.DispatcherObject
System.Windows.DependencyObject
System.Windows.Freezable
System.Windows.Media.Animation.Animatable
System.Windows.Media.GeneralTransform
System.Windows.Media.Transform
System.Windows.Media.RotateTransform
public sealed class RotateTransform : Transform
RotateTransform は Transform を継承する座標変換のためのクラスで、UIElement を任意の角度で回転させます。このクラスを利用することで、画面上に表示されるコントロールや図形の角度を変更することができます。
このクラスのコンストラクタは、オーバーロードされています。コンストラクタから、回転させる度数や基軸などを設定することができます。
public RotateTransform ()
public RotateTransform (double angle)
public RotateTransform (double angle, double centerX, double centerY)
angle パラメータには、度単位で回転させる角度を指定します。centerX パラメータと centerY パラメータには、それぞれ回転の基軸となる座標を設定します。RotateTransform クラスは、基軸を中心として angle で指定した角度で UIElement を時計回りに回転させます。
コンストラクタの angle パラメータで指定する角度は Angle プロパティから設定・取得することもできます。
public double Angle { get; set; }
同様に、回転の基軸となる座標は CenterX プロパティと CenterY プロパティから設定・取得できます。
public double CenterX { get; set; }
public double CenterY { get; set; }
CenterX プロパティ、及び CenterY プロパティの既定の値は 0 です。よって、既定では UIElement を親コントロールの左上隅を機軸に回転させます。Angle プロパティと CenterX プロパティ、CenterY プロパティの関係は、図1のような形になります。
図1では、何らかのパネル上に貼り付けられているボタンコントロールを回転させています。座標変換は UIElement であればどのようなオブジェクトに対しても有効なので、図形オブジェクトでもコントロールでもかまいません。
回転は、CenterX と CenterY が示す基軸を中心に、指定した角度で回転させられます。よって、図1のように、回転するオブジェクトは、基軸によってはオブジェクトが配置されている座標も変更されるので注意してください。オブジェクトが現在は位置されている座標を基軸に回転するわけではありません。
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
class Test {
[STAThread]
public static void Main() {
RotateTransform transform = new RotateTransform(20);
TextBlock textBlock = new TextBlock();
textBlock.RenderTransform = transform;
textBlock.FontSize = 20;
textBlock.Text = "ごきげんよう";
Canvas.SetLeft(textBlock, 50);
Canvas.SetTop(textBlock, 50);
Canvas canvas = new Canvas();
canvas.Children.Add(textBlock);
Window wnd = new Window();
wnd.Content = canvas;
Application app = new Application();
app.Run(wnd);
}
}
コード1は、CenterX と CenterY は既定のまま、テキストを 20 度回転させています。実行結果のように、テキストが斜めに傾いて表示されていることが確認できます。テキストは、パネルの左上隅を表す座標 (0, 0) から回転させられているため、テキストの現在の座標を中心に回転するわけではないということに注意してください。例えば、90 度まで回転させると図2のようになります。
図2は、コード1の RotateTransform オブジェクトの設定を変更し、Angle プロパティの値を 90 に設定して表示した結果です。テキストは、ウィンドウの左隅まで移動していますが、これは基軸となる座標が (0, 0) となっているためです。
テキストの座標を変更することなく、ただ単純に回転させたいという場合は基軸となる CenterX と CenterY プロパティが表す座標をテキストの座標と一致させます。そうすれば、テキストはテキストの左上隅と基軸に回転します。
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
class Test {
[STAThread]
public static void Main() {
RotateTransform transform = new RotateTransform();
transform.Angle = 90;
transform.CenterX = 50;
transform.CenterY = 50;
TextBlock textBlock = new TextBlock();
textBlock.RenderTransform = transform;
textBlock.FontSize = 20;
textBlock.Text = "ごきげんよう";
Canvas.SetLeft(textBlock, 50);
Canvas.SetTop(textBlock, 50);
Canvas canvas = new Canvas();
canvas.Children.Add(textBlock);
Window wnd = new Window();
wnd.Content = canvas;
Application app = new Application();
app.Run(wnd);
}
}
コード2は、RotateTransform オブジェクトの基軸をテキストの座標と同じ座標に設定して、テキストを 90 度まで回転させた例です。このプログラムでは、RotateTransform インスタンスを生成後にプロパティから設定していますが、これらの設定はコンストラクタから一度に行うこともできます。
このプログラムでは、テキストは自分自身の座標を軸に回転するため、既定の基軸 (0, 0) の場合のようにテキスト自身の座標は移動していません。
4.10.2 平行移動
平行移動は、2 次元座標変換で最も単純な変換作業です。これは、UIElement が配置されている座標を X 軸方向、または Y 軸方向に対して平行に移動させるものです。単純な移動なので、オブジェクトの座標を置き換えたい場合などに利用します。
オブジェクトを平行移動させるには System.Windows.Media.TranslateTransform クラスを用います。
System.Object
System.Windows.Threading.DispatcherObject
System.Windows.DependencyObject
System.Windows.Freezable
System.Windows.Media.Animation.Animatable
System.Windows.Media.GeneralTransform
System.Windows.Media.Transform
System.Windows.Media.TranslateTransform
public sealed class TranslateTransform : Transform
TranslateTransform クラスは、とてもシンプルなクラスです。このクラスには、UIElement を平行移動させる距離を表す X 座標値と Y 座標値を設定するのみです。
これらの座標は、オーバーロードされているコンストラクタから指定することができます。
public TranslateTransform ()
public TranslateTransform (double offsetX, double offsetY)
offsetX パラメータには、平行移動する X 座標の距離を、offsetY パラメータには Y 座標の距離を指定します。これらの設定は、インスタンス生成後も X プロパティと Y プロパティから設定・取得することができます。
public double X { get; set; }
public double Y { get; set; }
TranslateTransform オブジェクトを設定した UIElement オブジェクトは、これらのプロパティに設定されている距離だけ平行移動します。例えば、X プロパティの値が 100 の場合、UIElement の現在の座標 + 100 ピクセルの位置に表示されることになるでしょう。
using System;
using System.Windows;
using System.Windows.Shapes;
using System.Windows.Controls;
using System.Windows.Media;
class Test {
[STAThread]
public static void Main() {
TranslateTransform transform = new TranslateTransform(100, 50);
Rectangle rect = new Rectangle();
rect.RenderTransform = transform;
rect.Fill = Brushes.Black;
rect.Width = 200;
rect.Height = 100;
Canvas canvas = new Canvas();
canvas.Children.Add(rect);
Window wnd = new Window();
wnd.Content = canvas;
Application app = new Application();
app.Run(wnd);
}
}
コード3は、単純な長方形を表す Rectangle オブジェクトに TranslateTransform オブジェクトを設定し、長方形の配置座標を変更しています。この Rectangle オブジェクトには Canvas の座標を設定していないため、既定の (0, 0) 座標、つまり Canvas 状の左上隅に配置されています。しかし、TranslateTransform オブジェクトの効果によって X 座標に 100 ピクセル、Y 座標に 50 ピクセルだけ平行移動するため、実行結果では長方形は左上隅ではなく、TranslateTransform オブジェクトで指定した座標に配置されていることが確認できます。
TranslateTransform は座標変換のためのクラスであり、UIElement を配置する座標を設定するためのクラスではありません。UIElement を配置するのはパネルの役割です。多くの場合、TranslateTransform クラス単体で利用するのではなく、他の座標変換オブジェクトと組み合わせて利用することになるでしょう。
4.10.3 拡大と縮小
変換を利用して UIElement を伸縮させることもできます。WPF では、UIElement オブジェクトに対して変換を行うため、コントロールや描画要素の区別なく、表示するあらゆる描画要素に対して同一のロジックで伸縮処理を可能にすることを意味しています。例えば、WPF ではアプリケーション全体のコントロールを伸縮させる処理を容易に実現できます。
開発者が想定したディスプレイの解像度と、ユーザーが利用しているディスプレイの解像度は異なる可能性があります。あなたが高解像度ディスプレイを用いて開発している場合、ユーザーが別の低解像度ディスプレイで表示した場合、アプリケーションの一部が大きすぎるかもしれません。もちろん、その逆もあります。ユーザーは、高解像度ディスプレイを利用しているため、広い画面を生かすためにアプリケーションを拡大したいと考えるかもしれないのです。
座標変換による伸縮を実現するにはSystem.Windows.Media.ScaleTransform クラスを利用します。
System.Object
System.Windows.Threading.DispatcherObject
System.Windows.DependencyObject
System.Windows.Freezable
System.Windows.Media.Animation.Animatable
System.Windows.Media.GeneralTransform
System.Windows.Media.Transform
System.Windows.Media.ScaleTransform
public sealed class ScaleTransform : Transform
ScaleTransform クラスは、水平方向に対する倍率と、垂直方向に対する倍率を用いて UIElement を伸縮させます。これらの情報は、オーバーロードされているコンストラクタから渡すことができます。
public ScaleTransform ()
public ScaleTransform (double scaleX, double scaleY)
public ScaleTransform (
double scaleX, double scaleY,
double centerX, double centerY
)
scaleX パラメータには水平方向に対する倍率を、scaleY パラメータには垂直方向に対する倍率を指定します。これらの値は 1 を基準としています。例えばオブジェクトのサイズを 2 倍にするのであれば 2 を、半分にするのであれば 0.5 を指定することになります。
centerX パラメータと centerY パラメータには、オブジェクトを伸縮させる基点となる座標を指定します。
コンストラクタに指定する各パラメータは、プロパティで設定することも可能です。水平方向に対する倍率は ScaleX プロパティ、垂直方向に対する倍率は ScaleY プロパティから設定・取得できます。
public double ScaleX { get; set; }
public double ScaleY { get; set; }
これらのプロパティの既定の値は 1 です。既定の状態では、UIElement をオリジナルのサイズから変更しません。
UIElement を伸縮させる基点となる座標は CenterX プロパティ、及びCenterY プロパティから設定・取得することができます。
public double CenterX { get; set; }
public double CenterY { get; set; }
CenterX プロパティには X 座標を、CenterY プロパティには Y 座標をそれぞれ指定します。これらのプロパティの既定の値は 0 です。 これらのプロパティと、オブジェクトの伸縮の関係は図4のような関係となります。
CenterX プロパティと CenterY プロパティの座標は、変換の対象となる UIElement オブジェクトに対して相対的になります。よって、既定の座標 (0, 0) は、オブジェクトの左上隅の座標を意味しています。既定では、オブジェクトは現在の座標を軸に幅と高さを変更することになります。まずは、CenterX プロパティと CenterY プロパティは変更せずに、伸縮の倍率だけを設定して変換してみましょう。
using System;
using System.Windows;
using System.Windows.Shapes;
using System.Windows.Controls;
using System.Windows.Media;
class Test {
[STAThread]
public static void Main() {
ScaleTransform transform = new ScaleTransform(4, 3);
Rectangle rect1 = new Rectangle();
rect1.RenderTransform = transform;
rect1.Stroke = Brushes.Red;
rect1.Width = 100;
rect1.Height = 100;
Rectangle rect2 = new Rectangle();
rect2.Stroke = Brushes.Black;
rect2.Width = 100;
rect2.Height = 100;
Canvas canvas = new Canvas();
canvas.Children.Add(rect1);
canvas.Children.Add(rect2);
Window wnd = new Window();
wnd.Content = canvas;
Application app = new Application();
app.Run(wnd);
}
}
コード4は、幅と高さが共に 100 の長方形を ScaleTransform オブジェクトを用いて伸縮させています。ScaleTransform オブジェクトには、ScaleX プロパティに 4、ScaleY プロパティに 3 が設定されているため、長方形は幅が 4 倍、高さが 3 倍になります。実行結果を確認しやすくするために、このプログラムでは伸縮前の長方形と同じ幅と高さを持つ黒い長方形を表示しています。ScaleTransform オブジェクトで伸縮させているのは赤い長方形です。
CenterX プロパティと CenterY プロパティが表す基点となる座標を変更することで UIElement が伸縮する方向を操作することができます。既定の設定では、CenterX プロパティと CenterY プロパティには 0 が設定されているため、UIElement の左上隅を基点に伸縮されました。この場合、UIElement は現在の座標を変更することなく、幅と高さを変更することによって伸縮を行います。
しかし、例えばオブジェクトが広がったり、または縮んだりするように演出したい場合、現在の座標を固定して幅と高さを調整する方法は好ましくありません。そのような場合、オブジェクトの中央を基点に伸縮させるべきでしょう。
図5は、基点を長方形の中央に設定した状態で伸縮させた場合です。この場合、長方形は中心から上下左右両側に等しく伸縮します。
using System;
using System.Windows;
using System.Windows.Shapes;
using System.Windows.Controls;
using System.Windows.Media;
class Test {
[STAThread]
public static void Main() {
int left = 100, top = 50;
ScaleTransform transform = new ScaleTransform(2, 1.5, 50, 50);
Rectangle rect1 = new Rectangle();
rect1.Stroke = Brushes.Black;
rect1.Width = 100;
rect1.Height = 100;
Canvas.SetLeft(rect1, left);
Canvas.SetTop(rect1, top);
Rectangle rect2 = new Rectangle();
rect2.RenderTransform = transform;
rect2.Stroke = Brushes.Red;
rect2.Width = 100;
rect2.Height = 100;
Canvas.SetLeft(rect2, left);
Canvas.SetTop(rect2, top);
Ellipse ellipse = new Ellipse();
ellipse.Fill = Brushes.Black;
ellipse.Width = 10;
ellipse.Height = 10;
Canvas.SetLeft(ellipse, left + transform.CenterX - (ellipse.Width / 2));
Canvas.SetTop(ellipse, top + transform.CenterY - (ellipse.Height / 2));
Canvas canvas = new Canvas();
canvas.Children.Add(rect1);
canvas.Children.Add(rect2);
canvas.Children.Add(ellipse);
Window wnd = new Window();
wnd.Content = canvas;
Application app = new Application();
app.Run(wnd);
}
}
コード5は、長方形の中心を基点として伸縮を行っています。実行結果の中央の黒い丸は基点を視覚的に確認できるようにするため、起点と同じ座標に配置した Ellipse オブジェクトです。黒い長方形はオリジナルのサイズの長方形、赤い長方形が ScaleTransform オブジェクトを用いて変換したオブジェクトです。
4.10.4 歪み変換
平行移動、回転、伸縮、いずれの座標変換も、UIElement の形を崩す性質はありません。平行移動は単純に配置座標を変更するだけでしたし、回転や伸縮も UIElement の角度やサイズを変更するだけで、基本となる形が変化するわけではありません。
歪み変換は、これまでの変換とは異なり UIElement の形を歪ませてしまう座標変換です。例えば、長方形のオブジェクトを平行四辺形に変換することができます。歪み変換を行うには System.Windows.Media.SkewTransform クラスを利用します。
System.Object
System.Windows.Threading.DispatcherObject
System.Windows.DependencyObject
System.Windows.Freezable
System.Windows.Media.Animation.Animatable
System.Windows.Media.GeneralTransform
System.Windows.Media.Transform
System.Windows.Media.SkewTransform
public sealed class SkewTransform : Transform
このクラスのコンストラクタは、オーバーロードされています。コンストラクタのパラメータから、オブジェクトをどの程度歪ませるのかを表す度数を指定することができます。
public SkewTransform ()
public SkewTransform (double angleX, double angleY)
public SkewTransform (
double angleX, double angleY,
double centerX, double centerY
)
angleX パラメータには、水平方向に対する歪みを表す度数、angleY パラメータには、垂直方向に対する歪みを表す度数を指定します。centerX パラメータと centerY パラメータには、UIElement のどの座標を基点に歪ませるかを表す座標をそれぞれ設定します。centerX パラメータと centerY パラメータの考え方は ScaleTransform クラスと同じです。
コンストラクタで設定することができるこれらの値は、プロパティからも同様に設定することができます。水平方向の歪みは AngleX プロパティから、垂直方向の歪みは AngleY プロパティから設定・取得できます。
public double AngleX { get; set; }
public double AngleY { get; set; }
例えば、AngleX プロパティが 45 である場合、設定されている基点を軸に UIElement オブジェクトを 45 度歪ませます。この作業は回転と似ていますが、RotateTransform クラスとは異なり水平方向と垂直方向の回転が同期しません。つまり、オブジェクトを捻るように歪ませることができるのです。
基点となる座標は CenterX プロパティと CenterY プロパティから設定・取得することができます。
public double CenterX { get; set; }
public double CenterY { get; set; }
これらのプロパティの既定値は 0 です。よって、既定の設定では UIElement の原点である左上隅を軸にオブジェクトが歪められます。
using System;
using System.Windows;
using System.Windows.Shapes;
using System.Windows.Controls;
using System.Windows.Media;
class Test {
[STAThread]
public static void Main() {
SkewTransform transform = new SkewTransform(40, 10);
Rectangle rect = new Rectangle();
rect.RenderTransform = transform;
rect.Stroke = Brushes.Black;
rect.Width = 100;
rect.Height = 100;
Canvas.SetLeft(rect, 100);
Canvas.SetTop(rect, 50);
Canvas canvas = new Canvas();
canvas.Children.Add(rect);
Window wnd = new Window();
wnd.Content = canvas;
Application app = new Application();
app.Run(wnd);
}
}
コード6は、単純な幅 100 ピクセル、高さ 100 ピクセルの長方形を SkewTransform クラスのオブジェクトを用いて歪ませたものです。基点を軸に、水平方向に 40 度、垂直方向に 10 度、長方形が曲がっていることを確認してください。
4.10.5 変換の組み合わせ
これまでの、平行移動、回転、伸縮、歪み変換は、それぞれが独立していました。RenderTransform プロパティには、単一のオブジェクトしか設定できないため、複数の Transform を組み合わせて変換するということができません。しかし、現実には複数の変換を組み合わせた結果を最終的な変換としたいと考えることがあります。例えば、回転と伸縮を同時にオブジェクトに適用したい場合などです。
前述した様々な変換オブジェクトを組み合わせるには System.Windows.Media.TransformGroup クラスを用います。
System.Object
System.Windows.Threading.DispatcherObject
System.Windows.DependencyObject
System.Windows.Freezable
System.Windows.Media.Animation.Animatable
System.Windows.Media.GeneralTransform
System.Windows.Media.Transform
System.Windows.Media.TransformGroup
[ContentPropertyAttribute("Children")]
public sealed class TransformGroup : Transform
TransformGroup クラスは、任意の数の Transform オブジェクトを保有することができるクラスです。このクラスのオブジェクトに、組み合わせたい Transform オブジェクトを設定することで、異なる座標変換を同時に適用することができます。TransformGroup クラスの継承関係を見ての通り Transform を継承しています。よって、このクラスのオブジェクト自身も Transform 型として RenderTransform プロパティに追加することができます。
このクラスのコンストラクタは、パラメータを受け取りません。
public TransformGroup ()
TransformGroup オブジェクトは、組み合わせる Transform オブジェクトの配列を管理しています。TransformGroup に Transform オブジェクトを追加するには Children プロパティを使います。
public TransformCollection Children { get; set; }
Children プロパティが返す TransformCollection オブジェクトは、任意の数の Transform オブジェクトの配列を管理するコレクションオブジェクトです。このオブジェクトに対して Add() メソッドから Transform を追加することで、複数の座標変換を組み合わせることができます。
座標変換は、Children オブジェクトに追加された Transform の順番に行われます。
using System;
using System.Windows;
using System.Windows.Shapes;
using System.Windows.Controls;
using System.Windows.Media;
class Test {
[STAThread]
public static void Main() {
TransformGroup group = new TransformGroup();
group.Children.Add(new TranslateTransform(50, 0));
group.Children.Add(new RotateTransform(20));
group.Children.Add(new ScaleTransform(3, 2));
Rectangle rect1 = new Rectangle();
rect1.Stroke = Brushes.Black;
rect1.Width = 100;
rect1.Height = 100;
Rectangle rect2 = new Rectangle();
rect2.RenderTransform = group;
rect2.Stroke = Brushes.Red;
rect2.Width = 100;
rect2.Height = 100;
Canvas canvas = new Canvas();
canvas.Children.Add(rect1);
canvas.Children.Add(rect2);
Window wnd = new Window();
wnd.Content = canvas;
Application app = new Application();
app.Run(wnd);
}
}
コード7は、幅と高さが共に 100 ピクセル、Canvas 上の配置座標が (0, 0) の長方形に対して 、平行移動、回転、伸縮を同時に行っています。最初に、複数の Transform を組み合わせるための TransformGroup クラスのインスタンスを生成し、これに対して TranslateTransform オブジェクト、RotateTransform オブジェクト、ScaleTransform オブジェクトをそれぞれ追加しています。よって、この TransformGroup オブジェクトを設定している UIElement オブジェクトは、TransformGroup オブジェクトが保有している複数の Transform オブジェクトに従って順に座標変換されます。
実行結果の黒い長方形は、座標変換を行っていないオリジナルの長方形です。これに対して、赤い長方形が TransformGroup オブジェクトによる座標変換後の長方形となります。黒い長方形に対して、移動、回転、伸縮されていることが確認できます。