Shape - 图形

  • Path - 路径

示例
1、演示“Shape”相关知识点
Drawing/Shape.xaml

<Page
x:Class="Windows10.Drawing.Shape"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Windows10.Drawing"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"> <Grid Background="Transparent">
<StackPanel Margin="10 0 10 10"> <!--
Windows.UI.Xaml.Shapes.Shape - 图形
--> <!--
Line - 画直线
-->
<!--
X1, Y1 - 直线起点坐标
X2, Y2 - 直线终点坐标
-->
<Line X1="0" Y1="0" X2="300" Y2="100" Stroke="Blue" StrokeThickness="3" /> <!--
Rectangle - 画矩形
-->
<!--
Width - 矩形宽
Height - 矩形高
-->
<Rectangle Width="200" Height="50" Fill="Red" Stroke="Yellow" StrokeThickness="3" /> <!--
Polyline - 画折线(即多条连接起来的直线)
-->
<!--
Points - 折线的每个点的坐标
-->
<Polyline Points="10,100 50,10 100,100" Stroke="Green" StrokeThickness="3" /> <!--
Polygon - 画多边形
-->
<!--
Points - 多边形的每个点的坐标
-->
<Polygon Points="50,50 100,50 300,100 200,100 100,200" Fill="Yellow" Stroke="Red" StrokeThickness="6" /> <!--
Ellipse - 画椭圆
-->
<!--
Width - 椭圆宽
Height - 椭圆高
-->
<Ellipse Width="100" Height="50" Fill="Orange" Stroke="Red" StrokeThickness="6" /> <!--
矩形或椭圆在不设置宽和高时,可以指定其 Stretch 用以指定其相对于其容器的拉伸方式
Stretch - 拉伸方式(Windows.UI.Xaml.Media.Stretch 枚举)
Fill - 充满容器,不保留长宽比
None - 不做任何处理,如果图片比容器大,则多出的部分被剪裁
Uniform - 等比缩放到容器(默认值)
UniformToFill - 充满容器,且保留长宽比,多出的部分被剪裁
-->
<Grid Width="200" Height="100" HorizontalAlignment="Left" Background="Black">
<Ellipse Fill="Orange" Stroke="Red" StrokeThickness="6" Stretch="UniformToFill" />
</Grid> </StackPanel>
</Grid>
</Page>

2、演示“Path”相关知识点
Drawing/Path.xaml

