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

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

阅读量：7047 次

发布时间：2019-06-28

本文共 4110 字，大约阅读时间需要 13 分钟。

在中，我们了解了如何绘制基本的图形。

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

例子

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

XAML代码：

C#代码：

for (int i = 0; i < 36; i++){    var polygon = new Polygon()    {        Fill = new SolidColorBrush(Colors.LightBlue),        Points = new PointCollection() {             new Point() {X = 0, Y = 0},            new Point(){X = 100, Y = 5},            new Point(){X = 0, Y = 10}        }    };    polygon.RenderTransform = new TransformGroup()    {        Children = new TransformCollection()         {             new RotateTransform(){ 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实现：

后台代码实现：

var polygon = new Polygon(){    Fill = new SolidColorBrush(Color.FromRgb(0x01, 0x9A, 0xFF)),    Points = new PointCollection()     {         new Point() {X = 0, Y = 0},        new Point(){X = 100, Y = 25},        new Point(){X = 0, Y = 50}    },    RenderTransform = new TransformGroup()    {        Children = new TransformCollection()         {            new TranslateTransform(){X=50,Y=100}        }    }};MainCanvas.Children.Add(polygon);

RotateTransform

XAML实现:

后台代码实现：

var polygon = new Polygon(){    Fill = new SolidColorBrush(Color.FromRgb(0x01, 0x9A, 0xFF)),    Points = new PointCollection()     {         new Point() {X = 0, Y = 0},        new Point(){X = 100, Y = 25},        new Point(){X = 0, Y = 50}    },    RenderTransform = new TransformGroup()    {        Children = new TransformCollection()         {            new TranslateTransform(){X=50,Y=100},            new RotateTransform(){Angle=50, CenterX=50, CenterY=100}        }    }};

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

ScaleTransform

XAML实现:

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

SkewTransform

XAML实现:

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

MatrixTransform

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

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

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

实现代码：

var polygon = new Polygon(){    Fill = new SolidColorBrush(Color.FromRgb(0x01, 0x9A, 0xFF)),    Points = new PointCollection()    {        new Point(){X=0, Y = 0},        new Point(){X=0, Y = 50},        new Point(){X=100, Y = 25}    },    RenderTransform = new TransformGroup()    {        Children = new TransformCollection()         {            new MatrixTransform()            {                Matrix = new Matrix()                {                    M11 = 1, M12 = 0,                    M21 = 0, M22 = 1,                    OffsetX = 150, OffsetY = 100                }            }        }    }};MainCanvas.Children.Add(polygon);