在WPF中自定义你的绘制(二)

                                                   在WPF中自定义你的绘制(二)
                                                                   周银辉

1,绘制几何图形
也许你在使用WPF进行开发的时候已经注意到一个很有意思的现象,要在屏幕上显示一个圆形(椭圆),你可以使用Ellipse对象,如下面的代码所示:
<Grid>
          
<Ellipse Fill="#FFFFFFFF" Stroke="#FF000000" Margin="61,36,100,0" VerticalAlignment="Top" Height="33"/>       
    
</Grid>
而另外一个名为EllipseGeometry的对象同样可以做到:
<GeometryDrawing  Brush="Blue">
         
<GeometryDrawing.Geometry>
                    
<EllipseGeometry Center="50,50" RadiusX="20" RadiusY="45" />
         
</GeometryDrawing.Geometry>            
         
<GeometryDrawing.Pen>
                      
<Pen Thickness="1" Brush="Black" />
         
</GeometryDrawing.Pen>
</GeometryDrawing>
向后者这样由几何图形名称加Geometry后缀的,就是今天我们要讨论的几何图形.
我们可以发现,Ellipse继承于Shape类,EllipseGemotry继承于Geometry类,虽然我们利用它们都可以绘制圆形,但EllipseGeometry比Ellipse是更轻量级的类,我们使用它可以获得更好的性能效益,但EllipseGeometry不支持WPF布局系统(Layout)、输入和焦点。这也是Shape与Geometry的区别。
我们也可以使用C#代码像传统的绘制(OnPaint)一样来自定义我们的绘制:
protected override void OnRender(DrawingContext dc)
        
{
            
base.OnRender(dc);

            Geometry ellipse 
= new EllipseGeometry(new Point(10070), 10050);
            GeometryDrawing drawing 
= new GeometryDrawing(Brushes.LightBlue, new Pen(Brushes.Green,1), ellipse);

            dc.DrawDrawing(drawing);
        }

效果如下图:
customPaint2.png
其他基本几何图形(如RectangleGeometry,LineGeometry等)与此类似。

2, 绘制图片
最简单的使用图片的方式当然是利用Image控件,就像以前我们使用PictureBox一样,但更多的我们是使用自定义方式来绘制,ImageDrawing 对象为我们绘制图片提供了方便。

 protected override void OnRender(DrawingContext dc)
        
{
            
base.OnRender(dc);
            BitmapImage bmp 
= new BitmapImage(new Uri("http://images.cnblogs.com/logo.gif", UriKind.Absolute));
            ImageDrawing drawing 
= new ImageDrawing(bmp, new Rect(101032643));
            dc.DrawDrawing(drawing);
        }
效果如下:
customPaint3.png

3,绘制文本
在WPF中我们可以高度定制文本的绘制,这需要了解GlyphRunDrawing类以及GlyphRun对象,其实在我们使用TextBlock时经常使用GlyphRun对象,它包含了文本字体的很多细节属性,请参见SDK的GlyphRun类。
<Page
    
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x
="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:PresentationOptions
="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options"
    xmlns:mc
="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable
="PresentationOptions"
    Margin
="20" Background="White">
    
    
<!-- The example shows how to use different property settings of Glyphs objects. -->
    
<Canvas
        
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x
="http://schemas.microsoft.com/winfx/2006/xaml"
        Background
="PowderBlue"
    
>
        
        
<Glyphs
            
FontUri             = "C:\WINDOWS\Fonts\ARIAL.TTF"
            FontRenderingEmSize 
= "36"
            StyleSimulations    
= "ItalicSimulation"
            UnicodeString       
= "Hello World!"
            Fill                
= "SteelBlue"
            OriginX             
= "50"
            OriginY             
= "75"
        
/>
        
        
<!-- "Hello World!" with default kerning -->
        
<Glyphs
            
FontUri             = "C:\WINDOWS\Fonts\ARIAL.TTF"
            FontRenderingEmSize 
= "36"
            UnicodeString       
= "Hello World!"
            Fill                
= "Maroon"
            OriginX             
= "50"
            OriginY             
= "150"
        
/>
        
        
<!-- "Hello World!" with explicit character widths for proportional font -->
        
<Glyphs
            
FontUri             = "C:\WINDOWS\Fonts\ARIAL.TTF"
            FontRenderingEmSize 
= "36"
            UnicodeString       
= "Hello World!"
            Indices             
= ",80;,80;,80;,80;,80;,80;,80;,80;,80;,80;,80"
            Fill                
= "Maroon"
            OriginX             
= "50"
            OriginY             
= "225"
        
/>
        
        
<!-- "Hello World!" with fixed-width font -->
        
<Glyphs
            
FontUri             = "C:\WINDOWS\Fonts\COUR.TTF"
            FontRenderingEmSize 
= "36"
            StyleSimulations    
= "BoldSimulation"
            UnicodeString       
= "Hello World!"
            Fill                
= "Maroon"
            OriginX             
= "50"
            OriginY             
= "300"
        
