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

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

效果如下图:
在WPF中自定义你的绘制(二)
其他基本几何图形(如RectangleGeometry,LineGeometry等)与此类似。

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

在WPF中自定义你的绘制(二) protected override void OnRender(DrawingContext dc)
        }
效果如下:
在WPF中自定义你的绘制(二)

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


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



相关文章: