WPF基础教程之形状画刷与变换详解

形状

在WPF中形状继承自FrameworkElement类。因此,形状是元素,有如下好处。

  • 形状绘制自身。不需要管理无效的情况和绘图过程。例如,移动内容,改变窗口尺寸或改变属性时,不需要手动重新绘制图形。
  • 使用与其他元素相同的方式组织形状。在可任何布局容器中放置图形。(canvas明细是最有用的容器,因为他允许在特性的坐标位置放置形状,当构建复杂的具有多个部分的图画时,很重要。)
  • 图形支持与其他元素相同的事件。如焦点、键盘、鼠标事件。

Shape类子类

矩形和椭圆

需要设置Height和Width属性,设置Fill或Stroke属性,如未设置Fill或Stroke属性,形状不会显示。

<StackPanel>
 <Ellipse Fill="Yellow" Stroke="Blue" Width="100" Height="50" Margin="5" HorizontalAlignment="Left"></Ellipse>
 <Rectangle Fill="Yellow" Stroke="Blue" Height="50" Width="100" Margin="5" HorizontalAlignment="Left"></Rectangle>
 </StackPanel>

设置带有带有拐角的椭圆 RadiusX RadiusY值。

放置图形的理想容器是Canvas,改容器要求使用left、top、right或bottom附加属性,为每个图形指定坐标。这样可以完全控制形状是如何相互重叠的

使用viewbox控件缩放形状

使用Canvas控件唯一的限制是不能改变自身的尺寸以适应更大或更小的窗口。如果希望联合Canvas控件的精准控制功能和方便的改变尺寸功能,可使用Viewbox元素。

<Grid>
 <Grid.RowDefinitions>
  <RowDefinition Height="auto"></RowDefinition>
  <RowDefinition Height="*"></RowDefinition>
 </Grid.RowDefinitions>
 <TextBlock>The first row of the Grid</TextBlock>
 <Viewbox Grid.Row="1" HorizontalAlignment="Left">
  <Canvas Width="200" Height="150">
  <Ellipse Fill="Yellow" Stroke="Blue" Width="100" Height="50" Margin="5" HorizontalAlignment="Left" Canvas.Left="10" Canvas.Top="50"></Ellipse>
  <Rectangle Fill="Yellow" Stroke="Blue" Height="50" Width="100" Margin="5" HorizontalAlignment="Left" Canvas.Left="30" Canvas.Top="40"></Rectangle>
  </Canvas>
 </Viewbox>
 </Grid>

直线

<Line Stroke="Blue" X1="0" Y1="10" X2="10" Y2="100"></Line>

折线

<Polyline Stroke="Blue" StrokeThickness="5" Points="10,150 30,140 50,160 70,130 90,170 110,120 170,190,190,100 210,240"></Polyline>

多边形

<Polygon Stroke="Blue" StrokeThickness="1" Fill="Yellow" Canvas.Left="10" Canvas.Top="10" FillRule="EvenOdd" Points="15,200 68,70 110,200 0,125 135,125"></Polygon>

FillRule填充规则:如果设置为EvenOdd:WPF计算为了到达图形的外部必须穿过的直线数量。如果是奇数,就填充区域;如果是偶数就不填充改区域。

如果属性设置为Nonzero填充规则,WPF计算为了到达图形的外部经过的正反向和反方向的直线数量差。如果等于0就不填充该区域,如果等于等于0就填充。

点划线(虚线)

<Polyline Stroke="Blue" StrokeThickness="14" StrokeDashArray="1 2" Points="10,30 60,0 90,40 120,10 350,10"></Polyline>

StrokeDashArray="1 2" 是相对于直线宽度的,这里就是14 意思是14个单位的实线,28个单位的空白。

画刷

画刷填充区域,不干是元素的背景色、前景色以及边框,还是形状内部填充和笔画。

  • 画刷支持更改通知。基础自Freezable类。因此,如果改了画刷,任何使用画刷的元素都会重新绘制自身。
  • 画刷支持部分透明。为此,只需修改Opacity属性。

常用画刷


名称

