Windows Phone开发(30):图形

原文:Windows Phone开发(30):图形

图形如矩形、椭圆、路径等都从Shape类派生,它们一般表示规则或不规则图形,这些图形都是简单的二维图形,我相信大家都能理解的。

例一:矩形。

请看下面的XAML代码。

        <Rectangle RadiusX="20" RadiusY="35"
                   Fill="Blue"
                   Canvas.Left="32" Canvas.Top="28"
                   Width="200" Height="156"/>

图形比较适合在Canvas中定位,所以一系列图形的示例我都会放到Canvas中,对于Canvas的布局方式,我前面的文章中已经介绍过了。
Rectangle类表示一个矩形,RadiusX表示矩形圆角在X轴上的半径,RadiusY一样道理,Fill即填充画刷。
Rectangle类还是比较好理解,毕竟它简单。

下面我们再来看一个带轮廓的,并且用渐变画刷填充的矩形。

        <Rectangle Canvas.Left="12" Canvas.Top="210"
                   Stroke="Green"
                   Height="112" Width="223"
                   StrokeThickness="8.5">
            <Rectangle.Fill>
                <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                    <GradientStop Color="#FF408764" Offset="0"/>
                    <GradientStop Color="Gold" Offset="0.65"/>
                    <GradientStop Color="#FFC697E0" Offset="1"/>
                </LinearGradientBrush>
            </Rectangle.Fill>
        </Rectangle>

Stroke是轮廓的画刷,StrokeThickness是轮廓的大小,这些属性是从Shape类派生的,因此通用于所有子类。

例二:椭圆。

Ellipse表示椭圆,同样包括正圆这一特例(高度和宽度相等),这个类的使用也是非常简单,它的所有属性都是从共同基类Shape继承而来的。
请看下面的例子。

        <Ellipse Canvas.Left="25" Canvas.Top="370"
                 Width="145" Height="135"
                 Stroke="Blue"
                 StrokeThickness="3.8"
                 Fill="Silver"/>

下图显示以上例子的运行效果。

 

 

 

例三:用Line绘制线段。

严格上讲,应该叫线段,因为直线是没有端点,无限延展的,而Line是有两个端点的,即开始点和结果点。
Line的使用也是很简单的,就是两个点(4个坐标),请看实例。

    <Grid>
        <Line X1="60" Y1="35"
              X2="480" Y2="450"
              Stroke="Yellow"
              StrokeThickness="9.2"/>
    </Grid>

Line放在Grid中效果比较明显,因为Canvas中要设置Left,Top等属性,这样会干扰X1,Y1,X2,Y2的设置。
运行效果如下图所示。

例四:Polygon和Polyline

我们看到,这两个家伙长得很像,应该是亲兄弟。
它们具有相同的属性。

Points:就是构成该图形的所有点的集合。

这两个家伙可能你觉得有些头晕,文档的解释可能你看不懂,但是,看不懂不等于不能用,没关系,我们先来比较一下这两兄弟有啥不同。

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <TextBlock Grid.Column="0" Grid.Row="1" Text="Polygon" HorizontalAlignment="Center" Margin="0,20" FontSize="35"/>
        <TextBlock Grid.Column="1" Grid.Row="1" Text="Polyline" HorizontalAlignment="Center" Margin="0,20" FontSize="35"/>
        <Polygon Grid.Column="0" Grid.Row="0"
                 Margin="50"
                 Stroke="Yellow"
                 StrokeThickness="6.8"
                 Stretch="Fill">
            <Polygon.Points>
                <Point X="2" Y="6"/>
                <Point X="65" Y="37"/>
                <Point X="160" Y="120"/>
                <Point X="22" Y="390"/>
            </Polygon.Points>
        </Polygon>
        <Polyline Grid.Column="1" Grid.Row="0"
                  Margin="50"
                  Stroke="Yellow"
                  StrokeThickness="6.8"
                  Stretch="Fill">
            <Polyline.Points>
                <Point X="2" Y="6"/>
                <Point X="65" Y="37"/>
                <Point X="160" Y="120"/>
                <Point X="22" Y="390"/>
            </Polyline.Points>
        </Polyline>
    </Grid>

看到了吧,一个是闭合的,一个是不闭合的,如果看不清楚,自己动手,丰衣足食。

 

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

意见,博 客编辑器经常死掉,点发布没响应,望 CSDN早点修复漏洞。

时间: 2024-12-31 02:19:47

Windows Phone开发(30):图形的相关文章

Windows Phone开发(34):路径标记语法

原文:Windows Phone开发(34):路径标记语法 如果你觉得前面所讨论的绘制各种几何图形的方法过于复杂,那么,今天我们也来一次"减负"吧.当然,我们是很轻松的,本教程是不用考试的,也不会班级排名,仅仅为读者朋友们提供一种思路罢了. 本节我们聊一下路径标记法,有了这个东东,你会觉得绘制路径会轻松了不少,事不宜迟,路径标记法到底有多方便,先看一个实例再说吧. <Path VerticalAlignment="Stretch" HorizontalAlig

