您的位置：首页 > 其它

WPF学习05：2D绘图 使用Transform进行控件变形

2015-04-01 20:04 686 查看
在WPF学习04：2D绘图使用Shape绘基本图形中，我们了解了如何绘制基本的图形。

这一次，我们进一步，研究如何将图形变形。

例子

一个三角形，经Transform形成组合图形：







XAML代码：

<Windowx:Class="Transforms.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow"Height="350"Width="525"Loaded="Window_Loaded">
<CanvasName="MainCanvas">
</Canvas>
</Window>


C#代码：

for(inti=0;i<36;i++)
{
varpolygon=newPolygon()
{
Fill=newSolidColorBrush(Colors.LightBlue),
Points=newPointCollection(){
newPoint(){X=0,Y=0},
newPoint(){X=100,Y=5},
newPoint(){X=0,Y=10}
}
};
polygon.RenderTransform=newTransformGroup()
{
Children=newTransformCollection()
{
newRotateTransform(){Angle=i*10}
}
};
Canvas.SetTop(polygon,100);
Canvas.SetLeft(polygon,200);
MainCanvas.Children.Add(polygon);
}


Shape简介

WPF提供了Transform类，使我们得以对控件进行变形操作。

Transform提供了TranslateTransform(平移变形)RotateTransform(旋转变形)ScaleTransform(缩放变形)SkewTransform(扭曲变形)MatrixTransform(矩阵变换变形)

回顾一下Shape的继承结构：





UIElement提供了RenderTransform





FrameworkElement提供了LayoutTransform





两者皆为Transform类型的属性，本文将逐个介绍各类变形的使用方法，最后将说明这两种Transform的区别。

TranslateTransform:





XAML实现：

<CanvasName="MainCanvas">
<PolygonPoints="0,0100,250,50"Stroke="Black"StrokeThickness="2"StrokeDashArray="11"></Polygon>
<TextBlockCanvas.Top="15"Canvas.Left="2">我是原图形</TextBlock>
<PolygonPoints="0,0100,250,50"Fill="#019AFF">
<Polygon.RenderTransform>
<TransformGroup>
<TranslateTransformX="50"Y="100"></TranslateTransform>
</TransformGroup>
</Polygon.RenderTransform>
</Polygon>
</Canvas>



后台代码实现：

varpolygon=newPolygon()
{
Fill=newSolidColorBrush(Color.FromRgb(0x01,0x9A,0xFF)),
Points=newPointCollection()
{
newPoint(){X=0,Y=0},
newPoint(){X=100,Y=25},
newPoint(){X=0,Y=50}
},
RenderTransform=newTransformGroup()
{
Children=newTransformCollection()
{
newTranslateTransform(){X=50,Y=100}
}
}
};
MainCanvas.Children.Add(polygon);


RotateTransform




XAML实现:

<CanvasName="MainCanvas">
<PolygonPoints="0,0100,250,50"Stroke="Black"StrokeThickness="2"StrokeDashArray="11"></Polygon>
<TextBlockCanvas.Top="15"Canvas.Left="2">我是原图形</TextBlock>
<PolygonPoints="0,0100,250,50"Fill="#019AFF">
<Polygon.RenderTransform>
<TransformGroup>
<TranslateTransformX="250"Y="100"></TranslateTransform>
</TransformGroup>
</Polygon.RenderTransform>
</Polygon>
<PolygonPoints="0,0100,250,50"Fill="#019AFF">
<Polygon.RenderTransform>
<TransformGroup>
<TranslateTransformX="50"Y="100"></TranslateTransform>
<RotateTransformCenterX="50"CenterY="100"Angle="50"></RotateTransform>
</TransformGroup>
</Polygon.RenderTransform>
</Polygon>
</Canvas>


后台代码实现：