/>
        
        
<!-- "Open file" without "fi" ligature -->
        
<Glyphs
            
FontUri             = "C:\WINDOWS\Fonts\TIMES.TTF"
            FontRenderingEmSize 
= "36"
            StyleSimulations    
= "BoldSimulation"
            UnicodeString       
= "Open file"
            Fill                
= "SlateGray"
            OriginX             
= "400"
            OriginY             
= "75"
        
/>
        
        
<!-- "Open file" with "fi" ligature -->
        
<Glyphs
            
FontUri             = "C:\WINDOWS\Fonts\TIMES.TTF"
            FontRenderingEmSize 
= "36"
            StyleSimulations    
= "BoldSimulation"
            UnicodeString       
= "Open file"
            Indices             
= ";;;;;(2:1)191"
            Fill                
= "SlateGray"
            OriginX             
= "400"
            OriginY             
= "150"
        
/>
    
    
</Canvas>


</Page>

customPaint4.png


在《在WPF中自定义你的绘制(三)》中我们会继续讨论自定义绘制中更深入的话题:合并绘制、利用路径绘制图形、将我们的绘制转变为画刷,谢谢!



posted on 2007-07-17 11:46 周银辉 阅读(2419) 评论(9)  编辑 收藏 网摘 所属分类: WPF

评论

#1楼 2007-07-17 14:43 yayx[未注册用户]

有个问题请教 如何能在WPF里绘制System.Drawing.Bitmap类型的传统的图像?
我似乎没有找到现成的方法
  回复  引用    

#2楼[楼主] 2007-07-17 14:47 周银辉      

WPF中System.Windows.Media.Imaging.BitmapImage类,相对于以前的System.Drawing.Bitmap   回复  引用  查看    

#3楼 2007-07-18 00:15 yayx[未注册用户]

@周银辉
我在程序里使用了传统的Resouce得到的是
System.Drawing.Bitmap类型的对象,比如Properties.Resource1.Image1
但是创建ImageSource需要一个URI,我没有找到通过Properties.Resource1.Image1创建ImageSource的方法
希望得到帮助...
  回复  引用    

#4楼[楼主] 2007-07-18 09:37 周银辉      

@yayx

你应该采用这样的语法:
Uri uri = new Uri(@"pack://application:,,,/Garden.GIF", UriKind.Absolute);
this.image1.Source = new BitmapImage(uri);

这里为你做了一个Demo:
http://www.cnblogs.com/Files/zhouyinhui/ImageSource.rar" target="_new">http://www.cnblogs.com/Files/zhouyinhui/ImageSource.rar
你可以看一下

  回复  引用  查看    

#5楼 2007-07-18 12:05 yayx[未注册用户]

@周银辉
3ks...弄了半天 总算搞定了
总结下需要注意的地方:
需要把gif之类图片的生成操作改为"Resource" 不是以前的"嵌入式资源",这样资源会被整合到程序集中,可以通过pack://application 这样的URI访问, 如果改为"内容" 则是在文件夹中寻找单独的文件,这样的话,似乎传统的.resx被淘汰了?

如果更改之后需要把obj文件夹里的东西删了,重新编译,否则无效.....
  回复  引用    

#6楼 2007-07-19 11:33 abc[未注册用户]

任何一本WPF的书里面关于Resource的部分都提到了 "不要用嵌入式资源"   回复  引用    

#7楼 2007-07-19 15:45 libby[未注册用户]

关于你写的“WPF中自定义你的绘制”,能不能提供一下Demo?
谢谢!
  回复  引用    

#8楼[楼主] 2007-07-19 18:38 周银辉      

关于Demo:
由于在《在WPF中自定义你的绘制(一)》中已经提供了一段较完整的代码:
using System;
using System.Collections.Generic;
using System.Text;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows;
using System.Globalization;

namespace CustomPaint
{
class MyCanvas : Canvas
{
protected override void OnRender(DrawingContext dc)
{
base.OnRender(dc);

dc.DrawRectangle(Brushes.LightBlue, new Pen(Brushes.Red, 1),
new Rect(new Point(10, 10), new Size(100, 50)));

dc.DrawText(new FormattedText("my canvas", CultureInfo.CurrentCulture,
FlowDirection.LeftToRight, new Typeface("Tahoma"), 20, Brushes.Green),
new Point(50,25));
}
}
}
而后续讲解中均是重写的OnRender方法,所以原以为没有每次都提供Demo的必要了,呵呵,不过以后改正哈
  回复  引用  查看    




发表评论

昵称: [登录] [注册]

主页:

邮箱:(仅博主可见)

评论内容:

  登录  注册

[使用Ctrl+Enter键快速提交评论]

0 820919




相关文章:

相关链接:

导航

<2007年7月>
24252627282930
1234567
891011121314
15161718192021
22232425262728
2930311234

统计

搜索

 

常用链接

留言簿

我参与的团队

随笔分类(215)

随笔档案(195)

友情链接

积分与排名

最新随笔

阅读排行榜