方法 : オブジェクトを回転させる
更新 : 2007 年 11 月
この例では、オブジェクトを回転させる方法を示します。この例では、最初に RotateTransform を作成した後、その Angle を度で指定します。
次の例では、Polyline オブジェクトを、左上隅を中心に 45°回転します。
使用例
<Canvas Height="200" Width="200">
<!-- Rotates the Polyline 45 degrees about the point (0,0). -->
<Polyline Points="25,25 0,50 25,75 50,50 25,25 25,0"
Stroke="Blue" StrokeThickness="10"
Canvas.Left="75" Canvas.Top="50">
<Polyline.RenderTransform>
<RotateTransform CenterX="0" CenterY="0" Angle="45" />
</Polyline.RenderTransform>
</Polyline>
</Canvas>
// Create a Polyline.
Polyline polyline1 = new Polyline();
polyline1.Points.Add(new Point(25, 25));
polyline1.Points.Add(new Point(0, 50));
polyline1.Points.Add(new Point(25, 75));
polyline1.Points.Add(new Point(50, 50));
polyline1.Points.Add(new Point(25, 25));
polyline1.Points.Add(new Point(25, 0));
polyline1.Stroke = Brushes.Blue;
polyline1.StrokeThickness = 10;
// Create a RotateTransform to rotate
// the Polyline 45 degrees about its
// top-left corner.
RotateTransform rotateTransform1 =
new RotateTransform(45);
polyline1.RenderTransform = rotateTransform1;
// Create a Canvas to contain the Polyline.
Canvas canvas1 = new Canvas();
canvas1.Width = 200;
canvas1.Height = 200;
Canvas.SetLeft(polyline1, 75);
Canvas.SetTop(polyline1, 50);
canvas1.Children.Add(polyline1);
RotateTransform の CenterX プロパティと CenterY プロパティは、オブジェクトを回転させる中心点を指定します。この中心点は、変換する要素の座標空間で表します。既定では、回転は (0,0) に適用されます。これは変換対象のオブジェクトの左上隅です。
次の例では、Polyline オブジェクトを、点 (25,50) を中心にして時計回りに 45°回転します。
<Canvas Height="200" Width="200">
<!-- Rotates the Polyline 45 degrees about the point (25,50). -->
<Polyline Points="25,25 0,50 25,75 50,50 25,25 25,0"
Stroke="Blue" StrokeThickness="10"
Canvas.Left="75" Canvas.Top="50">
<Polyline.RenderTransform>
<RotateTransform CenterX="25" CenterY="50" Angle="45" />
</Polyline.RenderTransform>
</Polyline>
</Canvas>
// Create a Polyline.
Polyline polyline2 = new Polyline();
polyline2.Points = polyline1.Points;
polyline2.Stroke = Brushes.Blue;
polyline2.StrokeThickness = 10;
// Create a RotateTransform to rotate
// the Polyline 45 degrees about the
// point (25,50).
RotateTransform rotateTransform2 =
new RotateTransform(45);
rotateTransform2.CenterX = 25;
rotateTransform2.CenterY = 50;
polyline2.RenderTransform = rotateTransform2;
// Create a Canvas to contain the Polyline.
Canvas canvas2 = new Canvas();
canvas2.Width = 200;
canvas2.Height = 200;
Canvas.SetLeft(polyline2, 75);
Canvas.SetTop(polyline2, 50);
canvas2.Children.Add(polyline2);
次の図は、2 つのオブジェクトに Transform を適用した結果を示しています。
異なる中心点を軸に 45°回転させた 2 つのオブジェクト
.gif "中心点が異なる 45 度の回転")
前の例での Polyline は UIElement です。UIElement の RenderTransform プロパティに Transform を適用するときは、RenderTransformOrigin プロパティを使用して、その要素に適用するすべての Transform の原点を指定できます。RenderTransformOrigin プロパティは相対座標を使用するので、要素のサイズがわからなくても、要素の中心に変換を適用できます。詳細および例については、「方法 : 変換の原点を相対値で指定する」を参照してください。
サンプル全体については、「2-D 変換のサンプル」を参照してください。