如何通过编程将文本添加到位图图像？WPF

Question

我正在使用Kinect传感器将视频源设置为位图源，以在图像上显示视频。但我的问题是如何在图像/位图中添加文本，例如得分计数器。我添加了下面的图片以展示我想要实现的效果。

void myKinect_ColorFrameReady(object sender, ColorImageFrameReadyEventArgs e)
        {
            using (ColorImageFrame colorFrame = e.OpenColorImageFrame())
            {

                if (colorFrame == null) return;
                byte[] colorData = new byte[colorFrame.PixelDataLength];
                colorFrame.CopyPixelDataTo(colorData);

                 KinectVideo.Source = BitmapSource.Create(colorFrame.Width, colorFrame.Height, 96, 96,
                    PixelFormats.Bgr32, null, colorData, colorFrame.Width * colorFrame.BytesPerPixel);

            }
        } 

- Brian Var

---

为什么要将内容添加到位图图像本身？最好在其上方添加一个带有透明背景的图层。 - BlackICE

可能是如何在WPF中在位图图像上绘制文本？的重复问题。 - tinstaafl

Answer 1

你可以使用 DrawingVisual 和 DrawingImage 类来实现这一点：

var random = new Random();
var pixels = new byte[256 * 256 * 4];
random.NextBytes(pixels);
BitmapSource bitmapSource = BitmapSource.Create(256, 256, 96, 96, PixelFormats.Pbgra32, null, pixels, 256 * 4);
var visual = new DrawingVisual();
using (DrawingContext drawingContext = visual.RenderOpen())
{
    drawingContext.DrawImage(bitmapSource, new Rect(0, 0, 256, 256));
    drawingContext.DrawText(
        new FormattedText("Hi!", CultureInfo.InvariantCulture, FlowDirection.LeftToRight,
            new Typeface("Segoe UI"), 32, Brushes.Black), new Point(0, 0));
}
var image = new DrawingImage(visual.Drawing);
Image1.Source = image;

很不幸，目前没有办法直接向它写入文本，因此您将不得不创建一个新的BitmapSource。

或者您可以使用WriteableBitmapEx：https://writeablebitmapex.codeplex.com/

• 使用BitmapFactory从框架创建一个可写位图 (1)
• 再创建另一个可写位图并使用上述方法在其上绘制文本 (2)
• 将文本位图 (2) 贴到框架上 (1)

相同的结果但不同的方法，不确定方法2是否更好，因为它有点麻烦。

- aybe

---

你好，感谢您的回答。我还有一个问题需要解决。如何将一张图片放在位图上方，例如一张汽车的图片文件？我需要将其绘制到屏幕上吗？或者有什么更好的方法？ - Brian Var

如果您的图像是文件（PNG等...），请创建一个BitmapImage（它是一个BitmapSource），并在上下文中绘制它。如果您的图像是一个Image控件，则其Source属性是一个ImageSource，您可以将其转换为BitmapImage。查看类的层次结构：http://msdn.microsoft.com/en-us/library/system.windows.media.imaging.bitmapsource(v=vs.110).aspx。否则，请使用问题示例进行更新。 - aybe

我发布了一个与此相关的新问题，如果您有时间，能否看一下？https://dev59.com/VHzaa4cB1Zd3GeqPT759 - Brian Var

你终于做到了？太棒了:D - aybe

是的，我还在我的问题中添加了绘图代码的实现，但它没有起作用。你能否解释一下为什么它不起作用？ - Brian Var

Answer 2

您无需将文本绘制到图像本身中。只需在XAML中添加一个Z顺序较高的TextBlock控件。

- NickC

---

我现在明白了，将文本块放在图像上，并在需要时设置可见性。如果我要添加另一张图片到图像源中，应该将其绘制到Feed中还是放置在XAML中？ - Brian Var

我不确定我完全理解你的意思。你能详细说明一下你想做什么吗？ - NickC