WPF学习04:2D绘图 使用Shape绘基本图形中,我们了解了如何绘制基本的图形。

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

例子

一个三角形,经Transform形成组合图形:

XAML代码:

<Window x: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">
<Canvas Name="MainCanvas">
</Canvas>
</Window>

C#代码:

for (int i = ; i < ; i++)
{
var polygon = new Polygon()
{
Fill = new SolidColorBrush(Colors.LightBlue),
Points = new PointCollection() {
new Point() {X = , Y = },
new Point(){X = , Y = },
new Point(){X = , Y = }
}
};
polygon.RenderTransform = new TransformGroup()
{
Children = new TransformCollection()
{
new RotateTransform(){ Angle = i * }
}
};
Canvas.SetTop(polygon, );
Canvas.SetLeft(polygon, );
MainCanvas.Children.Add(polygon);
}

Shape简介

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

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

回顾一下Shape的继承结构:

UIElement提供了RenderTransform

FrameworkElement提供了LayoutTransform

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


TranslateTransform:

XAML实现:

<Canvas Name="MainCanvas">
<Polygon Points="0,0 100,25 0,50" Stroke="Black" StrokeThickness="2" StrokeDashArray="1 1"></Polygon>
<TextBlock Canvas.Top="15" Canvas.Left="2">我是原图形</TextBlock>
<Polygon Points="0,0 100,25 0,50" Fill="#019AFF">
<Polygon.RenderTransform>
<TransformGroup>
<TranslateTransform X="50" Y="100"></TranslateTransform>
</TransformGroup>
</Polygon.RenderTransform>
</Polygon>
</Canvas>
 

后台代码实现:

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

RotateTransform

XAML实现:

<Canvas Name="MainCanvas">
<Polygon Points="0,0 100,25 0,50" Stroke="Black" StrokeThickness="2" StrokeDashArray="1 1"></Polygon>
<TextBlock Canvas.Top="15" Canvas.Left="2">我是原图形</TextBlock>
<Polygon Points="0,0 100,25 0,50" Fill="#019AFF">
<Polygon.RenderTransform>
<TransformGroup>
<TranslateTransform X="250" Y="100"></TranslateTransform>
</TransformGroup>
</Polygon.RenderTransform>
</Polygon>
<Polygon Points="0,0 100,25 0,50" Fill="#019AFF">
<Polygon.RenderTransform>
<TransformGroup>
<TranslateTransform X="50" Y="100"></TranslateTransform>
<RotateTransform CenterX="50" CenterY="100" Angle="50"></RotateTransform>
</TransformGroup>
</Polygon.RenderTransform>
</Polygon>
</Canvas>

后台代码实现:

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

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


ScaleTransform

XAML实现:

<Canvas Name="MainCanvas">
<Polygon Points="0,0 100,25 0,50" Stroke="Black" StrokeThickness="2" StrokeDashArray="1 1"></Polygon>
<TextBlock Canvas.Top="15" Canvas.Left="2">我是原图形</TextBlock>
<Polygon Points="0,0 100,25 0,50" Fill="#019AFF">
<Polygon.RenderTransform>
<TransformGroup>
<TranslateTransform X="50" Y="100"></TranslateTransform>
<ScaleTransform ScaleX="0.5" ScaleY="0.5"></ScaleTransform>
</TransformGroup>
</Polygon.RenderTransform>
</Polygon>
<Polygon Points="0,0 100,25 0,50" Fill="#019AFF">
<Polygon.RenderTransform>
<TransformGroup>
<TranslateTransform X="50" Y="100"></TranslateTransform>
<ScaleTransform ScaleX="1.5" ScaleY="1.5"></ScaleTransform>
</TransformGroup>
</Polygon.RenderTransform>
</Polygon>
</Canvas>

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


SkewTransform

XAML实现:

<Canvas Name="MainCanvas">
<Polygon Points="0,0 100,25 0,50" Stroke="Black" StrokeThickness="2" StrokeDashArray="1 1"></Polygon>
<TextBlock Canvas.Top="15" Canvas.Left="2">我是原图形</TextBlock>
<Polygon Points="0,0 100,25 0,50" Fill="#019AFF">
<Polygon.RenderTransform>
<TransformGroup>
<SkewTransform AngleY="40" ></SkewTransform>
</TransformGroup>
</Polygon.RenderTransform>
</Polygon>
</Canvas>

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


MatrixTransform

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

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

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

实现代码:

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

RenderTransform与LayoutTransform

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

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

例子:

XAML代码:

<StackPanel Name="MainCanvas">
<Polygon Points="0,0 150,25 0,50" Stroke="Black" StrokeThickness="2" StrokeDashArray="1 1">
<Polygon.LayoutTransform>
<RotateTransform Angle="50"></RotateTransform>
</Polygon.LayoutTransform>
</Polygon>
<Polygon Points="0,0 150,25 0,50" Stroke="Black" StrokeThickness="2" StrokeDashArray="1 1"></Polygon>
</StackPanel>

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

