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

【问题标题】：How to clip Image (UI-element) to sample geometry?如何剪辑图像（UI 元素）以采样几何？
【发布时间】：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？

【问题讨论】：

标签： image uwp clip uielement brush

【解决方案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。

【讨论】：