如何将图像（UI元素）剪辑为样本几何？ [英] How to clip Image (UI-element) to sample geometry?

问题描述

我想将剪辑图像设置为椭圆形。 UI元素具有Clip，但Windows运行时API中的Clip必须是RectangleGeometry。我可以使用Ellipse和ImageBrush元素作为填充笔刷获得相同的结果：

这种方式可以让您根据需要将图像剪辑定义为任意形状，图像尺寸和剪辑尺寸也是如此如你所愿。有关如何绘制形状的更多详细信息，请参考本文。

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?

解决方案

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.

这篇关于如何将图像（UI元素）剪辑为样本几何？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！