<Page
x:Class="Windows10.Drawing.Path"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Windows10.Drawing"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"> <Grid Background="Transparent">
<StackPanel Margin="10 0 10 10" HorizontalAlignment="Left"> <!--
Windows.UI.Xaml.Shapes.Path - 路径,以下演示如何通过 Path 绘制图形
Data - 要绘制的 Windows.UI.Xaml.Media.Geometry 数据(Geometry 有很多派生类,后面会一一介绍,其实都不太常用,最常用的就是直接画路径,见最后面)
--> <Path Fill="Yellow" Stroke="Blue" StrokeThickness="6" Margin="5">
<Path.Data>
<!--
EllipseGeometry - 椭圆
Center - 原点坐标
RadiusX - X轴半径
RadiusY - Y轴半径
-->
<EllipseGeometry Center="50,25" RadiusX="50" RadiusY="25" />
</Path.Data>
</Path> <Path Fill="Yellow" Stroke="Blue" StrokeThickness="6" Margin="5">
<Path.Data>
<!--
RectangleGeometry - 矩形
Rect - 左上角点的坐标,矩形宽,矩形高
-->
<RectangleGeometry Rect="100,0,100,50" />
</Path.Data>
</Path> <Path Stroke="Blue" StrokeThickness="6" Margin="5">
<Path.Data>
<!--
LineGeometry - 线
StartPoint - 起点坐标
EndPoint - 终点坐标
-->
<LineGeometry StartPoint="200,0" EndPoint="300,50" />
</Path.Data>
</Path> <Path Stroke="Blue" StrokeThickness="6" Margin="5">
<Path.Data>
<!--
PathGeometry - 路径,一个可能由弧、曲线、椭圆、直线、矩形组成的复杂图形
-->
<PathGeometry>
<PathGeometry.Figures>
<!--
StartPoint - 起点坐标
-->
<PathFigure StartPoint="300,0">
<PathFigure.Segments>
<!--
Path 的 Segment 集合
-->
<PathSegmentCollection>
<!--
LineSegment - 单一线段
PolyLineSegment - 线段集合
ArcSegment - 弧(椭圆的一部分)
BezierSegment - 两点之间的一条三次贝塞尔曲线
QuadraticBezierSegment - 两点之间的一条二次贝塞尔曲线
PolyBezierSegment - 一条或多条三次贝塞尔曲线
PolyQuadraticBezierSegment - 一条或多条二次贝塞尔曲线
-->
<!--
Size - 弧的 X 轴和 Y 轴半径
Point - 该 Segment 的终点坐标,即下一个 Segment 的起点坐标
-->
<ArcSegment Size="100,25" Point="400,50" />
<!--
Point - 该 Segment 的终点坐标,即下一个 Segment 的起点坐标
-->
<LineSegment Point="500,100" />
</PathSegmentCollection>
</PathFigure.Segments>
</PathFigure>
</PathGeometry.Figures>
</PathGeometry>
</Path.Data>
</Path> <Path Fill="Yellow" Stroke="Blue" StrokeThickness="6" Margin="5">
<Path.Data>
<!--
本例演示 GeometryGroup 的 EvenOdd 填充规则
GeometryGroup - 由一个或多个 Geometry 组成
FillRule - 填充规则(System.Windows.Media.FillRule 枚举)
EvenOdd - 确定一个点是否位于填充区域内的规则,具体方法是从该点沿任意方向画一条无限长的射线,然后计算该射线在给定形状中因交叉而形成的路径段数。如果该数为奇数,则点在内部;如果为偶数,则点在外部。
Nonzero - 确定一个点是否位于填充区域内的规则,具体方法是从该点沿任意方向画一条无限长的射线,然后检查形状段与该射线的交点。从零开始计数,每当线段从左向右穿过该射线时加 1,而每当路径段从右向左穿过该射线时减 1。计算交点的数目后,如果结果为零,则说明该点位于路径外部。否则,它位于路径内部。
-->
<GeometryGroup FillRule="EvenOdd">
<LineGeometry StartPoint="200,0" EndPoint="300,100" />
<EllipseGeometry Center="250,50" RadiusX="50" RadiusY="50" />
<RectangleGeometry Rect="200, 0, 100, 100" />
</GeometryGroup>
</Path.Data>
</Path> <Path Fill="Yellow" Stroke="Blue" StrokeThickness="6" Margin="5">
<Path.Data>
<!--
本例演示 GeometryGroup 的 Nonzero 填充规则
GeometryGroup - 由一个或多个 Geometry 组成
FillRule - 填充规则(System.Windows.Media.FillRule 枚举)
EvenOdd - 确定一个点是否位于填充区域内的规则,具体方法是从该点沿任意方向画一条无限长的射线,然后计算该射线在给定形状中因交叉而形成的路径段数。如果该数为奇数,则点在内部;如果为偶数,则点在外部。
Nonzero - 确定一个点是否位于填充区域内的规则,具体方法是从该点沿任意方向画一条无限长的射线,然后检查形状段与该射线的交点。从零开始计数,每当线段从左向右穿过该射线时加 1,而每当路径段从右向左穿过该射线时减 1。计算交点的数目后,如果结果为零,则说明该点位于路径外部。否则,它位于路径内部。
-->
<GeometryGroup FillRule="Nonzero">
<LineGeometry StartPoint="200,0" EndPoint="300,100" />
<EllipseGeometry Center="250,50" RadiusX="50" RadiusY="50" />
<RectangleGeometry Rect="200, 0, 100, 100" />
</GeometryGroup>
</Path.Data>
</Path> <!--
演示 Path 最常用的用法,即直接画
1、直接指定 Geometry 数据
2、一般都是要借助工具,最流行的是“Metro Studio”,其 4.0 以上的版本可以在设计完后显示对应的 Geometry 代码
-->
<Path Fill="Black" Stroke="White" StrokeThickness="6" Data="M 10,100 L 100,100 100,50 Z M 10,10 100,10 100,40 Z" Margin="5" /> </StackPanel>
</Grid>
</Page>