Windows 10开发基础——文件、文件夹和库(一)

原文:Windows 10开发基础--文件.文件夹和库(一) 主要内容:      1.枚举查询文件和文件夹      2.文本文件读写的三种方法--创建写入和读取文件      3.获得文件的属性   枚举查询文件和文件夹 先了解一下文件查询的几个方法: StorageFolder.GetFilesAsync: 获取当前文件夹中的所有文件,返回一个 IReadOnlyList<StorageFile>集合          IReadOnlyList<StorageFile> f

Windows Phone开发(29):隔离存储C

原文:Windows Phone开发(29):隔离存储C 本文是隔离存储的第三节,大家先喝杯咖啡放松,今天的内容也是非常简单,我们就聊一件东东--用户设置. 当然了,可能翻译为应用程序设置合适一些,不过没关系,只要大家明白,它就是用于保存我们的应用程序的设置信息就行了. 它属于字典集合,每一项保存的数据都以键-值对的形式存储,键值是字符串类型,不能为null,注意啊,不然会引发异常,当然,估计也没有人这么无聊,把空值保存. 使用方法很简单,通过IsolatedStorageSettings的Ap

HTML 5 2D 游戏开发:图形和动画

图形和动画是任何视频游戏最根本的方面,所以在本文中,我将从 Canvas2D API 的简要介绍开始,对 Snail Bait 的中央动画的实现进行讨论.在本文中,您将学习如何: 将图像和图形基元绘制到画布上 创建流畅的.无闪烁的动画 实现游戏循环 以帧数每秒为单位监视动画的速度 滚动游戏的背景 使用视差来模拟三维效果 实现基于时间的运动 本文中所讨论的代码的最终结果如图 1 所示: 图 1. 滚动背景并监视帧速率 开发:图形和动画-html5 2d游戏引擎"> 背景和平台水平 滚动.这些

Kinect for Windows SDK开发入门(十四)进阶指引 上

前面十三篇文章介绍了Kinect SDK开发中的各个方面的最基础的知识.正如本系列博闻标题那样,这些知识只是Kinect for windows SDK开发的入门知识.本文将会介绍Kinect进阶开发需要了解一些知识(beyond the basic). 读者可能会注意到,在学习了前面十三篇文章中关于Kinect开发的方方面面,如影像数据流.景深摄像机.骨骼追踪.麦克风阵列.语音识别等这些知识后,离开发出一些我们在网上看到的那些具有良好用户体验的Kinect应用程序还是显得捉襟见肘.Kinect

Windows Phone开发(19):三维透视效果

原文:Windows Phone开发(19):三维透视效果 三维效果也可以叫透视效果,所以,我干脆叫三维透视效果.理论知识少讲,直接用例开场吧,因为这个三维效果其实很简单,比上一节中的变换更省事,不信?一起来做一做练习吧. 练习一:把对象沿Y轴旋转45度. 默认情况下,旋转中心都是在中心位置上,如Y轴中心.而至于旋转的角度,哪个方向是正值,哪个方向是负值,嘿,你自己动手试一下就知道了,我相信你能理解的,不然,Hello Kitty嘲笑你的. 好的,由于是第一个练习,我们先来说说X.Y.Z三个坐标

Windows App开发之文件与数据

读取文件和文件夹名 这一节开始我们将陆续看到Windows App是怎样操作文件的. 在Windows上读取文件名.文件夹名 首先我们在XAML中定义一个Button和TextBlock,将读取文件/文件夹名的过程写在前者的click事件中,后者则用来显示文件信息. <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> <StackPanel Orientation="

【万里征程——Windows App开发】SemanticZoom视图切换

相信用过Windows Phone或者Windows 8/8.1/10的朋友对下面这张截图肯定不陌生.这就是通过SemanticZoom来实现的,当数据过多时,这种控件尤其适用.它有一个放大视图ZoomedInView和一个缩小试图ZoomedOutView,前者主要用来显示当前页面的详细信息,后者则致力于快速导航. 那么我就自己来动手实践咯,首先我们在XAML中添加大致的界面,就像画画要先画轮廓一样. <Grid Name="grid1" Background="{T

【万里征程——Windows App开发】应用栏

基本的用法我们在 [万里征程--Windows App开发]页面布局和基本导航中已经讲过了,这里继续补充关于应用栏的更多用法. Icon 在之前的学习中,我们知道Icon属性中有很多很多系统预定义,但也许这些还是不够的,现在就来增加几种用法咯. 字符集应用 <AppBarToggleButton Label="Sigma" Click="AppBarButton_Click"> <AppBarToggleButton.Icon> <Fo