说明
SolidColorBrush 使用单一的连续颜色绘制区域。
LinearGradientBrush 使用渐变填充绘制区域,渐变的阴影填充从一种颜色变化到另一种颜色(并且,也可以在变化到第3种颜色之后变化到第4种。)
RadialGradientBrush 使用径向渐变填充绘制区域,除了在圆形模式中从中心点向外部辐射渐变之外,这种画刷和渐变画刷类似。
ImageBrush 使用可被拉伸、缩放或平铺的图像绘制区域。
DrawingBrush 使用Drawing对象绘制区域,改对象可包含已经定义的形状或位图。
VisualBrush
使用Visual对象绘制区域。因为WPF的元素都继承自Visual类,所以可使用该画刷将部分用户界面复制到另一个局域。当创建特殊效果时,

改画刷特别有用。

BitmapCacheBrush 使用从Visual对象缓存的内容绘制区域。这种画刷和VisualBrush类似,但如果需要在多个地方重用图形内容或者频繁地重绘图形内容,这种画刷更高效。

LinearGradientBrush

<Rectangle Width="150" Height="100">
  <Rectangle.Fill>
  <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
   <GradientStop Color="Yellow" Offset="0.0"/>
   <GradientStop Color="Red" Offset="0.25"/>
   <GradientStop Color="Blue" Offset="0.75"/>
   <GradientStop Color="LimeGreen" Offset="1.0"/>
  </LinearGradientBrush>
  </Rectangle.Fill>
 </Rectangle>

StartPoint 0,0 代表左上角,EndPonit 1,1 代表右下角 表示从左上角到右下角的方向渐变,同理如果是0,0 到0,0,1表示从上到下的垂直填充

Offset取值从0到1。表示颜色表示一种颜色渐变到另一种颜色的速度。

RadialGradientBrush

<Ellipse Margin="5" Stroke="Black" StrokeThickness="1" Width="200" Height="200">
  <Ellipse.Fill>
  <RadialGradientBrush RadiusX="1" RadiusY="1" GradientOrigin="0.7,0.3">
   <GradientStop Color="White" Offset="0"/>
   <GradientStop Color="Blue" Offset="1"/>
  </RadialGradientBrush>
  </Ellipse.Fill>
 </Ellipse>

GradientOrigin指定第一种颜色渐变的开始点,默然是(0.5,0.5)改点表示填充区域的中心。

RadiusX RadiusY决定了圆的尺寸,默认值为0.5.

变换

变换是通过不加通告地切换图形或元素使用的坐标系统来改变形状或元素的绘制方式的对象。变换主要类


名称

说明

重要属性
TranslateTranform 将坐标系统移动一定的距离。如果希望在不同的地方绘制相同的形状,改变换非常有用 X、Y
RotateTranform 旋转坐标系统。正常绘制的形状绕着旋转的中心点旋转。 Angle、CenterX、CenterY
ScaleTranform 放大或缩小坐标系统,从而绘制更大或更小的图形。可在X和Y方向应用不同的缩放度,从而拉伸或缩放形状
ScaleX、ScaleY

CenterX、CenterY

SkewTranform 通过倾斜一定的角度扭曲坐标系统。例如绘制正方形,通过该变换正方形变成平行四边形。 AngleX、AngelY、CenterX、CenterY
MatrixTranform 使用提供的矩阵的乘积修改坐标系统。这是最复杂的选择。 Matrix
TransformGroup 组合多个变换,从而可以一次应用所有这些变换。应用变换的顺序是很重要的,因为这会影响最终的结果。例如,首先使用RotateTranform选择图形,然后使用TranslateTranform移动图形,这样做的结果和先移动再旋转的结果是不同的。  

应用场景

  • 倾斜形状。
  • 重复形状。
  • 动画。通过变换可创建大量精致的效果。例如,旋转形状、将图形从一个地方移动到另一个地方。
<Canvas>
 <Rectangle Width="80" Height="10" Stroke="Blue" Fill="Yellow" Canvas.Left="100" Canvas.Top="100" RenderTransformOrigin="0.5,0.5">
  <Rectangle.RenderTransform>
  <RotateTransform Angle="25"></RotateTransform>
  </Rectangle.RenderTransform>
 </Rectangle>
 </Canvas>

