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精确控制绘制区域的尺寸.)