WPF and Silverlight 学习笔记（二十七）：基本图形的使用（2）Path和位图操作

最新推荐文章于 2024-10-30 16:31:19 发布
最新推荐文章于 2024-10-30 16:31:19 发布
阅读量506 收藏
点赞数
分类专栏： windows phone 7 文章标签： 图形 path silverlight wpf image tiff

在上一篇文章中主要讨论的是除Path之外的基本图形，本文主要讨论使用Path创建更加复杂的图形以及位图的处理。

一、使用Path构建复杂图形

Path所构建的图形由Data属性来定义，其属性的类型为Geometry(几何类)，几何类类型的继承关系请参考我上一篇文章。例如要创建一个100*30的矩形，可以有两种做法：

   1: <StackPanel>
   2:     <!--使用Rectangle直接创建矩形图形-->
   3:     <Rectangle Fill="Red" Width="100" Height="30" HorizontalAlignment="Left" />
   4:     <!--使用Path创建矩形图形-->
   5:     <Path Fill="Blue">
   6:         <Path.Data>
   7:             <RectangleGeometry Rect="0,0,100,30" />
   8:         </Path.Data>
   9:     </Path>
  10: </StackPanel>

从上面的代码来看，如果创建单一的图形，使用相应的图形类更简单，但是通过Path可以构建更加复杂的图形，例如想创建一个圆环，一种做法是使用两个圆形构建，另一种做法就是例如Path，可以直接绘制出圆环：

   1: <Grid>
   2:     <Grid.RowDefinitions>
   3:         <RowDefinition />
   4:         <RowDefinition />
   5:     </Grid.RowDefinitions>
   6:     <!--使用两个圆形叠加出圆环，但要受到其所有容器的限制-->
   7:     <Canvas Grid.Row="0">
   8:         <Ellipse Fill="Red" Canvas.Left="10" Canvas.Top="10"
   9:                  Width="100" Height="100" />
  10:         <Ellipse Fill="White" Canvas.Left="35" Canvas.Top="35"
  11:                  Width="50" Height="50" />
  12:     </Canvas>
  13:     <!--直接使用Path构建圆环-->
  14:     <Canvas Grid.Row="1">
  15:         <Path Fill="Red">
  16:             <Path.Data>
  17:                 <GeometryGroup>
  18:                     <!--Center为圆心的坐标，RadiusX、RadiusY分别为X、Y两轴的半径-->
  19:                     <EllipseGeometry RadiusX="50" RadiusY="50"
  20:                                      Center="60,60" />
  21:                     <EllipseGeometry RadiusX="25" RadiusY="25"
  22:                                      Center="60,60" />
  23:                 </GeometryGroup>
  24:             </Path.Data>
  25:         </Path>
  26:     </Canvas>
  27: </Grid>

27-1

另外，由于第一种做法是一种“虚假”的圆环，所以，当给两个圆环所在的Canvas添加背景时，第一种做法的圆环不能出现“镂空”的效果，例如为两个Canvas添加如下的背景图片：

   1: <Canvas.Background>
   2:     <ImageBrush ImageSource="Images/Logo.png" Stretch="Uniform" />
   3: </Canvas.Background>

效果为：

27-2

此外Path还可以构建很多更复杂的图形，在这里就不一一列举了，请感兴趣的朋友自行尝试。

二、位图操作

WPF支持以下格式的位图：BMP、JPEG、PNG、TIFF、Windows Media Photo、GIF和ICO。在System.Windows.Media.Imaging命名空间定义了一系列处理图像文件的类型，其中最常使用的是Image类处理位图。

使用Image类型的Source属性加载图片，Source属性的类型是ImageSource类型。ImageSource有两个子类DrawingImage和BitmapSource，分别用来处理不依赖分辨率的图画对象和依赖分辨率的图画对象（位图）。其继承关系如下图所示：

27-3

1、使用BitmapImage加载图片

BitmapImage类型是Image类型Source属性默认的类型，它用来加载已存在的图片，这个图片可以是存放在网络上的，也可以是本地或项目资源中的图片，例如：

   1: <StackPanel Orientation="Horizontal">
   2:     <!--使用绝对URL定位网络上的图片-->
   3:     <Image Source="http://images.cnblogs.com/logo.gif" 
   4:        Margin="10"/>
   5:     <!--使用绝对URL定位本地计算机上的图片-->
   6:     <Image Source="D:\Pictures\mct.gif" 
   7:        Margin="10"/>
   8:     <!--使用相对URL定位到项目中的资源图片-->
   9:     <Image Source="Images/Logo.png"
  10:            Margin="10"/>
  11: </StackPanel>