通过RenderTransform制定图形的变换方式,RenderTransformOrigin="0.5,0.5",以图形的中心点旋转,以左上角为准旋转。这两个属性不限制于形状,WPF的所有元素都可以用这两个属性。

<Button Canvas.Left="100" Canvas.Top="100" Width="101" Height="30" Content="testTransform">
  <Button.RenderTransform>
  <RotateTransform Angle="25"></RotateTransform>
  </Button.RenderTransform>
  <Button.Background>
  <SolidColorBrush Color="#FF7DBFFC"></SolidColorBrush>
  </Button.Background>
 </Button>

透明

WPF实现元素透明的方式

  • 设置元素的Opacity属性。每个元素(包括形状)都从UIElement基类继承了Opacity属性。不透明度是0到1之间的小数,1表示完全不透明(默认值),0表示完全透明。当使用这种方式设置不透明度时,设置会被整应用于整个元素的可见内容。
  • 设置画刷的Opacity属性。每个画刷也从Brush基类继承了Opacity属性。可使用0到1之间的值设置该属性,以控制使用画刷绘制的内容的透明度,不管是固定颜色画刷、渐变画刷,还是某种类型的纹理或图像画刷。因为可为形状的Stroke和Fill属性使用不同的画刷,所以可为边框和表面的不同区域设置不同的透明度。
  • 使用具有透明Alpha值的颜色。所有alpha值小于255的颜色都是半透明的。例如可在SolidColorBrush画刷中使用半透明颜色,并使用该画刷绘制元素的前景内容和背景表面。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对我们的支持。

(0)

