JS技术

【UWP通用应用开发】编辑文本、绘制图形、3D透视效果及绘制时钟实战 - nomasp - 博客频道 - CSDN.NE(2)

字号+ 作者:H5之家 来源:H5之家 2015-12-14 18:20 我要评论( )

我们开篇先介绍一个之前用过,也是比较简单的Rectangle。简单的矩形就只用定义长和宽了,但如果要有圆角的话呢,用RadiusX和RadiusY就好。那么RadiusX和RadiusY到底是什么呢?看看下图就知道了。 === "80" RadiusY

我们开篇先介绍一个之前用过,也是比较简单的Rectangle。简单的矩形就只用定义长和宽了,但如果要有圆角的话呢,用RadiusX和RadiusY就好。那么RadiusX和RadiusY到底是什么呢?看看下图就知道了。

==="80" RadiusY="40"/>

这里写图片描述

和Rectangle类似,Border也可以创建矩形,而且后者还可以有自对象以及会自动调整大小,前者只能有固定的大小哦。

Ellipse

看到这个名字大家应该都知道是什么意思吧,如果要定义成圆的话让Height和Width属性相等即可。

那童鞋们都知道ProgressRing是由6个Ellipse组成的吗,RadioButton也是由2个同心的Ellipse组成的哦。

="200" Width="350"/> Polygon

Polygon则显得比较自由,只需要定义出各个顶点,它就会将这些点连接起来。那么我们可能会有疑问,需不需要确定图形的起始点和终点呢?答案是不用的,因为Polygon会自动将终点和起始点连接起来(它会假设图形是闭合的)。

<Polygon Fill="Green" Points="0,0,100,0,100,100,0,100 "/>

这里写图片描述

如果要在后台C#文件中来写的话呢,原本的Point则由PointCollection来定义所有点后添加到一起。

Line

Line的使用也比较简单,但有一点要注意,必须设置好Stroke和StrokeThickness的属性值,否则Line就不会显示出来。原因很简单,因为它是直线。

==="400"/>

这里写图片描述

Path

最后上台的自然是最厉害的啦,先上图。

这里写图片描述

="7" Data="M 0,0 C 100,200 50,200 40,150 H 200 V 100 "/>

前两个属性用过多次了,Data却还挺复杂的。这里有3个命令,M、C、H和V。如果按英文来记可能会容易些吧,分别是:Move、Control、Horizontal和Vertical。

那么,重头戏来了,先看图^_^

这里写图片描述

接着上代码。

=> ======> => ==> => ==> > > </Path>

这张图花了我好久时间呢,希望大家也都会画,虽然作用不大,不过花着玩玩也不错。

这里写图片描述

我在图上大概加了一些标注啦,另外RectangleGeometry的Rect属性有2个值,后者是相对于前者增加的长度哦。

最难的部分是BezierSegment,也就是贝赛斯曲线,其中StartPoint和Point3分别为起点和终点,而Point1和Point2不是路径哟,只是给曲线的一个参考偏移方向。具体大家可以上维基百科看看。

画笔与图像

画笔想必大家都不陌生,这里系统的介绍一下好了。先来介绍纯色画笔。

纯色画笔

最简单的纯色画笔就是已经定义好名字的啦,比如Red和Green这种,据说一共有256种已命名的,所以基本已经够用啦。XAML解析器会自动将这些颜色名称链接到Color结构。

还有就是传说中的十六进制颜色值,它可以定义精确的24位颜色值,其中有8位用于SolidColorBrush。如下代码所示的,alpha=”FF”,红色=”55”,绿色=”00”,蓝色=”88”。

="100" Fill="#FF550088" />

还有一种称为属性元素语法。具体用法如下,其中Opacity就是透明度咯。

==> </Rectangle> 渐变画笔

除了纯色画笔外,还有渐变画笔。小时候学PhotoShop的时候最喜欢渐变画笔了。

LinearGradientBrush会沿着一条称为渐变轴直线来进行渐变以绘制一个区域。我们还是拿Rectangle来做示例。

============> </Rectangle>

这里写图片描述

通过改变StartPoint和EndPoint的属性值可以创建各种渐变哦,比如垂直和水平方向的渐变,还可以颠倒渐变方向,甚至还可以加快渐变速度呢。

直接添加图片

除了用着两种画笔外,还可以直接将图片添加进来呢。

==>

效果如下咯,主要是有一张合适的图片啦。

这里写图片描述

既然用到了ImageBrush,那就来看看Image和ImageBrush的区别好了。前者主要用来呈现图像,后者则为其他对象绘制为一个图像。

Stretch属性

对于Image,我们可以来拉伸图像,也就是Stretch属性:

None:图像不经过拉伸。如果源图像比所留给Image的区域大,那么就会被剪切。
Uniform:按照纵横比来缩放图像。
UniformToFill:按照纵横比来填满所有区域,这意味着可能会有一部分不可见。
Fill。因为不保留纵横比而填满屏幕,所以图像部分全部可见,但会产生画面变形(失真)。
具体效果见下图(来源于网络)。

这里写图片描述

Clip属性

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • java导出Excel通用方法 - 在路上 - 博客频道 - CSDN.NET 在路上 我完全无法理解人们为什么花那么多

    java导出Excel通用方法 - 在路上 - 博客频道 - CSDN.NET 在路上 我完

    2015-12-15 08:49

  • Android有感(18):编辑框EditText - Z_Bing的博客 - 博客频道 - CSDN.NET Z_Bi

    Android有感(18):编辑框EditText - Z_Bing的博客 - 博客频道 - CSDN.

    2015-12-14 17:10

  • 全球最低功耗蓝牙单芯片(DA14580)系统架构和应用开发框架分析 - 嵌入式企鹅圈 - 博客频道 - CSDN.NET

    全球最低功耗蓝牙单芯片(DA14580)系统架构和应用开发框架分析 - 嵌

    2015-12-13 11:31

  • 5.2 calendar--通用日期的相关函数(2) - 大坡3D软件开发 - 博客频道 - CSDN.NET 大坡3D

    5.2 calendar--通用日期的相关函数(2) - 大坡3D软件开发 - 博客频

    2015-12-13 11:21

网友点评
e