27-4

2、使用RenderTargetBitmap创建图片

使用RenderTargetBitmap可以自定义任意一个Visual类型的子类，将其作为图片的内容，创建一个ImageSource，供界面显示，例如创建一个红色的五角星：

XAML代码如下：

   1: <Window x:Class="WPF_27.Window4"
   2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   4:     Title="Window4" Height="250" Width="250">
   5:     <Canvas Background="Yellow" Width="200" Height="200">
   6:         <Image x:Name="img" Stretch="None"/>
   7:     </Canvas>
   8: </Window>

在后台的代码中：

   1: private void DrawImage()
   2: {
   3:     // 创建一个RenderTargetBitmap对象
   4:     RenderTargetBitmap bmp = new RenderTargetBitmap(
   5:         200, 200,       // 设置图片的大小（单位为像素）
   6:         96, 96,         // 设置图片的水平及竖直分辨率
   7:                         //（注间此处应与系统定义的DPI相同，否则会出现图形异常）
   8:         PixelFormats.Pbgra32);  // 图片的格式
   9:  
  10:     // 定义五角星的五个顶点
  11:     Point p1 = new Point(
  12:         100 + 100 * Math.Sin(0),
  13:         100 - 100 * Math.Cos(0));
  14:     Point p2 = new Point(
  15:         100 + 100 * Math.Sin(2 * Math.PI / 5),
  16:         100 - 100 * Math.Cos(2 * Math.PI / 5));
  17:     Point p3 = new Point(
  18:         100 + 100 * Math.Sin(2 * Math.PI * 2 / 5),
  19:         100 - 100 * Math.Cos(2 * Math.PI * 2 / 5));
  20:     Point p4 = new Point(
  21:         100 + 100 * Math.Sin(2 * Math.PI * 3 / 5),
  22:         100 - 100 * Math.Cos(2 * Math.PI * 3 / 5));
  23:     Point p5 = new Point(
  24:         100 + 100 * Math.Sin(2 * Math.PI * 4 / 5),
  25:         100 - 100 * Math.Cos(2 * Math.PI * 4 / 5));
  26:  
  27:     
  28:     // 定义红色的五角星
  29:     Polygon p = new Polygon();
  30:     p.Fill = new SolidColorBrush(Colors.Red);
  31:     p.FillRule = FillRule.Nonzero;
  32:  
  33:     p.Points.Add(p1);
  34:     p.Points.Add(p3);
  35:     p.Points.Add(p5);
  36:     p.Points.Add(p2);
  37:     p.Points.Add(p4);
  38:  
  39:     // 定义圆
  40:     Ellipse e = new Ellipse();
  41:     e.Stroke = new SolidColorBrush(Colors.Red);
  42:     e.Width = 200;
  43:     e.Height = 200;
  44:  
  45:     Canvas.SetLeft(p,0);
  46:     Canvas.SetTop(p,0);
  47:     Canvas.SetLeft(e,0);
  48:     Canvas.SetTop(e,0);
  49:  
  50:     // 定义承载两个图形的Canvas对象
  51:     Canvas c = new Canvas();
  52:     c.Background = new SolidColorBrush(Colors.Yellow);
  53:     c.Children.Add(e);
  54:     c.Children.Add(p);
  55:  
  56:     // 处理其显示的大小及位置
  57:     c.Measure(new Size(200, 200));
  58:     c.Arrange(new Rect(0, 0, 200, 200));
  59:  
  60:     // 生成图片并显示
  61:     bmp.Render(c);
  62:     img.Source = bmp;
  63: }

执行之后的效果如下图所示：

27-5

在此处要注意显示器的像素和分辨率的关系，有关两者间的关系，园子中有一篇文章写的比较清楚，大家可以参考：

http://www.cnblogs.com/helloj2ee/archive/2009/04/21/1440709.html

3、为图片添加水印