相关推荐

  • 自定义WPF窗体形状的实战记录

    介绍 你好WPF爱好者. 随着WPF等统一API语言的发明,丰富用户界面变得非常容易. 创建丰富的用户界面只是一个想法. 您需要拥有的是创造性思维和最新技术融合. WPF和Expression Blend在制作丰富的UI应用程序,清晰的图形和非常好的动画方面非常有用. 在创建WPF应用的时候,你第一个看到的就是窗体类.它作为窗体的基础,提供标准的边框.工具条.最大化.最小化和关闭按钮.WPF窗体是XAML文件和后台代码文件的混合体. 背景 我将要发布的是将窗口矩形形状塑造成图像的形状. 它可以是

  • WPF基础教程之形状画刷与变换详解

    形状 在WPF中形状继承自FrameworkElement类.因此,形状是元素,有如下好处. 形状绘制自身.不需要管理无效的情况和绘图过程.例如,移动内容,改变窗口尺寸或改变属性时,不需要手动重新绘制图形. 使用与其他元素相同的方式组织形状.在可任何布局容器中放置图形.(canvas明细是最有用的容器,因为他允许在特性的坐标位置放置形状,当构建复杂的具有多个部分的图画时,很重要.) 图形支持与其他元素相同的事件.如焦点.键盘.鼠标事件. Shape类子类 矩形和椭圆 需要设置Height和Wid

  • C语言函数基础教程分类自定义参数及调用示例详解

    目录 1.  函数是什么? 2.  C语言中函数的分类 2.1 库函数 2.1.1 为什么要有库函数 2.1.2 什么是库函数 2.1.3 主函数只能是main()吗 2.1.4常见的库函数 2.2 自定义函数 2.2.1自定义函数是什么 2.2.2为什么要有自定义函数 2.2.3函数的组成 2.2.4 举例展示 3. 函数的参数 3.1 实际参数(实参) 3.2  形式参数(形参) 4. 函数的调用 4.1 传值调用 4.2  传址调用 4.3 练习 4.3.1. 写一个函数判断一年是不是闰年

  • Go基础教程系列之回调函数和闭包详解

    Go回调函数和闭包 当函数具备以下两种特性的时候,就可以称之为高阶函数(high order functions): 函数可以作为另一个函数的参数(典型用法是回调函数) 函数可以返回另一个函数,即让另一个函数作为这个函数的返回值(典型用法是闭包) 一般来说,附带的还具备一个特性:函数可以作为一个值赋值给变量. f := func(){...} f() 由于Go中函数不能嵌套命名函数,所以函数返回函数的时候,只能返回匿名函数. 先简单介绍下高阶函数,然后介绍闭包. 高阶函数示例 例如,将函数作为另

  • pygame画点线方法详解

    目录 一.复习 二.画单个像素 三.连接多个点 1.连接程序生成的点 2.连接外部给定的点 四.逐点绘制 一.复习 首先将上次画的矩形做复杂一些的小程序: import pygame,sys, random pygame.init() screen = pygame.display.set_mode([640, 480]) screen.fill([255, 255, 255]) for i in range(100): width = random.randint(0, 250) height

  • C++入门教程之内联函数与extern "C"详解

    目录 一.   内联函数 1.概念及分析 2.特性 3.宏 二.   extern “C” 1.C++程序 2.C程序 总结 一.   内联函数 1.概念及分析 以inline修饰的函数叫做内联函数,编译时C++编译器会在调用内联函数的地方展开,没有函数调用建立栈帧的开销,内联函数提升程序运行的效率. int Add(int a, int b) { int c = a + b; return c; } int main() { int ret= Add(1, 2); return 0; } 在我

  • IOS 开发中画扇形图实例详解

    IOS 开发中画扇形图实例详解 昨天在做项目中,遇到一个需要显示扇形图的功能,网上搜了一下,发现code4app里面也没有找到我想要的那种类似的效果,没办法了,只能自己学习一下如何画了. 首先我们需要了解一个uiview的方法 -(void)drawRect:(CGRect)rect 我们知道了这个方法,就可以在自定义UIView的子类的- (void)drawRect:(CGRect)rect里面绘图了,关于drawrect的调用周期,网上也是一找一大堆,等下我会整理一下,转载一篇供你们参考.

  • js es6系列教程 - 新的类语法实战选项卡(详解)

    其实es6的面向对象很多原理和机制还是ES5的,只不过把语法改成类似php和java老牌后端语言中的面向对象语法. 一.用es6封装一个基本的类 class Person{ constructor( uName ){ this.userName = uName; } sayName(){ return this.userName; } } 是不是很向php和java中的类, 其实本质还是原型链,我们往下看就知道了 首先说下语法规则: class Person中的Person就是类名,可以自定义

  • IOS 基础之nil,NULL,NSNULL区别详解

    IOS 基础之nil,NULL,NSNULL区别详解 ① nil:一般赋值给空对象. ② NULL:NULL 是一个通用指针(泛型指针). 一般赋值给 nil 之外的其他空值.如SEL等. ③ NSNULL:[NSNull null] 是一个对象,他用在不能使用 nil 的场合. 因为在 NSArray 和 NSDictionary 中 nil 有特殊的含义(表示列表结束),所以不能在集合中放入 nil 值.如要确实需要存储一个表示"什么都没有"的值,可以使用 NSNull 类.NSN

  • python在地图上画比例的实例详解

    现在用python画图已经难不倒一直跟小编学习的小伙伴们了,甚至有的小伙伴画图比小编还要厉害.为此小编还偷偷下了一番功夫,画图这种事情,细节上的完善肯定能让图片更加好看.所以小编知道大家会画地图,但是不一定会画地图上的比例尺.毕竟看地图怎么能没有比例尺呢?不会的小伙伴接下来就一起看看吧. 画比例尺的函数为drawmapscale.下图给出了两种比例尺示例. from mpl_toolkits.basemap import Basemap import matplotlib.pyplot as p

  • Android入门教程之组件Activity的生命周期详解

    目录 返回栈 Activity 状态 1. 运行状态 2. 暂停状态 3. 停止状态 4. 销毁状态 Activity 的生存期 onCreate() onStart() onResume() onPause() onStop() onDestroy() onRestart() 完整生存期 可见生存期 前台生存期 Activity 回收处理 返回栈 Android 中的 Activity 是可以层叠的,我们每启动一个新的 Activity,就会覆盖在原有的 Activity 之上,然后点击 Ba

随机推荐