前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >UWP 将图片裁剪成圆形(椭圆)

UWP 将图片裁剪成圆形(椭圆)

作者头像
walterlv
发布2018-09-18 13:43:48
1.1K0
发布2018-09-18 13:43:48
举报
文章被收录于专栏:walterlv - 吕毅的博客

UWP 将图片裁剪成圆形(椭圆)

2018-06-15 13:21

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


WPF 的圆形裁剪请左转参考WPF 中使用附加属性,将任意 UI 元素或控件裁剪成圆形(椭圆)

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

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

代码语言:javascript
复制
<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)

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018-06-15 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • UWP 将图片裁剪成圆形(椭圆)
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档