WPF中GDI+图形图像的绘制：（一）绘制文本——动态设置字体、大小、颜色

最新推荐文章于 2025-10-11 12:58:30 发布

原创

最新推荐文章于 2025-10-11 12:58:30 发布 · 7.6k 阅读

29 ·

CC 4.0 BY-SA版权

文章标签：

#WPF #GDI+ #C# #绘制文本

本文介绍了如何在WPF应用中利用GDI+进行图形图像绘制，特别是动态设置文本的字体、大小和颜色。通过创建Graphics实例作为画布，结合Canvas控件，实现文本的精确绘制。文章详细讲解了实现过程，包括窗体布局、事件处理以及FontItem类的设计，帮助开发者理解GDI+在WPF中的应用。

GDI+（Graphics Device Interface Plus图形设备接口加）是.NET框架的重要组成部分，负责在屏幕和打印机上绘制图形图像和显示信息。GDI+不但在功能上比GDI 要强大很多，而且在代码编写方面也更简单，因此很快成为了Windows图形图像程序开发的首选。

从程序设计的角度看，GDI包括两部分：GDI对象和GDI函数。GDI对象定义了GDI函数使用的工具和环境变量；而GDI函数使用GDI对象绘制各种图形。

GDI+主要提供了以下三种功能：

1）二维矢量图形；2）图像处理；3）文字显示版式。

图形类Graphics是GDI+的核心，它提供绘制图形、图像和文本的各种方法（操作/函数），还可以存储显示设备和被画项目的属性（到图元文件）。所有的画图方法都被包括在Graphics类中，在绘制任何对象时，我们首先要创建一个Ggraphics实例，这个实例相当于创建了一块画布，有了画布才可以使用各种画图方法绘图。

下面主要通过创建实例并不断丰富完善的方式来简单介绍GDI+图形图像绘制中的一些概念与技巧，首先是绘制文本，实现效果如图：

1、新建WPF应用程序DrawDemo。

添加System.Drawing的引用，System.Drawing命名空间提供了对 GDI+ 基本图形功能的访问权限。

在主窗体添加一个Canvas控件。Canvas是WPF里基本的面板，它是一个存储控件的容器，主要用途是用来画图。通过设置ClipToBounds=”True”来裁剪超过自身范围的内容。设置HorizontalAlignment="Left"，VerticalAlignment="Top"来设置以左上角为中心。

2、分别添加其他控件用来设置字体类型、大小、颜色。由于WPF中没有NumericUpDown控件，这里采用添加Winform控件的方式。

窗体xaml如下：

<Window x:Class="DrawDemo.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:DrawDemo"
        xmlns:wf="clr-namespace:System.Windows.Forms;assembly=System.Windows.Forms"
        mc:Ignorable="d"
        WindowStartupLocation="CenterScreen" ResizeMode="NoResize"
        Title="GDI+文本绘制" Height="768" Width="1280" Loaded="Window_Loaded">
    <Grid Background="#f0f0f0">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="auto"></ColumnDefinition>
            <ColumnDefinition ></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Canvas x:Name="mainCanvas" Grid.Column="0" Background="White" Width="960" Height="720" Margin="10,5,0,0"
                HorizontalAlignment="Left"
                Ve