如何在 C# 中为 WPF 在 JPG 上绘制矩形

Question

[![在此处输入图像描述][1]][1]我有一个包含一系列 jpg 的文件夹，这些 jpg 是已转换为 jpg 的视频帧。我编写了一些代码来遍历它们并显示它们。

我正在尝试在 C# 的 JPG 图像上绘制一个绿色框。高度、宽度、XC 和 YC 都在一个 XML 中，我只是在其中访问每一帧的数据。我让它使用位图工作，但是要在 WPF 中显示它，我必须先将它转换为 bitmapImage。问题是它需要很长时间。我希望视频以 25 fps 的速度播放。所以所有的处理都需要在 40 毫秒内进行。现在显示新图像需要 0.01 到 0.3 秒之间的任何时间。

这是我到目前为止的代码-

public void UpdateImage(string imageName, int[] boxData)
{


    // imageName is the file path the image
    Bitmap oldImage = new Bitmap(imageName);


    // if objects are detected
    if (boxData.Length != 0)
    {
        // transforms x and y cords to align box better to light
        int newXC = boxData[0] - (boxData[2] / 2);
        int newYC = boxData[1] - (boxData[3] / 2);

        // ensures cords are not negative
        if (newXC < 0)
            newXC = 0;
        if (newYC < 0)
            newYC = 0;

        // uses the DrawRectangleBorder to draw rectangles 
        Bitmap newImage = DrawRectangleBorder(oldImage, new Rectangle(new System.Drawing.Point(newXC, newYC), new System.Drawing.Size(boxData[2], boxData[3])), Color.Green);

        // converts Bitmap to BitmapImage
        using (MemoryStream memory = new MemoryStream())
        {
            newImage.Save(memory, ImageFormat.Png);
            memory.Position = 0;
            BitmapImage bitmapImage = new BitmapImage();
            bitmapImage.BeginInit();
            bitmapImage.StreamSource = memory;
            bitmapImage.CacheOption = BitmapCacheOption.OnLoad;
            bitmapImage.EndInit();
            ImportImage.Source = bitmapImage;
        }
    }

    else
    {
        Bitmap newImage = oldImage;

        // converts Bitmap to BitmapImage
        using (MemoryStream memory = new MemoryStream())
        {
            newImage.Save(memory, ImageFormat.Png);
            memory.Position = 0;
            BitmapImage bitmapImage = new BitmapImage();
            bitmapImage.BeginInit();
            bitmapImage.StreamSource = memory;
            bitmapImage.CacheOption = BitmapCacheOption.OnLoad;
            bitmapImage.EndInit();
            ImportImage.Source = bitmapImage;
        }
    }
}

DrawRectangleBorder 方法-

private static Bitmap DrawRectangleBorder(Bitmap image, Rectangle rectangle, Color colour)
{

    // makes new blank Bitmap from the old ones width and height
    Bitmap newBitmap = new Bitmap(image.Width, image.Height);

    // opens up the blank bit
    using (Graphics graphics = Graphics.FromImage(newBitmap))
        graphics.DrawImage(image, new Rectangle(0, 0, image.Width, image.Height),
            new Rectangle(0, 0, image.Width, image.Height), GraphicsUnit.Pixel);

    // what actually draws the rectangles
    for (Int32 x = rectangle.Location.X; x <= rectangle.Right && x < image.Width; x++)
        for (Int32 y = rectangle.Location.Y; y <= rectangle.Bottom && y < image.Height; y++)
            if (y == rectangle.Location.Y || y == rectangle.Bottom || x == rectangle.Location.X || x == rectangle.Right)
                newBitmap.SetPixel(x, y, colour);

    return newBitmap;
}

这是其中一张图片的样子，分辨率为 640 x 480 - [1]：https://i.stack.imgur.com/ZiocC.jpg 任何帮助都会很棒！

Answer 1

这里是一个粗略的演示，使用一个矩形覆盖在图像前面并控制它的位置和大小。抱歉，以前从未在 SO 上共享过 wpf，但认为此代码就是您所需要的。我测试了时间，它可以远低于 40 毫秒（但我根本没有更新图像，只是矩形覆盖。如果需要，我还发现了这个 Fast Video Display WPF 但是你没有实现或测试出来吧。

“.cs”

namespace ImageStreamer
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        System.Windows.Threading.DispatcherTimer dispatcherTimer = new System.Windows.Threading.DispatcherTimer();
        Stopwatch stopWatch = new Stopwatch();
        long lastTime = 0;

        public MainWindow()
        {
            InitializeComponent();
            
            dispatcherTimer.Tick += dispatcherTimer_Tick;
            dispatcherTimer.Interval = new TimeSpan(0, 0, 0,0,25);
            stopWatch.Start();

        }

        private void dispatcherTimer_Tick(object sender, EventArgs e)
        {
            targetRect.Margin = new Thickness(targetRect.Margin.Left+1, targetRect.Margin.Top+1,0,0);
            targetRect.Width += 1;
            targetRect.Height += 1;
            Trace.WriteLine(lastTime - stopWatch.ElapsedMilliseconds);
            lastTime = stopWatch.ElapsedMilliseconds;
        }

        private void Grid_Initialized(object sender, EventArgs e)
        {

        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            dispatcherTimer.Start();
        }
    }
}

“xaml”

<Window x:Class="ImageStreamer.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:ImageStreamer"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid Initialized="Grid_Initialized">
        <Image x:Name="imgBox" HorizontalAlignment="Left" Height="265" Margin="166,87,0,0" VerticalAlignment="Top" Width="512" Source="/ZiocC.jpg"/>
        <Rectangle x:Name="targetRect" HorizontalAlignment="Left" Height="49" Margin="323,228,0,0" Stroke="Red" VerticalAlignment="Top" Width="113" StrokeThickness="5"/>
        <Button Content="Button" HorizontalAlignment="Left" Margin="24,43,0,0" VerticalAlignment="Top" Click="Button_Click"/>
    </Grid>
</Window>

Answer 2

您可以使用此 XAML 来简化您的代码

<Canvas>
    <Image x:Name="ImportImage"/>
    <Path x:Name="ObjectBox"
          Width="{Binding ActualWidth, ElementName=ImportImage}"
          Height="{Binding ActualHeight, ElementName=ImportImage}"
          Stretch="None" Stroke="Green" StrokeThickness="1"/>
</Canvas>

使用像这样的 UpdateImage 方法：

public void UpdateImage(string imagePath, int[] boxData)
{
    ImportImage.Source = new BitmapImage(new Uri(imagePath));

    var boxes = new GeometryGroup();

    for (int i = 0; i <= boxData.Length - 4; i += 4)
    {
        int width = boxData[i + 2];
        int height = boxData[i + 3];
        int x = boxData[i] - width / 2;
        int y = boxData[i + 1] - height / 2;

        boxes.Children.Add(new RectangleGeometry(new Rect(x, y, width, height)));
    }

    ObjectBox.Data = boxes;
}