WPF学习05:2D绘图 使用Transform进行控件变形的更多相关文章

  1. 【WPF学习】第二十五章 日期控件

    WPF包含两个日期控件:Calender和DatePicker.这两个控件都被设计为允许用户选择日期. Calendar控件显示日期,在与Windows操作系统中看到的日历(例如,当配置系统日期时看到 ...

  2. 【WPF学习】第二十二章 文本控件

    WPF提供了三个用于输入文本的控件:TextBox.RichTextBox和PasswordBox.PasswordBox控件直接继承自Control类.TextBox和RichTextBox控件间接 ...

  3. WPF学习之路(十二)控件(Items控件)

     ListBox 提供了一个选项列表,可以固定或者动态绑定 <StackPanel> <GroupBox Margin="> <GroupBox.Header& ...

  4. WPF学习之路(十二)控件(Range控件)

    ProgressBar 进度条,主要属性:Minimum\Maximun\Value, IsIndeterminate为True时,进度条会循环运转 <Grid> <Grid.Row ...

  5. WPF学习之路(十二)控件(HeaderedContent控件)

    GroupBox 用来组织多种控件的常见控件,因为是内容空间,只能直接包含一项,需要使用面板一类的中间空间. Header和Content可以是任意元素 <GroupBox> <Gr ...

  6. WPF学习之路(十二)控件(Content控件)

    Label Label相比TextBlock功能并不强大,但是支持键盘快捷键的方式获得焦点 <StackPanel> <Label Target="{Binding Ele ...

  7. UWP学习记录9-设计和UI之控件和模式6

    UWP学习记录9-设计和UI之控件和模式6 1.图形和墨迹 InkCanvas是接收和显示墨迹笔划的控件,是新增的比较复杂的控件,这里先不深入. 而形状(Shape)则是可以显示的各种保留模式图形对象 ...

  8. WPF教程十一:简单了解并使用控件模板

    WPF教程十一:简单了解并使用控件模板 这一章梳理控件模板,每个WPF控件都设计成无外观的,但是行为设计上是不允许改变的,比如使用Button的控件时,按钮提供了能被点击的内容,那么自由的改变控件外观 ...

  9. UWP学习记录10-设计和UI之控件和模式7

    UWP学习记录10-设计和UI之控件和模式7 1.导航控件 Hub,中心控件,利用它你可以将应用内容整理到不同但又相关的区域或类别中. 中心的各个区域可按首选顺序遍历,并且可用作更具体体验的起始点. ...

随机推荐

  1. jquery plugins —— datatables 搜索后汇总

    网上的例子 http://datatables.club/example/plug-ins/api.html只能对当前页面或所有数据进行汇总,不能对搜索结果数据汇总. 以下是对datatables自带 ...

  2. 【Amazon Linux】免费搭建subversion服务器

    Amazon的EC2服务器可以免费试用一年.在这里申请: https://aws.amazon.com/cn/free/ 尝试把它弄成一个svn库来保存代码.按照 http://northwaygam ...

  3. C#中XML与对象之间的序列化、反序列化

    直接上代码: using System; using System.IO; using System.Text; using System.Xml; using System.Xml.Serializ ...

  4. 剑指Offer35 两个链表第一个公共结点

    /************************************************************************* > File Name: 35_FirstC ...

  5. 【转】 关于data factory的介绍——即如何快速生成大批量数据

    上次在我的博客中讲述了quest公司的spotlight系列软件,这次来扯淡一下quest公司的另一测试辅助软件 datafactory(数据工厂),顾名思义,数据工厂是生产数据的,主要应用领域是性能 ...

  6. MongoDB - MongoDB CRUD Operations

    CRUD operations create, read, update, and delete documents. Create Operations Create or insert opera ...

  7. [CAMCOCO][C#]我的系统架构 总图

    之前写的感觉有点乱,把架构的设计图先放上来吧,对照着说. CAMCOCO架构能够支持的模型: 1.B/S程序,比如CRM什么的,和访问普通网站没什么区别,都是从WEB服务器上进行操作: 2.APP的服 ...

  8. 微信小程序个人理解

    1:小程序不是用HTML5开发,它是由微信全新定义的规范,是基于XML+JS的,不支持也不兼容HTML,兼容受限的部分CSS写法.(wxml) weixin markup language 2:小程序 ...

  9. QtPropertyBrowser+vs2010的安装与配置(转)

    这一篇文章有些问题,后又写了一篇,地址是http://www.cnblogs.com/aminxu/p/4552410.html 转自http://blog.csdn.net/jingwenlai_s ...

  10. 初探内联方式的 onload="doSomething()"为何要加"()"?而js代码的 onload="doSomething" 和 addEventListener 为何不加"()"?

    问题引入:在看<Jquery基础教程>第四版的时,P34页有这样一段话 引用函数与调用函数 这里在将函数指定为处理程序时,省略了后面的圆括号,只使用了函数名.如果带着圆括号,函数会被立即调 ...