《15天玩转WPF》—— 直线、矩形、椭圆的各种画法
时间：2020.4.2，《深入浅出WPF》也学到了最后一章，三百页用了将近一个月 (3.14开始） 属实有点慢，因为有个人的一些事情. .
. 前面的一些文章都是举出书中核心的知识，有点枯燥 这一章学习图形相关的知识，有点小激动 . . .
这一章学习过后，就差不多开学了，已经开始进行项目的学习与制作 . . .
文章讲解直线、矩形、椭圆的用法，让我们朴实无华的形状变的好看一点 . . .
直线
直线是非常简单的图形，它有 X1、Y1、X2、Y2这四个属性，用来确定线的起始与终点位置，它的 Stroke用来设置 画刷颜色（Brush），下面我几种不同的画线的风格 :
<Line X1="10" Y1="20" X2="260" Y2="20" Stroke="Red" StrokeThickness="10"/><Line X1="10" Y1="40" X2="260" Y2="40" Stroke="Orange" StrokeThickness="6"/><Line X1="10" Y1="60" X2="260" Y2="60" Stroke="Green" StrokeThickness="3"/><Line X1="10" Y1="80" X2="260" Y2="80" Stroke="Purple" StrokeThickness="2"/><Line X1="10" Y1="100" X2="260" Y2="100" Stroke="Black" StrokeThickness="1"/><Line X1="10" Y1="120" X2="260" Y2="120" Stroke="Black" StrokeThickness="1"StrokeDashArray="10,20,30"/><Line X1="10" Y1="140" X2="260" Y2="140" Stroke="Black" StrokeThickness="1"StrokeDashArray="10"/><Line X1="10" Y1="160" X2="260" Y2="160" Stroke="Black" StrokeThickness="6"StrokeEndLineCap="Round"/><Line X1="10" Y1="180" X2="260" Y2="180" StrokeThickness="6" StrokeEndLineCap="Round"><Line.Stroke><LinearGradientBrush EndPoint="0,0.5" StartPoint="1,0.5"><GradientStop Color="Blue"/><GradientStop Offset="1"/></LinearGradientBrush></Line.Stroke>
</Line>StrokeDashArray 属性是用来设置虚线的，数据是一个集合类型 . . .
StrokeEndLineCap 属性是用来设置线终点的形状风格 . . .
最后一个线，我们设置它的画刷为渐变的效果，别有一番滋味 . . .
效果如下图所示：
矩形
矩形也有笔触（Stroke，连线），矩形的填充效果是 Fill属性，它的类型是 Brush，
常用的 Brush类型有：
- SolidColorBrush：实心画刷，直接用颜色字符串赋值
- LinearGradientBrush：线性渐变画刷
- RadialGradientBrush：径向渐变画刷
- ImageBrush：图片填充
- DrawingBrush：矢量图 和 位图作为填充内容
- VisualBrush：获取控件的外表作为填充内容
下面我将每一种类型的填充方法进行演示 . . .
（最后再加上一种矩形的使用方法：渐变填充边框）
VisualBrush的类型我将单独演示 . . .
首先我们将界面进行布局，然后将每一种类型的方式，分别放在不同的行列之中：
<Grid.RowDefinitions><RowDefinition Height="160"/><RowDefinition Height="10"/><RowDefinition Height="160"/>
</Grid.RowDefinitions><Grid.ColumnDefinitions><ColumnDefinition Width="180"/><ColumnDefinition Width="10"/><ColumnDefinition Width="180"/><ColumnDefinition Width="10"/><ColumnDefinition Width="180"/>
</Grid.ColumnDefinitions>布局如图所示：
我们把下面演示的六种方法的 矩形分别放在这六个单元格中，（不包含 VisualBrush 方法，下面单独演示） . . .
SolidColorBrush
直接用颜色字符串填充
<Rectangle Grid.Column="0" Grid.Row="0" Stroke="Black" Fill="LightBlue"/>效果如下图所示：
LinearGradientBrush
使用渐变颜色填充
<Rectangle Grid.Column="2" Grid.Row="0"><Rectangle.Fill><LinearGradientBrush><GradientStop Color="LightBlue" Offset="0"/><GradientStop Color="Green" Offset="0.25"/><GradientStop Color="White" Offset="0.6"/><GradientStop Color="Beige" Offset="1"/></LinearGradientBrush></Rectangle.Fill>
</Rectangle>效果如下图所示：
RadialGradientBrush
使用径向渐变填充
<Rectangle Grid.Column="4" Grid.Row="0"><Rectangle.Fill><RadialGradientBrush><GradientStop Color="LightBlue" Offset="0"/><GradientStop Color="Pink" Offset="0.25"/><GradientStop Color="White" Offset="0.6"/><GradientStop Color="Beige" Offset="1"/></RadialGradientBrush></Rectangle.Fill>
</Rectangle>效果如下图所示：
ImageBrush
使用图片填充
<Rectangle Grid.Column="0" Grid.Row="2"><Rectangle.Fill><!--可见区与填充模式--><ImageBrush ImageSource=".\bj.jpeg" Viewport="0,0,0.3,0.35"TileMode="Tile"/></Rectangle.Fill>
</Rectangle>Viewport 属性是截取图片的大小， TileMode是填充的模式
效果如下图所示：
DrawingBrush
矢量图填充
<Rectangle Grid.Column="2" Grid.Row="2"><Rectangle.Fill><DrawingBrush Viewport="0,0,0.2,0.2" TileMode="Tile"><DrawingBrush.Drawing><GeometryDrawing Brush="LightBlue"><GeometryDrawing.Geometry><EllipseGeometry RadiusX="0.2" RadiusY="0.2"/></GeometryDrawing.Geometry></GeometryDrawing></DrawingBrush.Drawing></DrawingBrush></Rectangle.Fill>
</Rectangle>中间画出一个几何图形圆，来作为矢量图，截取大小，填充模式等等 . . .
效果如下图所示：
渐变框填充，Fill为null
<Rectangle Grid.Column="4" Grid.Row="2" StrokeThickness="10"><Rectangle.Stroke><LinearGradientBrush><GradientStop Color="Yellow" Offset="0"/><GradientStop Color="LightGreen" Offset="1"/></LinearGradientBrush></Rectangle.Stroke>
</Rectangle>效果如下图所示：
.
.
.
除了 VisualBrush我们没有演示，其它的六种填充方式都已经写好了，如下图：
.
.
.
下面我们来看一个VisualBrush的例子。为了简单起见，我们的目标是将 Button “复制”一下他的外观，每复制一次，它的外观就透明 20% . . .
代码如下：
<Grid Margin="10"><Grid.ColumnDefinitions><ColumnDefinition Width="160"/><ColumnDefinition Width="*"/><ColumnDefinition Width="160"/></Grid.ColumnDefinitions><StackPanel x:Name="stackPanelLeft" Background="White"><Button x:Name="realButton" Content="OK" Height="40"/></StackPanel><Button Content=">>>" Grid.Column="1" Margin="5,0" Click="CloneVisual"/><StackPanel x:Name="stackPanelRight" Background="White" Grid.Column="2"/>
</Grid>当点击中间的按钮时，开始填充 stackPanelRight 中的内容，（复制透明 Button的模样）：
double o = 1.0; // 用于表示不透明的计数器private void CloneVisual(object sender, RoutedEventArgs e)
{VisualBrush vBrush = new VisualBrush(this.realButton); // 获取 Button的样子// 准备一个 Rect，用于填充 stackPanelRight中的内容Rectangle rect = new Rectangle(); // 获取左边 Button的显示大小rect.Width = realButton.ActualWidth;rect.Height= realButton.ActualHeight;rect.Fill = vBrush; // 将获取的 Button模样填充给 rectrect.Opacity = o; // 设置 Rect的不透明度o -= 0.2; // 每点击按钮一次，不透明度就变化一次this.stackPanelRight.Children.Add(rect); // 将 rect放入准备好的布局之中
}效果动态图如下所示：
椭圆
我们来用椭圆来画一个径向渐变的正圆，适当的为它设置一些属性，变的好看一点，
代码如下：
<Ellipse Stroke="Gray" Width="140" Height="140" Cursor="Hand" ToolTip="A Boll"><Ellipse.Fill><RadialGradientBrush GradientOrigin="0.2,0.8" RadiusX="0.75"RadiusY="0.75"><RadialGradientBrush.RelativeTransform><TransformGroup><RotateTransform Angle="90" CenterX="0.5" CenterY="0.5"/><TranslateTransform/></TransformGroup></RadialGradientBrush.RelativeTransform><GradientStop Color="#FFFFFFFF" Offset="0"/><GradientStop Color="#FF444444" Offset="0.65"/><GradientStop Color="#FF999999" Offset="1"/></RadialGradientBrush></Ellipse.Fill>
</Ellipse>其中我们设置了一些属性：
GradientOrigin：开始渐变的点在哪
RotateTransform：翻转
Radius：半径
等等 . . .
效果如下图所示：
这个蛋是不是比较性感呢 ？
作者：浪子花梦
《15天玩转WPF》—— 直线、矩形、椭圆的各种画法相关推荐
- c语言直线和椭圆的交点,直线与椭圆相交求交点
已知a,b和直线上的两点,中心在原点,求直线与椭圆相交求交点坐标 #include #include #include void main() { double a,b,c,x1,x2,y1,y2,k ...
- C# WPF动点任意移动气泡画法(解决方案使用到数学勾股定理、正弦定理、向量知识)。...
原文:C# WPF动点任意移动气泡画法(解决方案使用到数学勾股定理.正弦定理.向量知识). 许久没写博客了,最近在研究WPF下气泡的画法,研发过程还是比较艰辛的(主要是复习了高中的数学知识,MMP全忘 ...
- 四心圆法画椭圆原理_四心圆法画椭圆的解析画法
四心圆法画椭圆的解析画法 本文 舟绍 一种 用解析 法 确定 四心 四的 圆心 位置 画椭 圆的方法 ．供 容器 设计 者及 制 图者 画椭 圆 时参考 ． 关键饲-竺燮 解析法画蚀 怖 溃 四 心圆 ...
- matlab snapnow,任意倾斜椭圆方程的画法.pdf
任意倾斜椭圆方程的画法 椭圆的旋转变换 标准椭圆方程为 .下面介绍两种画任意形式的椭圆方法,比如椭圆心不在原点,带有倾斜角的椭圆,结合基本 公式和程序画任意形式的倾斜椭圆. Contents 初始 ...
- C# WPF动点任意移动气泡画法(解决方案使用到数学勾股定理、正弦定理、向量知识)。
C# WPF动点任意移动气泡画法(解决方案使用到数学勾股定理.正弦定理.向量知识). 参考文章: (1)C# WPF动点任意移动气泡画法(解决方案使用到数学勾股定理.正弦定理.向量知识). (2)ht ...
- OpenCV_11 轮廓检测：图像的轮廓+绘制轮廓+轮廓近似+边界矩形+椭圆拟合+直线拟合
1 图像的轮廓 轮廓可以简单认为成将连续的点(连着边界)连在一起的曲线,具有相同的颜色或者灰度.轮廓是图像目标的外部特征,这种特征对于我们进行图像分析,目标识别和理解等更深层次的处理都有很重要的意义. ...
- 在MFC中，利用GDI绘制橡皮筋效果-直线,圆,椭圆,矩形
这段时间学习了GDI和GDI+:如果想实现橡皮筋效果,还是离不开GDI.虽然GDI+也能实现,但比较麻烦,有局限性,必须用到双缓冲. 下面贴出GDI绘制橡皮筋效果的示例代码 ZKCADView.h: ...
- VS2019MFC进行无预览简单绘图:直线,画笔,画刷,矩形,椭圆
1.MFC常用绘图函数 CreatePen 创建画笔:属性:线型.宽度.颜色 CreateSolidBrush 创建画刷,填充封闭图形 SetPixel 绘制像素点,返回RGB值 SetPixelV ...
- c++ builder 用鼠标画直线、椭圆、矩形
//在窗体上绘制直线椭圆.矩形. //1.思路:用鼠标按下和松开确定要花图像的开始和结束位置,并设定好Pen和Brush的各种属性. //2.界面 //3.代码: //---------------- ...
最新文章
- 单帧风景照变延时摄影，分分钟搞定，还能有昼夜变化，这是来自日本的开源动画景观算法...
- 五大特点_探究干细胞五大特点：（五）不成瘤
- mysql anyvalue函数_Mysql 的ANY_VALUE()函数和 ONLY_FULL_GROUP_BY 模式
- python语言写九九乘法表_怎么使用Python语言写一个九九乘法表？
- MATLAB非线性最小二乘lsqnonlin
- 【物理应用】基于matlab波数谱计算【含Matlab源码 508期】
- PBRT v3看完了
- 统计遗传学：第五章，多基因评分PGS
- python两个数组合并去重_python中有将两列数据合并为一列数据的函数么
- 有关reducer拆分的学习
- ios备忘录下载安卓版_如何下载和平精英国际服?
- Android Go项目 来电铃声与UI不同步问题
- [2021江西省赛高校组]wp
- 英特尔、高通等多家科技巨头禁止员工与华为交流！
- html时间轴横向自动播放,利用jQuery实现日期时间轴自动播放代码
- csdn竟然还有这种神器！后悔没有早点知道！超好用的csdn插件，别再犹豫了，赶快入手吧！
- 低代码编程核心技术概念
- qq企业邮箱 pop3服务器是什么意思,腾讯QQ企业邮箱POP3/SMTP设置
- 微信有没有免费提现服务器,微信终于可以免费提现了，速领！
- 【从零开始学习计算机网络——计算机网络传输技术】