WPF：如何避免图像超出 Canvas 的边界？答案

【问题标题】：WPF: How to avoid an image get out of Canvas's borders?WPF：如何避免图像超出 Canvas 的边界？
【发布时间】：2011-07-13 15:26:24
【问题描述】：

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

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

我在代码后面 (C#) 中动态插入图像。

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

在任何情况下，正方形的图像都会调整大小。
如果它小于画布的尺寸，我只显示它。
如果它在任何尺寸（宽度或高度）上都更大，我需要裁剪它或将图像的一部分设置为透明。这样做我实现了电视模式或类似的东西，因为这个数字总是看起来“在”画布“内部”（尽管一部分被裁剪了）

我该怎么做？我试过了：

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

如果有人能解释一下，我将不胜感激。

【问题讨论】：

标签： wpf canvas transparency

【解决方案1】：

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

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

【讨论】：

ClipToBounds！修复了我遇到的一些 Z 顺序问题。
为我工作。澄清一下，应该在父对象上设置 ClipToBounds。
@TylerPantuso by 'parent' 你的意思是Canvas？如果是这样，那正是我在第一句话中所说的。如果不是，你是什么意思？您是否发现需要将其设置在 Canvas 的父级上？如果是这样，那就不正常了。