如何将一张图像叠加到另一张图像上？

Question

我想显示由 两张 图像组成的图像。

我希望图像 rectangle.png 与图像 sticker.png 一起显示在它的 top 上，其 left-hand 像素 10、10 处的角。

这是我所知道的，但是如何组合图像？

Image image = new Image();
image.Source = new BitmapImage(new Uri(@"c:\test\rectangle.png"));
image.Stretch = Stretch.None;
image.HorizontalAlignment = HorizontalAlignment.Left;

Image imageSticker = new Image();
imageSticker.Source = new BitmapImage(new Uri(@"c:\test\sticker.png"));

image.OverlayImage(imageSticker, 10, 10); //how to do this?

TheContent.Content = image;

Answer 1

您可以将一个 Image 控件放在 View 中另一个 Image 控件的顶部。将两者都放入网格或画布中，然后将其中一个图像叠加在另一个图像之上。这也让您可以使用不透明度进行混合，效果非常好。

如果您需要将它们放入同一张图片中，有几种选择....

您可以从第一个图像中创建一个WritableBitmap，然后在第一个图像之上手动“绘制”其他图像像素。然后，这可以作为您在显示器中的图像的图像源。

或者，您可以进行我上面提到的叠加，并将其渲染为RenderTargetBitmap。然后可以将其用作您的图像源。

Answer 2

您需要一个面板来添加两个图像控件。 Grid 或 Canvas 将允许这样做，但我会使用 Grid，因为它会限制图像控件（从而适当地拉伸或收缩它们）。

Image image = new Image();
image.Source = new BitmapImage(new Uri(@"c:\test\rectangle.png"));
image.Stretch = Stretch.None;
image.HorizontalAlignment = HorizontalAlignment.Left;

Image imageSticker = new Image();
imageSticker.Source = new BitmapImage(new Uri(@"c:\test\sticker.png"));
imageStiker.Margin = new Thickness(10, 10, 0, 0);

Grid grid = new Grid();
grid.Children.Add(image);
grid.Children.Add(imageSticker);

TheContent.Content = grid;