如何剪辑图像（UI 元素）以采样几何？

Posted 2023-04-01

【中文标题】如何剪辑图像（UI 元素）以采样几何？

【英文标题】：How to clip Image (UI-element) to sample geometry?

【发布时间】：2017-07-12 01:26:33

【问题描述】：

例如，我希望剪辑图像为椭圆。 UI-element 有 Clip，但 Windows Runtime API 中的 Clip 必须是 RectangleGeometry。我可以使用 Ellipse 和 ImageBrush 元素作为填充画笔来获得相同的结果：

How to clip image to ellipse in XAML

但是我无法调整或移动我的图像，因为它是画笔，而不是 UI 元素。那么，如何剪辑图像而不是矩形几何？例如，我想要这个：Move image into ellipse

也许，我可以将 alphamask 用于 UI 元素？还是不透明面膜？也许这可以用win2d？

【参考方案1】：

您应该能够在Path 内使用GeometryGroup 绘制形状，并使用该形状为图像创建蒙版。形状可以用RectangleGeometry和EllipseGeometry合成，形状应该和图片一样大小（注意形状的大小是和图片本身设置的一样，不是图片控件，因为图片控件可能有空白以适应图像的比例）。填充路径然后将让Ellipse部分显示图像。

例如代码如下：

<Grid>
   <Image Source="Assets/caffe1.jpg"  Height="200" Canvas.ZIndex="-1" Width="265">
   </Image>
   <Path Fill="White" Height="200"  Width="265">
       <Path.Data>
           <GeometryGroup>
               <EllipseGeometry Center="100,100" RadiusX="100" RadiusY="100"/>
               <RectangleGeometry Rect="0,0 265,200" ></RectangleGeometry>
           </GeometryGroup>
       </Path.Data>
   </Path>
</Grid>

结果：

这种方式可以让您将图像剪辑定义为您想要的任意形状，图像大小和剪辑大小也是您想要的。有关如何绘制形状的更多详细信息，请参考this article。