varpolygon=newPolygon()
{
Fill=newSolidColorBrush(Color.FromRgb(0x01,0x9A,0xFF)),
Points=newPointCollection()
{
newPoint(){X=0,Y=0},
newPoint(){X=100,Y=25},
newPoint(){X=0,Y=50}
},
RenderTransform=newTransformGroup()
{
Children=newTransformCollection()
{
newTranslateTransform(){X=50,Y=100},
newRotateTransform(){Angle=50,CenterX=50,CenterY=100}
}
}
};


注意，这里通过设置CenterXCenterY配置旋转的参考中心点，改点默认为(0,0)

ScaleTransform




XAML实现:

<CanvasName="MainCanvas">
<PolygonPoints="0,0100,250,50"Stroke="Black"StrokeThickness="2"StrokeDashArray="11"></Polygon>
<TextBlockCanvas.Top="15"Canvas.Left="2">我是原图形</TextBlock>
<PolygonPoints="0,0100,250,50"Fill="#019AFF">
<Polygon.RenderTransform>
<TransformGroup>
<TranslateTransformX="50"Y="100"></TranslateTransform>
<ScaleTransformScaleX="0.5"ScaleY="0.5"></ScaleTransform>
</TransformGroup>
</Polygon.RenderTransform>
</Polygon>
<PolygonPoints="0,0100,250,50"Fill="#019AFF">
<Polygon.RenderTransform>
<TransformGroup>
<TranslateTransformX="50"Y="100"></TranslateTransform>
<ScaleTransformScaleX="1.5"ScaleY="1.5"></ScaleTransform>
</TransformGroup>
</Polygon.RenderTransform>
</Polygon>
</Canvas>


后台代码实现参考之前的代码，类似。

SkewTransform




XAML实现:

<CanvasName="MainCanvas">
<PolygonPoints="0,0100,250,50"Stroke="Black"StrokeThickness="2"StrokeDashArray="11"></Polygon>
<TextBlockCanvas.Top="15"Canvas.Left="2">我是原图形</TextBlock>
<PolygonPoints="0,0100,250,50"Fill="#019AFF">
<Polygon.RenderTransform>
<TransformGroup>
<SkewTransformAngleY="40"></SkewTransform>
</TransformGroup>
</Polygon.RenderTransform>
</Polygon>
</Canvas>


后台代码实现参考之前的代码，类似。

MatrixTransform
图形变换的本质都是将各个点，映射到一个齐次坐标系，然后乘上一个3X3的矩阵进行变换。

详细的内容这本书介绍的比较全：



这里只实现一个简单的矩阵实现平移：





实现代码：

varpolygon=newPolygon()
{
Fill=newSolidColorBrush(Color.FromRgb(0x01,0x9A,0xFF)),
Points=newPointCollection()
{
newPoint(){X=0,Y=0},
newPoint(){X=0,Y=50},
newPoint(){X=100,Y=25}
},
RenderTransform=newTransformGroup()
{
Children=newTransformCollection()
{
newMatrixTransform()
{
Matrix=newMatrix()
{
M11=1,M12=0,
M21=0,M22=1,
OffsetX=150,OffsetY=100
}
}
}
}
};
MainCanvas.Children.Add(polygon);


RenderTransform与LayoutTransform
对于Canvas这样使用绝对定位的Layout控件下的变形操作，两者的效果是一致的。

而在其它的布局控件中，LayoutTransform是会影响到布局的。

例子：



XAML代码：

<StackPanelName="MainCanvas">
<PolygonPoints="0,0150,250,50"Stroke="Black"StrokeThickness="2"StrokeDashArray="11">
<Polygon.LayoutTransform>
<RotateTransformAngle="50"></RotateTransform>
</Polygon.LayoutTransform>
</Polygon>
<PolygonPoints="0,0150,250,50"Stroke="Black"StrokeThickness="2"StrokeDashArray="11"></Polygon>
</StackPanel>


我们将LayoutTransform改为RenderTransform，结果如下:




                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航