重新想象 Windows 8 Store Apps (18) - 绘图: Shape, Path, Stroke, Brush
原文:重新想象 Windows 8 Store Apps (18) - 绘图: Shape, Path, Stroke, Brush
作者:webabcd
介绍
重新想象 Windows 8 Store Apps 之 绘图
- Shape - 图形
- Path - 路径
- Stroke - 笔划
- Brush - 画笔
示例
1、演示如何绘制图形
Drawing/Shape.xaml
<Page
x:Class="XamlDemo.Drawing.Shape"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:XamlDemo.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="120 0 0 0"> <!--
绘制图形
--> <!--画直线-->
<Line X1="0" Y1="0" X2="300" Y2="100" Stroke="Blue" StrokeThickness="3" /> <!--画矩形-->
<Rectangle Width="200" Height="50" Fill="Red" Stroke="Yellow" StrokeThickness="3" /> <!--画折线(即多条连接起来的直线)-->
<Polyline Points="10,100 50,10 100,100" Stroke="Green" StrokeThickness="3" /> <!--画多边形-->
<Polygon Points="50,50 100,50 300,100 200,100 100,200" Fill="Yellow" Stroke="Red" StrokeThickness="6" /> <!--画椭圆-->
<Ellipse Width="100" Height="50" Fill="Orange" Stroke="Red" StrokeThickness="6" /> <!--
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、演示如何绘制路径
Drawing/Path.xaml
<Page
x:Class="XamlDemo.Drawing.Path"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:XamlDemo.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="120 0 0 0" HorizontalAlignment="Left"> <!--通过 Path 绘制图形--> <!--
Path.Data - 要绘制的 Geometry
-->
<Path Fill="Yellow" Stroke="Blue" StrokeThickness="6">
<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">
<Path.Data>
<!--
RectangleGeometry - 矩形
Rect - 左上角点的坐标,矩形宽,矩形高
-->
<RectangleGeometry Rect="100,0,100,50" />
</Path.Data>
</Path> <Path Stroke="Blue" StrokeThickness="6" >
<Path.Data>
<!--
LineGeometry - 线
StartPoint - 起点坐标
EndPoint - 终点坐标
-->
<LineGeometry StartPoint="200,0" EndPoint="300,100" />
</Path.Data>
</Path> <Path Stroke="Blue" StrokeThickness="6">
<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,50" Point="400,100" />
<!--
Point - 该 Segment 的终点坐标,即下一个 Segment 的起点坐标
-->
<LineSegment Point="500,200" />
</PathSegmentCollection>
</PathFigure.Segments>
</PathFigure>
</PathGeometry.Figures>
</PathGeometry>
</Path.Data>
</Path> <Path Fill="Yellow" Stroke="Blue" StrokeThickness="6">
<Path.Data>
<!--
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> </StackPanel>
</Grid>
</Page>
3、演示 Stroke(笔划)的应用
Drawing/Stroke.xaml
<Page
x:Class="XamlDemo.Drawing.Stroke"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:XamlDemo.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="120 0 0 0"> <!--Stroke - 笔划--> <!--
StrokeDashArray - 虚线实体和虚线间隙的值的集合
以本例为例:第1条实线长度2,第1条虚线长度4,第2条实线长度6,第2条虚线长度2,第3条实线长度4,第3条虚线长度6
长度为 StrokeDashArray 乘以 StrokeThickness/2
-->
<Line X1="0" Y1="0" X2="1000" Y2="0" Stroke="Orange" StrokeThickness="20" StrokeDashArray="2 4 6" /> <!--
StrokeDashCap - 虚线两端(线帽)的类型(System.Windows.Media.PenLineCap 枚举)
PenLineCap.Flat - 无。默认值
PenLineCap.Round - 直径等于 StrokeThickness
PenLineCap.Square - 高度等于 StrokeThickness 并且 宽度等于 StrokeThickness/2
PenLineCap.Triangle - 底边长等于 StrokeThickness 的等腰直角三角形
-->
<Line X1="0" Y1="0" X2="1000" Y2="0" Margin="0 30 0 0" Stroke="Orange" StrokeThickness="20" StrokeDashArray="2" StrokeDashCap="Flat" /> <Line X1="0" Y1="0" X2="1000" Y2="0" Margin="0 30 0 0" Stroke="Orange" StrokeThickness="20" StrokeDashArray="2" StrokeDashCap="Round" /> <Line X1="0" Y1="0" X2="1000" Y2="0" Margin="0 30 0 0" Stroke="Orange" StrokeThickness="20" StrokeDashArray="2" StrokeDashCap="Square" /> <Line X1="0" Y1="0" X2="1000" Y2="0" Margin="0 30 0 0" Stroke="Orange" StrokeThickness="20" StrokeDashArray="2" StrokeDashCap="Triangle" /> <!--
StrokeStartLineCap - 虚线起始端(线帽)的类型(System.Windows.Media.PenLineCap 枚举)
StrokeEndLineCap - 虚线终结端(线帽)的类型(System.Windows.Media.PenLineCap 枚举)
-->
<Line X1="0" Y1="0" X2="1000" Y2="0" Margin="0 30 0 0" Stroke="Orange" StrokeThickness="20" StrokeDashArray="2" StrokeStartLineCap="Triangle" StrokeEndLineCap="Round" /> <!--
StrokeDashOffset - 虚线的起始点的便宜位置
以下举例:画一条以虚线间隙为起始的虚线
-->
<Line X1="0" Y1="0" X2="1000" Y2="0" Margin="0 30 0 0" Stroke="Orange" StrokeThickness="20" StrokeDashArray="2" StrokeDashOffset="10" /> <!--
StrokeLineJoin - 图形连接点处的连接类型(System.Windows.Media.PenLineJoin 枚举)
StrokeLineJoin.Bevel - 线形连接
StrokeLineJoin.Miter - 角形连接。默认值
StrokeLineJoin.Round - 弧形连接
-->
<StackPanel Margin="0 30 0 0" Orientation="Horizontal">
<Polyline Points="10,100 50,10 100,100" Stroke="Orange" StrokeThickness="20" HorizontalAlignment="Center" StrokeLineJoin="Bevel" /> <Polyline Points="10,100 50,10 100,100" Stroke="Orange" StrokeThickness="20" HorizontalAlignment="Center" StrokeLineJoin="Miter" /> <Polyline Points="10,100 50,10 100,100" Stroke="Orange" StrokeThickness="20" HorizontalAlignment="Center" StrokeLineJoin="Round" />
</StackPanel> <!--
StrokeMiterLimit - 斜接长度(蓝色线部分)与 StrokeThickness/2 的比值。默认值 10,最小值 1
-->
<Grid Margin="0 30 0 0" HorizontalAlignment="Left">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="120" />
<ColumnDefinition Width="120" />
<ColumnDefinition Width="120" />
</Grid.ColumnDefinitions> <Polyline Grid.Column="0" Points="0,100 50,10 100,100" Stroke="Orange" StrokeThickness="20" StrokeMiterLimit="1" />
<Line Grid.Column="0" X1="50" Y1="10" X2="50" Y2="0" Stroke="Blue" />
<Polyline Grid.Column="0" Points="0,100 50,10 100,100" Stroke="Red" /> <Polyline Grid.Column="1" Points="0,100 50,10 100,100" Stroke="Orange" StrokeThickness="20" StrokeMiterLimit="2.0" />
<Line Grid.Column="1" X1="50" Y1="10" X2="50" Y2="-10" Stroke="Blue" />
<Polyline Grid.Column="1" Points="0,100 50,10 100,100" Stroke="Red" />
</Grid> </StackPanel>
</Grid>
</Page>
4、演示 Brush(画笔)的应用
Drawing/Brush.xaml
<Page
x:Class="XamlDemo.Drawing.Brush"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:XamlDemo.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="120 0 0 0" HorizontalAlignment="Left"> <!--Brush - 画笔--> <!--
SolidColorBrush - 单色画笔
Color - 颜色
格式如下:
预定义的Color的名称。如:Red, Green, Blue
#RGB。如:#F00
#ARGB(A为Alpha值)。如:#FF00, #F0F0, #F00F
#RGB。如:#FF0000, #00FF00, #0000FF
#ARGB(A为Alpha值)。如:#FFFF0000, #FF00FF00, #FF0000FF
-->
<Ellipse Margin="10" Width="200" Height="100" Stroke="Yellow" StrokeThickness="3" HorizontalAlignment="Left">
<Ellipse.Fill>
<SolidColorBrush Color="#88FF0000" />
</Ellipse.Fill>
</Ellipse> <!--
ImageBrush - 图像画笔
ImageSource - 图片地址
Stretch - 拉伸方式
AlignmentX - 水平方向的对齐方式。Center(默认值), Left, Right
AlignmentY - 垂直方向的对齐方式。Center(默认值), Top, Bottom
-->
<Rectangle Width="100" Height="100" Stroke="Red" StrokeThickness="1" HorizontalAlignment="Left" Margin="0 10 0 0">
<Rectangle.Fill>
<ImageBrush ImageSource="/Assets/Logo.png" AlignmentX="Right" AlignmentY="Bottom" Stretch="Fill" />
</Rectangle.Fill>
</Rectangle> <WebView x:Name="webView" Source="http://webabcd.cnblogs.com" Width="300" Height="100" LoadCompleted="webView_LoadCompleted_1" HorizontalAlignment="Left" Margin="0 10 0 0" />
<!--
WebView - 浏览器画笔
SourceName - WebView 指向的 http 地址 注:如果需要显示 WebView 的最新结果,需要调用 WebViewBrush.Redraw() 方法
-->
<Rectangle Width="300" Height="100" Stroke="Red" HorizontalAlignment="Left" Margin="0 10 0 0">
<Rectangle.Fill>
<WebViewBrush x:Name="webViewBrush" SourceName="webView"/>
</Rectangle.Fill>
</Rectangle> <StackPanel Orientation="Horizontal" HorizontalAlignment="Left" Margin="0 10 0 0">
<Grid>
<Rectangle Width="200" Height="100" HorizontalAlignment="Left">
<Rectangle.Fill>
<!--
LinearGradientBrush - 线性渐变画笔
StartPoint - 线性渐变的起点。默认渐变方向为对角线方向,默认值为左上角0,0
EndPoint - 线性渐变的终点。默认渐变方向为对角线方向,默认值为右下角1,1
GradientStop - 渐变中,过渡点的设置
Color - 过渡点的颜色
Offset - 过渡点的位置。相对于渐变线的比值。最小值0.0(默认值),最大值1.0
ColorInterpolationMode - 插入渐变颜色的方式(System.Windows.Media.ColorInterpolationMode 枚举)
ScRgbLinearInterpolation - scRGB
SRgbLinearInterpolation - sRGB。默认值
-->
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1" ColorInterpolationMode="SRgbLinearInterpolation">
<GradientStop Color="Red" Offset="0.0" />
<GradientStop Color="Green" Offset="0.25" />
<GradientStop Color="Blue" Offset="0.75" />
<GradientStop Color="Yellow" Offset="1.0" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Line X1="0" Y1="0" X2="200" Y2="100" Stroke="Black" HorizontalAlignment="Left" />
</Grid> <Grid Margin="10 0 0 0">
<Rectangle Width="200" Height="100" HorizontalAlignment="Left">
<Rectangle.Fill>
<!--
MappingMode - 指定线性渐变的起点(StartPoint)和终点(EndPoint)相对于输出区域是相对的还是绝对的(System.Windows.Media.BrushMappingMode 枚举)
MappingMode.RelativeToBoundingBox - 相对坐标。默认值
MappingMode.Absolute - 绝对坐标
-->
<LinearGradientBrush StartPoint="0,0" EndPoint="200,100" MappingMode="Absolute">
<GradientStop Color="Red" Offset="0.0" />
<GradientStop Color="Green" Offset="0.25" />
<GradientStop Color="Blue" Offset="0.75" />
<GradientStop Color="Yellow" Offset="1.0" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Line X1="0" Y1="0" X2="200" Y2="100" Stroke="Black" HorizontalAlignment="Left" />
</Grid> <Grid Margin="10 0 0 0">
<Rectangle Width="200" Height="100" HorizontalAlignment="Left">
<Rectangle.Fill>
<!--
SpreadMethod - 线性渐变线(黑色线)之外, 输出区域之内的渐变方式(System.Windows.Media.GradientSpreadMethod枚举)
GradientSpreadMethod.Pad - 用线性渐变线末端的颜色值填充剩余空间。默认值
-->
<LinearGradientBrush StartPoint="0.4,0.5" EndPoint="0.6,0.5" SpreadMethod="Pad">
<GradientStop Color="Red" Offset="0.0" />
<GradientStop Color="Green" Offset="1.0" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Line X1="80" Y1="50" X2="120" Y2="50" Stroke="Black" HorizontalAlignment="Left" />
</Grid> <Grid Margin="10 0 0 0">
<Rectangle Width="200" Height="100" HorizontalAlignment="Left">
<Rectangle.Fill>
<!--
SpreadMethod - 线性渐变线(黑色线)之外, 输出区域之内的渐变方式(System.Windows.Media.GradientSpreadMethod枚举)
GradientSpreadMethod.Reflect - 相邻填充区域,以 相反方向 重复渐变,直至填充满整个剩余空间
-->
<LinearGradientBrush StartPoint="0.4,0.5" EndPoint="0.6,0.5" SpreadMethod="Reflect">
<GradientStop Color="Red" Offset="0.0" />
<GradientStop Color="Green" Offset="1.0" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Line X1="80" Y1="50" X2="120" Y2="50" Stroke="Black" HorizontalAlignment="Left" />
</Grid> <Grid Margin="10 0 0 0">
<Rectangle Width="200" Height="100" HorizontalAlignment="Left">
<Rectangle.Fill>
<!--
SpreadMethod - 线性渐变线(黑色线)之外, 输出区域之内的渐变方式(System.Windows.Media.GradientSpreadMethod枚举)
GradientSpreadMethod.Repeat - 相邻填充区域,以 相同方向 重复渐变,直至填充满整个剩余空间
-->
<LinearGradientBrush StartPoint="0.4,0.5" EndPoint="0.6,0.5" SpreadMethod="Repeat">
<GradientStop Color="Red" Offset="0.0" />
<GradientStop Color="Green" Offset="1.0" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Line X1="80" Y1="50" X2="120" Y2="50" Stroke="Black" HorizontalAlignment="Left" />
</Grid>
</StackPanel> </StackPanel>
</Grid>
</Page>
Drawing/Brush.xaml.cs
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Navigation; namespace XamlDemo.Drawing
{
public sealed partial class Brush : Page
{
public Brush()
{
this.InitializeComponent();
} private void webView_LoadCompleted_1(object sender, NavigationEventArgs e)
{
// WebView 加载完毕后重绘 WebViewBrush
webViewBrush.Redraw();
}
}
}
OK
[源码下载]
重新想象 Windows 8 Store Apps (18) - 绘图: Shape, Path, Stroke, Brush的更多相关文章
- 重新想象 Windows 8 Store Apps 系列文章索引
[源码下载][重新想象 Windows 8.1 Store Apps 系列文章] 重新想象 Windows 8 Store Apps 系列文章索引 作者:webabcd 1.重新想象 Windows ...
- 重新想象 Windows 8 Store Apps (41) - 打印
[源码下载] 重新想象 Windows 8 Store Apps (41) - 打印 作者:webabcd 介绍重新想象 Windows 8 Store Apps 之 打印 示例1.需要打印的文档Pr ...
- 重新想象 Windows 8 Store Apps (34) - 通知: Toast Demo, Tile Demo, Badge Demo
[源码下载] 重新想象 Windows 8 Store Apps (34) - 通知: Toast Demo, Tile Demo, Badge Demo 作者:webabcd 介绍重新想象 Wind ...
- 重新想象 Windows 8 Store Apps (35) - 通知: Toast 详解
[源码下载] 重新想象 Windows 8 Store Apps (35) - 通知: Toast 详解 作者:webabcd 介绍重新想象 Windows 8 Store Apps 之 通知 Toa ...
- 重新想象 Windows 8 Store Apps (36) - 通知: Tile 详解
[源码下载] 重新想象 Windows 8 Store Apps (36) - 通知: Tile 详解 作者:webabcd 介绍重新想象 Windows 8 Store Apps 之 通知 Tile ...
- 重新想象 Windows 8 Store Apps (37) - 契约: Settings Contract
[源码下载] 重新想象 Windows 8 Store Apps (37) - 契约: Settings Contract 作者:webabcd 介绍重新想象 Windows 8 Store Apps ...
- 重新想象 Windows 8 Store Apps (38) - 契约: Search Contract
[源码下载] 重新想象 Windows 8 Store Apps (38) - 契约: Search Contract 作者:webabcd 介绍重新想象 Windows 8 Store Apps 之 ...
- 重新想象 Windows 8 Store Apps (39) - 契约: Share Contract
[源码下载] 重新想象 Windows 8 Store Apps (39) - 契约: Share Contract 作者:webabcd 介绍重新想象 Windows 8 Store Apps 之 ...
- 重新想象 Windows 8 Store Apps (40) - 剪切板: 复制/粘贴文本, html, 图片, 文件
[源码下载] 重新想象 Windows 8 Store Apps (40) - 剪切板: 复制/粘贴文本, html, 图片, 文件 作者:webabcd 介绍重新想象 Windows 8 Store ...
随机推荐
- Web Api集成Swagger
WebApi集成Swagger 1.新建一个WebApi空项目 2.新建一个Person实体类: public class Person { public int ID { get; set; } p ...
- 基于AdaBoost的人脸检测
原地址:http://blog.csdn.net/celerychen2009/article/details/8839097 人脸检测和人脸识别都是属于典型的机器学习的方法,但是他们使用的方法却相差 ...
- 方案猿身高project联赛,艺术家,相反,养殖场!-------三笔
已经看到了程序猿在电影中都是非常厉害的人物,硬道理键盘噼里啪啦后,奇妙的事情会发生. 当我报了这个专业,開始认真的写程序,在这个领域学习的时候,却发现非常多干这一行 的都自称"码农" ...
- Swift实现OC中的单例模式
一.MySingle类 import Foundation class MySingle{ //定义单例的属性 var name:String? var age:Int? var height:Dou ...
- 10324 - Zeros and Ones
Problem N Zeros and Ones Input: standard input Output: standard output Time Limit: 2 seconds Memory ...
- 如何做程序猿SOHO它定购家庭赚外快?
做为一名程序猿.我想大多数人除了平时削尖了脑袋研究各种各样的技术之外. ArticleId=28404183" width="1" height="1" ...
- zoj3209(DLX)
题目链接:http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=16234 题意:给p张小纸片, 问能不能选出尽量少的一部分或全部数量 ...
- 京东商城招聘自动调价系统架构师 T4级别
岗位级别:T4 岗位职责: 1.负责自动调价系统的架构设计 2.负责自动调价的预测.相关性算法设计 3.核心代码编写,代码review 任职要求: 1.熟悉数据挖掘.机器学习理论和算法 2.熟悉海量数 ...
- Storm-0.9.2-incubating源代码编译打包
近期遇到一些同学询问Storm-0.9.2-incubating源代码编译打包的问题,现将编译步骤说明例如以下: 1.凝视掉project各pom文件里关于maven插件(maven-gpg-plug ...
- 云计算分布式大数据神器Spark实战高手之旅
从2012年1月份研究Spark到如今已经两年多的时间了. 在这两年多的时间里比較彻底的研究了Spark的源码并已经在2014年4月24日编写完毕了世界上第一本Spark书籍. 鉴于CSDN在大陆IT ...