写一份wpf动态图像绘制练习的实验报告

实验目的：

本实验旨在通过使用WPF技术，练习动态图像的绘制，提高学生的图形程序设计能力。

实验要求：

- 使用WPF技术，设计一个动态图像绘制程序，能够随机生成多个大小、颜色、位置不同的图形，并能够在窗口中随机移动。
- 能够实现用户交互，鼠标点击图形后能够高亮显示，并能够拖动。
- 窗口大小可变，图形应自适应大小。

实验步骤：

1. 创建WPF应用程序

打开Visual Studio 2019，选择“创建新项目”，选择“Windows桌面”中的“WPF应用程序”，命名为“DynamicGraphics”，创建新项目。

2. 创建主窗口

在Solution Explorer中，找到MainWindow.xaml文件，打开并编辑，添加Grid作为主容器，设置背景色为白色，同时设置SizeChanged事件，以便实现窗口大小自适应。

<Window x:Class="DynamicGraphics.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Dynamic Graphics" Height="450" Width="800" SizeChanged="Window_SizeChanged">
    <Grid Background="White">

    </Grid>
</Window>

在MainWindow.xaml.cs文件中，添加窗口大小自适应的代码。

private void Window_SizeChanged(object sender, SizeChangedEventArgs e)
{
    //获取当前窗口的宽度和高度
    double width = e.NewSize.Width;
    double height = e.NewSize.Height;

    //将主容器的宽度和高度设置为窗口的宽度和高度
    mainGrid.Width = width;
    mainGrid.Height = height;
}

3. 创建图形类

在Solution Explorer中，右键点击“DynamicGraphics”项目，选择“添加”->“类”，命名为“Graphics”，创建新类。

在Graphics类中，定义图形的属性，包括位置、大小、颜色等，同时定义绘制图形的方法。

public class Graphics
{
    public Point position { get; set; } //位置
    public Size size { get; set; } //大小
    public Color color { get; set; } //颜色

    public Graphics(Point p, Size s, Color c)
    {
        position = p;
        size = s;
        color = c;
    }

    public void Draw(Canvas canvas)
    {
        Rectangle rect = new Rectangle
        {
            Width = size.Width,
            Height = size.Height,
            Fill = new SolidColorBrush(color)
        };

        Canvas.SetLeft(rect, position.X);
        Canvas.SetTop(rect, position.Y);

        canvas.Children.Add(rect);
    }
}

4. 在主窗口中添加图形

在MainWindow.xaml.cs文件中，定义一个List来存储图形，同时在窗口加载时添加多个图形。

public partial class MainWindow : Window
{
    private List<Graphics> graphicsList = new List<Graphics>();

    public MainWindow()
    {
        InitializeComponent();

        //随机生成多个图形
        Random random = new Random();
        for (int i = 0; i < 20; i++)
        {
            Point position = new Point(random.Next(0, (int)mainGrid.Width), random.Next(0, (int)mainGrid.Height));
            Size size = new Size(random.Next(20, 100), random.Next(20, 100));
            Color color = Color.FromRgb((byte)random.Next(0, 256), (byte)random.Next(0, 256), (byte)random.Next(0, 256));
            Graphics graphics = new Graphics(position, size, color);
            graphics.Draw(mainGrid);
            graphicsList.Add(graphics);
        }
    }
}

5. 实现用户交互

在Graphics类中，添加IsSelected属性和Select和Deselect方法，用于实现用户交互。

public class Graphics
{
    public Point position { get; set; } //位置
    public Size size { get; set; } //大小
    public Color color { get; set; } //颜色
    public bool IsSelected { get; set; } //是否被选中

    public Graphics(Point p, Size s, Color c)
    {
        position = p;
        size = s;
        color = c;
        IsSelected = false;
    }

    public void Draw(Canvas canvas)
    {
        Rectangle rect = new Rectangle
        {
            Width = size.Width,
            Height = size.Height,
            Fill = new SolidColorBrush(color)
        };

        Canvas.SetLeft(rect, position.X);
        Canvas.SetTop(rect, position.Y);

        canvas.Children.Add(rect);
    }

    public void Select()
    {
        IsSelected = true;
        color = Colors.Yellow;
    }

    public void Deselect()
    {
        IsSelected = false;
        color = Color.FromRgb((byte)new Random().Next(0, 256), (byte)new Random().Next(0, 256), (byte)new Random().Next(0, 256));
    }
}

在MainWindow.xaml.cs文件中，添加鼠标点击和拖动事件的实现。

private Graphics selectedGraphics = null;

private void mainGrid_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    Point point = e.GetPosition(mainGrid);

    //查找被点击的图形
    foreach (Graphics graphics in graphicsList)
    {
        if (graphics.position.X <= point.X && graphics.position.Y <= point.Y
            && graphics.position.X + graphics.size.Width >= point.X && graphics.position.Y + graphics.size.Height >= point.Y)
        {
            if (selectedGraphics != null)
            {
                selectedGraphics.Deselect();
                selectedGraphics.Draw(mainGrid);
            }

            graphics.Select();
            graphics.Draw(mainGrid);
            selectedGraphics = graphics;

            break;
        }
    }
}

private void mainGrid_MouseMove(object sender, MouseEventArgs e)
{
    if (selectedGraphics != null && e.LeftButton == MouseButtonState.Pressed)
    {
        Point point = e.GetPosition(mainGrid);

        //更新图形位置
        selectedGraphics.position = new Point(point.X - selectedGraphics.size.Width / 2, point.Y - selectedGraphics.size.Height / 2);
        selectedGraphics.Draw(mainGrid);
    }
}

6. 完成实验

运行程序，即可看到多个随机生成的图形，在鼠标点击和拖动时能够高亮显示和移动。

实验结论：

本实验通过使用WPF技术，设计了一个动态图像绘制程序，能够随机生成多个大小、颜色、位置不同的图形，并能够在窗口中随机移动。同时实现了用户交互，鼠标点击图形后能够高亮显示，并能够拖动。窗口大小可变，图形能够自适应大小。通过本实验，提高了学生的图形程序设计能力。