WPF：如何避免图像离开Canvas的边界？

Question

我有一个画布作为图像查看器。它的背景用于放置图像，我想在其上放置另一个图像。所以，场景是这样的：

 <Canvas Name="VisorCanvas"  Height="514"  Width="720">
   <Canvas.Background>
   <ImageBrush />
   </Canvas.Background>
   <Image Name="foreground"  />
</Canvas>

我在后面的代码中动态插入图像（C＃）。

问题在于，如果图像太大，则图像会超出Canvas的边框。例如：我有一个不相关的背景图像，我想通过以下方式在Canvas面板中显示一个正方形（在其背景之上）：

• 无论如何，广场的图像都会调整大小。
• 如果它小于画布的尺寸，我只是展示它。
• 如果它在任何尺寸（宽度或高度）都更大，我需要裁剪它或设置透明图像的一部分。这样做我实现了电视模式或类似的东西，因为图形总是看起来在画布的“内部”（虽然部分被裁剪）

我该怎么做？我试过了：

• 使用CroppedBitmap裁剪图像，但不准确。
• 要通过额外的opacityMask图像使用透明度，但我需要从原始图像创建一个掩码位图（具有透明度），我不知道该怎么做。
• 使用RenderTargetBitmap创建“照片”，并用此方法的结果替换图像，但我不能。

如果有人能够阐明它，我将不胜感激。

Answer 1

在ClipToBounds="True"元素中设置Canvas，这将阻止图片超出画布的边框。

您可能还想考虑不使用Image元素。您可以使用Rectangle Fill设置为ImageBrush，因为您可以使用Viewbox和Viewport属性来选择源图像的哪个部分你想要的，以及你想要的输出大小。 （将ViewportUnits设置为Absolute可以精确控制绘制区域的尺寸。）