背水一战 Windows 10 (12) - 绘图: Shape, Path
作者:webabcd
介绍
背水一战 Windows 10 之 绘图
- 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 - 图形
注:对于封闭图形的 stroke 来说,其是绘制在控件内部的
--> <!--
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 - 一条或多条二次贝塞尔曲线
-->
<!--
ArcSegment
Size - 弧的 X 轴和 Y 轴半径
Point - 该 Segment 的终点坐标,即下一个 Segment 的起点坐标
SweepDirection - 绘制方向(Clockwise - 顺时针绘制;Counterclockwise - 逆时针绘制)
RotationAngle - 椭圆围绕 x 轴旋转的角度(这个需要自己写几个示例去理解)
IsLargeArc - 绘制的弧大于 180 度则为 true,反之则为 false(只读)
-->
<ArcSegment Size="100,25" Point="400,50" />
<!--
LineSegment
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>
OK
[源码下载]
背水一战 Windows 10 (12) - 绘图: Shape, Path的更多相关文章
- 背水一战 Windows 10 (13) - 绘图: Stroke, Brush
[源码下载] 背水一战 Windows 10 (13) - 绘图: Stroke, Brush 作者:webabcd 介绍背水一战 Windows 10 之 绘图 Stroke - 笔划 Brush ...
- 重新想象 Windows 8 Store Apps (18) - 绘图: Shape, Path, Stroke, Brush
原文:重新想象 Windows 8 Store Apps (18) - 绘图: Shape, Path, Stroke, Brush [源码下载] 重新想象 Windows 8 Store Apps ...
- 背水一战 Windows 10 (21) - 绑定: x:Bind 绑定, x:Bind 绑定之 x:Phase, 使用绑定过程中的一些技巧
[源码下载] 背水一战 Windows 10 (21) - 绑定: x:Bind 绑定, x:Bind 绑定之 x:Phase, 使用绑定过程中的一些技巧 作者:webabcd 介绍背水一战 Wind ...
- 背水一战 Windows 10 (29) - 控件(文本类): RichTextBlock, RichTextBlockOverflow, RichEditBox
[源码下载] 背水一战 Windows 10 (29) - 控件(文本类): RichTextBlock, RichTextBlockOverflow, RichEditBox 作者:webabcd ...
- 背水一战 Windows 10 (26) - XAML: x:DeferLoadStrategy, x:Null
[源码下载] 背水一战 Windows 10 (26) - XAML: x:DeferLoadStrategy, x:Null 作者:webabcd 介绍背水一战 Windows 10 之 XAML ...
- 背水一战 Windows 10 (20) - 绑定: DataContextChanged, UpdateSourceTrigger, 对绑定的数据做自定义转换
[源码下载] 背水一战 Windows 10 (20) - 绑定: DataContextChanged, UpdateSourceTrigger, 对绑定的数据做自定义转换 作者:webabcd 介 ...
- 背水一战 Windows 10 (19) - 绑定: TemplateBinding 绑定, 与 RelativeSource 绑定, 与 StaticResource 绑定
[源码下载] 背水一战 Windows 10 (19) - 绑定: TemplateBinding 绑定, 与 RelativeSource 绑定, 与 StaticResource 绑定 作者:we ...
- 背水一战 Windows 10 (18) - 绑定: 与 Element 绑定, 与 Indexer 绑定, TargetNullValue, FallbackValue
[源码下载] 背水一战 Windows 10 (18) - 绑定: 与 Element 绑定, 与 Indexer 绑定, TargetNullValue, FallbackValue 作者:weba ...
- 背水一战 Windows 10 (17) - 动画: ThemeTransition(过渡效果)
[源码下载] 背水一战 Windows 10 (17) - 动画: ThemeTransition(过渡效果) 作者:webabcd 介绍背水一战 Windows 10 之 动画 ThemeTrans ...
随机推荐
- 使用GDB调试Go语言
用Go语言已经有一段时间了,总结一下如何用GDB来调试它! ps:网上有很多文章都有描述,但是都不是很全面,这里将那些方法汇总一下 GDB简介 GDB是GNU开源组织发布的⼀一个强⼤大的UNIX下的 ...
- android内部培训视频_第一节
声明:本视频为公司内部做android培训时录制的,无任何商业目的.同时鉴于水平有限,可能不符合您的需求,放在这里的目的是提供给公司同事下载,作为培训的一个记录,也作为一个系列教程的自我督促完成的理由 ...
- SQL Azure (14) 将云端SQL Azure中的数据库备份到本地SQL Server
<Windows Azure Platform 系列文章目录> 注意: 1.只有SQL Server 2012 CU4及以上版本才支持本章内容 2.当你的数据库文件很大时,建议优化以下内容 ...
- 如何在 ASP.NET MVC 中集成 AngularJS(2)
在如何在 ASP.NET MVC 中集成 AngularJS(1)中,我们介绍了 ASP.NET MVC 捆绑和压缩.应用程序版本自动刷新和工程构建等内容. 下面介绍如何在 ASP.NET MVC 中 ...
- C# Azure 存储-队列
1.前言 本篇文章是根据Azure的官网document总结,如果想直接跳过本文章,可以点击下面的链接进入. https://www.azure.cn/zh-cn/documentation/arti ...
- java.io.IOException: invalid header field
通过本文, 我们明白了什么是 jar的清单文件 MANIFEST.MF, 简单示例: E:\ws\Test\WEB-INF\classes>jar cvfm testCL.jar ListTes ...
- iOS开发——高级技术&本地化与国际化详解
本地化与国际化详解 效果如下: 英语: 中文: 具体实现如下: ...
- hudson部署过程
hudson部署过程: java安装 http://developer.51cto.com/art/201504/470683.htm tomcat安装 http://blog.csdn.net/hu ...
- 【求助】WPF 在XP下 有的Textbox光标会消失
最近做个项目,一直有一个问题没有解决,就是在XP下,有的Textbox里在文本框里没有东西的时候,会没有光标.不同的XP机器,失去光标的Textbox也不一样. 各位大师看下面的三张图,当Textbo ...
- css中的expression
最近对CSS中的行为比较感兴趣,虽然是不符合标准的也只有ie才能识别,但是他确实给css的功能扩展了不少.下面是摘自互联网上的文字和例子,因为都被转烂了,没法注明出处. IE5及其以后版本支持在CSS ...