How to clip Image (UI-element) to sample geometry?

问题

I want clip Image to ellipse, for example. UI-element have Clip, but Clip in the Windows Runtime API must be a RectangleGeometry. I can achieve the same result using an Ellipse and ImageBrush element as Fill brush:

How to clip image to ellipse in XAML

But then i can not size or move my image, because it's brush, not UI-element. So, how clip image not rectanglegeometry? For example, i want this:Move image into ellipse

Maybe, i can use alphamask to UI-element? Or OpacityMask? Maybe this is possible with win2d?

回答1:

A way that you should be able to draw a shape with GeometryGroup inside a Path, and using the shape to create a mask to the image. The shape may be composited with a RectangleGeometry and a EllipseGeometry, and the shape should be same size with the image(pay attention that the shape's size is setting same to the image itself not the image control since the image control may have blank space to adapt the ratio of image). Fill the path then will let the Ellipse parts to show the image.

For example, code as follows:

<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>

And the result:

This way can let you define the image clip to arbitrary shape as what you want, also the image size and clip size are as what you want. More details for how to drawing shapes please reference this article.

来源：https://stackoverflow.com/questions/42383997/how-to-clip-image-ui-element-to-sample-geometry