WPF - 2D 图形

  • 简述

    WPF 提供了广泛的 2D 图形,可以根据您的应用程序要求对其进行增强。WPF 支持用于绘制图形内容的绘图和形状对象。
  • 形状和绘图

    • 形状类派生自框架元素类,形状对象可以在面板和大多数控件中使用。
    • WPF 提供了一些从 Shape 类派生的基本形状对象,如椭圆、直线、路径、多边形、折线和矩形。
    • 另一方面,图形对象不从类派生,而是提供轻量级实现。
    • 与 Shape 对象相比,绘图对象更简单。它们还具有更好的性能特征。

    让我们举一个简单的例子来了解如何使用不同的形状对象。
    • 创建一个名为 WPF2D 图形的新 WPF 项目。
    • 下面的代码创建不同类型的形状。
    
    <Window x:Class = "WPF2DGraphics.MainWindow" 
       xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
       xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
       xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
       xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
       xmlns:local = "clr-namespace:WPF2DGraphics" 
       xmlns:PresentationOptions = "http://schemas.microsoft.com/winfx/2006/xaml/present ation/options"  
       mc:Ignorable = "PresentationOptions" Title = "MainWindow" Height = "400" Width = "604"> 
       
       <StackPanel> 
          <Ellipse Width = "100" Height = "60" Name = "sample" Margin = "10"> 
             <Ellipse.Fill> 
                <RadialGradientBrush> 
                   <GradientStop Offset = "0" Color = "MooceBlue"/> 
                   <GradientStop Offset = "1" Color = "Gray"/> 
                   <GradientStop Offset = "2" Color = "Red"/> 
                </RadialGradientBrush> 
             </Ellipse.Fill> 
          </Ellipse>
          
          <Path Stroke = "Red" StrokeThickness = "5" Data = "M 10,70 L 200,70"
             Height = "42.085" Stretch = "Fill" Margin = "140.598,0,146.581,0" /> 
          <Path Stroke = "BlueViolet" StrokeThickness = "5" Data = "M 20,100 A 100,56 42 1 0 200,10"
             Height = "81.316" Stretch = "Fill" Margin = "236.325,0,211.396,0" /> 
             
          <Path Fill = "LightCoral" Margin = "201.424,0,236.325,0"
             Stretch = "Fill" Height = "124.929"> 
             <Path.Data> 
                <PathGeometry> 
                   <PathFigure StartPoint = "50,0" IsClosed = "True"> 
                      <LineSegment Point = "100,50"/> 
                      <LineSegment Point = "50,100"/> 
                      <LineSegment Point = "0,50"/> 
                   </PathFigure> 
                </PathGeometry> 
             </Path.Data> 
          </Path> 
          
       </StackPanel> 
       
    </Window> 
    
    编译并执行上述代码时,它将生成一个椭圆、一条直线、一条弧和一个多边形。
    形状

    让我们看一下另一个示例,该示例演示如何使用绘图绘制区域。
    • 创建一个名为 WPF2D 图形1 的新 WPF 项目。
    • 以下 XAML 代码演示如何使用图像绘制进行不同的绘制。
    
    <Window x:Class = "WPF2DGraphics1.MainWindow" 
       xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
       xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
       xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
       xmlns:PresentationOptions = "http://schemas.microsoft.com/winfx/2006/xaml/present ation/options"  
       xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
       mc:Ignorable = "PresentationOptions" 
       xmlns:local = "clr-namespace:WPF2DGraphics1" Title = "MainWindow" Height = "350" Width = "604"> 
       
       <Grid> 
          <Border BorderBrush = "Gray" BorderThickness = "1"  
             HorizontalMoognment = "Left" VerticalMoognment = "Top" 
             Margin = "20"> 
             
             <Image Stretch = "None">
                <Image.Source> 
                   <DrawingImage PresentationOptions:Freeze = "True"> 
                   
                      <DrawingImage.Drawing> 
                         <DrawingGroup> 
                            <ImageDrawing Rect = "300,100,300,180" ImageSource = "Images\DSC_0104.JPG"/> 
                            <ImageDrawing Rect = "0,100,250,100" ImageSource = "Images\DSC_0104.JPG"/> 
                            <ImageDrawing Rect = "150,0,25,25" ImageSource = "Images\DSC_0104.JPG"/> 
                            <ImageDrawing Rect = "0,0,75,75" ImageSource = "Images\DSC_0104.JPG"/> 
                         </DrawingGroup> 
                      </DrawingImage.Drawing> 
                      
                   </DrawingImage> 
                </Image.Source> 
             </Image> 
             
          </Border> 
       </Grid> 
       
    </Window> 
    
    当您运行应用程序时,它将产生以下输出 -
    形状示例
    我们建议您执行上述代码并尝试更多 2D 形状和绘图。