例如，对上节第二张图片加水印，可以使用如下代码：

   1: private void ShowPicture()
   2: {
   3:     BitmapImage source = new BitmapImage();
   4:     source.BeginInit();
   5:     // 获取网络上的一张图片
   6:     source.UriSource =
   7:         new Uri(
   8:             "http://images.cnblogs.com/cnblogs_com/DragonInSea/" + 
   9:             "WindowsLiveWriter/WPFandSilverlight1_B8D5/26-2_6.png");
  10:  
  11:     // 当图片下载完成后，对源图片加水印
  12:     source.DownloadCompleted += delegate
  13:     {
  14:         // 源图片
  15:         Image backImage = new Image();
  16:         backImage.Source = source;
  17:  
  18:         // 水印
  19:         TextBlock water = new TextBlock();
  20:         water.Text = "Dragon In Sea";
  21:         water.FontSize = 24;
  22:         water.FontFamily = new FontFamily("Consolas");
  23:         water.Background = new SolidColorBrush(Color.FromArgb(128, 0, 0, 0));
  24:         water.Foreground = Brushes.Gold;
  25:  
  26:         Canvas.SetLeft(backImage,0);
  27:         Canvas.SetTop(backImage,0);
  28:  
  29:         Canvas.SetLeft(water, source.Width - 200);
  30:         Canvas.SetTop(water,source.Height-50);
  31:  
  32:         // 将源图片与水印添加到同一个Canvas容器中
  33:         Canvas canvas = new Canvas();
  34:         canvas.Children.Add(backImage);
  35:         canvas.Children.Add(water);
  36:  
  37:         canvas.Measure(new Size(source.Width, source.Height));
  38:         canvas.Arrange(new Rect(0, 0, source.Width, source.Height));
  39:  
  40:         // 显示全成后的图片
  41:         RenderTargetBitmap newImage = new RenderTargetBitmap(
  42:             (int)source.Width, (int)source.Height,
  43:             source.DpiX, source.DpiY,
  44:             PixelFormats.Pbgra32);
  45:         newImage.Render(canvas);
  46:  
  47:         img.Source = newImage;
  48:     };
  49:  
  50:     source.EndInit();
  51: }

执行的结果如下图所示：

27-6

用此方法，不更改源图片，显示出来的是合成后的图片。

下一篇，我们将继续讨论对于图片的操作。