绘图: Shape, Path的更多相关文章

  1. 背水一战 Windows 10 (12) - 绘图: Shape, Path

    [源码下载] 背水一战 Windows 10 (12) - 绘图: Shape, Path 作者:webabcd 介绍背水一战 Windows 10 之 绘图 Shape - 图形 Path - 路径 ...

  2. 重新想象 Windows 8 Store Apps (18) - 绘图: Shape, Path, Stroke, Brush

    原文:重新想象 Windows 8 Store Apps (18) - 绘图: Shape, Path, Stroke, Brush [源码下载] 重新想象 Windows 8 Store Apps ...

  3. android 绘图之Path与Paint详解

    /** * Paint类介绍 * * Paint即画笔,在绘图过程中起到了极其重要的作用,画笔主要保存了颜色, * 样式等绘制信息,指定了如何绘制文本和图形,画笔对象有很多设置方法, * 大体上可以分 ...

  4. 【iOS】Quartz2D绘图路径Path

    一.绘图路径 A.简单说明 在画线的时候,方法的内部默认创建一个path.它把路径都放到了path里面去. 1.创建路径  cgmutablepathref 调用该方法相当于创建了一个路径,这个路径用 ...

  5. 【转载】Android绘图之Path总结

    Path作为Android中一种相对复杂的绘图方式,官方文档中的有些解释并不是很好理解,这里作一个相对全面一些的总结,供日后查看,也分享给大家,共同进步. 1.基本绘图方法 addArc(RectF ...

  6. 重新想象 Windows 8 Store Apps 系列文章索引

    [源码下载][重新想象 Windows 8.1 Store Apps 系列文章] 重新想象 Windows 8 Store Apps 系列文章索引 作者:webabcd 1.重新想象 Windows ...

  7. 我(webabcd)的文章索引

    [最后更新:2014.08.28] 重新想象 Windows Store Apps 系列文章 重新想象 Windows 8 Store Apps 系列文章 重新想象 Windows 8 Store A ...

  8. Windows 8 Store Apps

    重新想象 Windows 8 Store Apps 系列文章索引 Posted on 2013-11-18 08:33 webabcd 阅读(672) 评论(3) 编辑 收藏 [源码下载] 重新想象 ...

  9. C#-gdi绘图,双缓冲绘图,Paint事件的触发

    一. 画面闪烁问题与双缓冲技术 1.1 导致画面闪烁的关键原因分析: 1  绘制窗口由于大小位置状态改变进行重绘操作时 绘图窗口内容或大小每改变一次,都要调用Paint事件进行重绘操作,该操作会使画面 ...

随机推荐

  1. umeng社交分享最新版5.0的跨进程使用崩溃的问题及解法-Android

    先简单介绍下5.0版的变化.5.0最大的特色是调用简单,采用了链式语法,形如: new ShareAction(context).setPlatform(share_media) .withText( ...

  2. .Net程序员学习Linux最简单的方法

    有很多关于Linux的书籍,博客.大多数都会比较“粗暴“的将一大堆的命令塞给读者,从而使很多.NET程序员望而却步.未入其门就路过了. 所以我设想用一种更为平滑的学习方式, 就是在学习命令时,先用纯语 ...

  3. webpack.optimize.CommonsChunkPlugin插件的使用

    方式一,传入字符串参数 new webpack.optimize.CommonsChunkPlugin('common.js'), // 默认会把所有入口节点的公共代码提取出来,生成一个common. ...

  4. 浅谈python web框架中的orm设计

    看了一下廖雪峰的那个web框架,其实就是封装了web.py,请求使用异步并将aiomysql做为MySQL数据库提供了异步IO的驱动,前端部分则整合了jinja.其中最难的应该是orm部分了. 下面是 ...

  5. vuejs全局api

    全局api set 增加数组 vm.$set 实例化方法 全局api delete 删除数组 vm.$delete 实例化方法 全局 api 组件component 实例化方法 components ...

  6. Castle ActiveRecord 二级缓存使用 异常记录

    在 本公司的 IBeamMDAA 框架下,如果是配置为本机调试时,AR的查询缓存工作正常,但如果部署到服务器上,工作不正常,二级缓存配置为使用 MemoryCahcheD 服务器,二级缓存没有能够根据 ...

  7. mac下环境变量、maven3.1.1 及 jdk1.7.0.45配置

    一.设置环境变量 1.打开终端,输入 cd ~ 2.输入 touch .bash_profile (如果该文件不存在,将创建一个空文件) 3.输入 open .bash_profile (调用记事本编 ...

  8. (一)GATT Profile和GAP 简介(目前所有的BLE应用都基于GATT,所以也要了解是怎么一回事)-转发

    个人大总结:(先后顺序) 1.GAP协议定义多个角色(其中就有中心设备[GATT客户端](唯一)叫主设备||和外围设备[GATT服务端端](多个)也叫从设备). 2.先经过GAP协议,再有GATT协议 ...

  9. docker 镜像导入导出

    导出(Export) Export命令用于持久化容器(不是镜像).所以,我们就需要通过以下方法得到容器ID: sudo docker ps -a 接着执行导出: sudo docker export ...

  10. windows7下启动mysql服务出现服务名无效

    出现提示: WIN 7 cmd命令行下,net start mysql,出现 服务名无效提示: 问题原因: mysql服务没有安装. 解决办法: 在 mysql bin目录下 以管理员的权限 执行 m ...