UWP 将图片裁剪成圆形（椭圆）

UWP 将图片裁剪成圆形（椭圆）

2018-06-15 13:21

不知从什么时候开始，头像流行使用圆形了，于是各个平台开始追逐显示圆形裁剪图像的技术。UWP 有内建的机制支持这种圆形图像裁剪，不过，仅限于画刷。

WPF 的圆形裁剪请左转参考：WPF 中使用附加属性，将任意 UI 元素或控件裁剪成圆形（椭圆）。

与 WPF 不同，UWP 中 UIElement.Clip 属性是 RectangleGeometry 类型的，这意味着利用此属性是没有办法完成圆形裁剪的。

但是，存在一个与 WPF 一样的简单一些的方案，直接使用 ImageBrush：

<Grid>
    <Ellipse Width="512" Height="512">
        <Ellipse.Fill>
            <ImageBrush ImageSource="Conan_C2.png" />
        </Ellipse.Fill>
    </Ellipse>
</Grid>

这是我的头像，原图是这样的：

本文会经常更新，请阅读原文： https://walterlv.com/post/clip-uwp-image-to-ellipse.html ，以避免陈旧错误知识的误导，同时有更好的阅读体验。

本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。欢迎转载、使用、重新发布，但务必保留文章署名 吕毅 （包含链接： https://walterlv.com ），不得用于商业目的，基于本文修改后的作品务必以相同的许可发布。如有任何疑问，请 与我联系 (walter.lv@qq.com) 。