zhangheng0423
关注
专栏目录
【愚公系列】2023年10月 WPF+上位机+工业互联 022-几何图形(Path)
时光隧道
09-22 4万+
几何图形是指平面或立体的形状、大小、位置、角度、边数等固有的几何特征，例如线段、角、三角形、正方形、圆、立方体、球等。通常使用几何学来研究和描述几何图形的性质和关系。WPF中的Path控件提供了以下属性：Data：指定路径的几何图形数据。可以使用XAML语法或者代码来定义数据。Fill：指定路径填充的颜色或渐变。Stroke：指定路径边框的颜色或渐变。StrokeThickness：指定路径边框的粗细。StrokeDashArray：指定路径边框的虚线样式。
【愚公系列】2023年10月 WPF+上位机+工业互联 023-几何图形(PathGeometry)
热门推荐
时光隧道
09-22 4万+
几何图形是指平面或立体的形状、大小、位置、角度、边数等固有的几何特征，例如线段、角、三角形、正方形、圆、立方体、球等。通常使用几何学来研究和描述几何图形的性质和关系。PathGeometry是WPF中用于绘制路径的控件，其常用的属性有：Figures：定义路径的集合，每一个Figure定义了一个形状。每个Figure必须包含至少一个PathSegment。FillRule：填充规则，可以是EvenOdd或Nonzero。Transform：指定路径的变换，可以是旋转、缩放、平移等。
图形绘制之——Canvas详解（二）-Path路径使用
womengmengyan的博客
09-17 5096
上一篇博文我们学习了Canvas的基本知识，了解了使用Canvas可以绘制 直线，矩形，圆，椭圆，扇形，弧形，三角形，正弦，余弦以及path轨迹。 ？？？？？？？？？？？？ Path路径画法基本用法：Path常用方法： moveTo():由于path开始默认的位置为（0,0），所以需要将起始位置移动到指定位置。 lineTo():划线 close():将路径闭合 Canvas对应使用的P
Path(图形)
singhwong
12-07 646
路径(Path类)也是从Shape类派生的，但路径可以创建复杂的几何图形。 Path类公开Data属性，类型为Geometry(位于Windows.UI.Xaml.Media命名空间)，它表示几何图形的基类，一般不直接使用该类。从Geometry派生的表示几何图形的类型大致可以划分为两种。 单一图形：LineGeometry、RectangleGeometry、EllipseGeometry 复合图形：PathGeometry、GeometryGroup LineGeometry LineGeome
Canvas&Paint 知识梳理(6) 绘制路线 Path 基本用法
weixin_33676492的博客
12-21 149
一、概述 在实际的开发当中，我们经常会涉及到绘制路径，这里我们总结一下Path的常用API。 二、基本用法 对于一个Path来说，它其中有很多的”子路径“，对于每个”子路径“，它又会有两个变量，"源点"和"当前点"，也就是源码当中所描述的： The Path class encapsulates compound (multiple contour) geometric paths 复制代码2.1...
WPF使用Canvas绘制可变矩形
weixin_30784141的博客
08-30 159
WPF使用Canvas绘制可变矩形 原文:WPF使用Canvas绘制可变矩形 版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/WANGYAN9110/article/details/38130661 ...
WPF and Silverlight 学习笔记 chm版
11-01
将网上流传甚广的“WPF and Silverlight 学习笔记”精心制作成CHM格式，供各位WPF和Silverlight程序员学习使用。
ExpressionBlend4中文版WPF和Silverlight项目设计基础
05-20
《Expression Blend 4中文版WPF和Silverlight项目设计基础》是一本专为初学者和有一定基础的开发者...使用Microsoft Expression Blend 4进行Windows Presentation Foundation (WPF)和Silverlight应用的界面设计与开发...
WPF绘图（Path剪裁）
qq_30725967的博客
09-05 730
实际工作中经常会遇到制作不规则窗体或控件的需求，WPF在这方面做了良好的支持，仅需使出给你提或控件的Clip属性就可以轻松做到。Clip属性被定义在UIElement类中，因此WPF窗体和所用控件、图形都具有这个属性、Clip属性的数据类型是Geometry，与Path的Data属性一致。因此，我们只要按需求制作好特殊形状的Path，并把Path的Data属性值赋值给目标窗体、控件或其他图形，对目标的剪切就完成了。
WPF组合Path绘制
ShineRoyal
02-27 3845
假设我们需要绘制如图的组合图形： 一般的解决方案是如下代码，创建一个Canvas包含这三部分，如左图所示。 &amp;amp;lt;Canvas Margin=&amp;quot;508,604,-508,-604&amp;quot;&amp;amp;gt; &amp;amp;lt;Canvas.RenderTransform&amp;amp;gt; &amp;amp;lt;Trans
WPF中路径绘图Path类用法
要疯了的博客
06-10 5900
Path类可以绘制曲线和复杂形状 用法： 重点解释Data属性的表示语法： 移动指令：M 10,100即绘图的起始点是x=10，y=100，大写M表示绝对值，小写m表示相对于前一点的值，如果前一点没有指定，则使用(0,0)。 绘制指令：L 100,100，一个指令集合，用来描述外形轮廓的内容，可以绘制8种形状。 L：直线，L x,y（结束点坐标）； H：水平直线 H x V：垂直直线 V y C...
9path图片作为背景导致其下控件不能显示
????的专栏
01-09 1066
在用path图片设置过背景后,会导致其他控件内容不能显示 但加上下面一句话就可以了, android:background="@drawable/bg"     android:padding="0dp"  原因如下文 http://blog.csdn.net/houshunwei/article/details/6727433
WPF自定义按钮中利用Path路径生成图标
qq_37189288的博客
06-09 2369
第一步，在App.xaml中定义一个Path路径资源 <ResourceDictionary> <!--Setting Image--> <PathFigureCollection x:Key="SettingPathData"> M704.334 320.166c-166.812-169.952-465.88-48.558-464.332 192.338C239.94 662.402 362.098 784.56 512 784.5c240.882 1.5
用9path图片做背景 button和textview的文字不显示
zhuhai__yizhi的专栏
11-01 636
（转载）http://blog.csdn.net/liao277218962/article/details/46876117 问题在于以下函数： public void setBackgroundResource (int resid) Set the background to a given resource. The resource should refer to a Dra
【WPF】如何获取屏幕比例
最新发布
cl°的博客
10-30 271
在WPF (Windows Presentation Foundation) 应用程序中，你可以通过使用 System.Windows.SystemParameters 类或者 System.Windows.Forms.Screen 类来获取屏幕的比例。这里提供两种方法来实现这一功能。屏幕缩放比例 = 屏幕逻辑高度 / 屏幕实际高度。
WPF中视觉树和逻辑树的区别和联系
cl°的博客
10-29 375
在WPF（Windows Presentation Foundation）中，视觉树和逻辑树是两个重要的概念，它们用于表示用户界面元素的不同层次结构。虽然二者密切相关，但它们各自有着不同的特点和用途。
WPF+MVVM案例实战（十一）- 环形进度条实现
lingshuangcanxue
10-29 290
实现自定义圆形进度条效果
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值