前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >WPF 元素裁剪 Clip 属性

WPF 元素裁剪 Clip 属性

作者头像
林德熙
发布2019-03-13 14:29:40
1.6K0
发布2019-03-13 14:29:40
举报
文章被收录于专栏:林德熙的博客林德熙的博客

本文介绍如何在 WPF 使用 Clip 裁剪元素

在 WPF 的 UIElement 提供了 Clip 属性,这个属性默认是空,但是如果设置了这个属性就会对元素进行裁剪

这个属性是一个 Geometry 属性,设置的值表示裁剪之后剩下的部分,如写一个简单的类继承 UIElement 然后对他进行裁剪

代码语言:javascript
复制
    class SisdecereYipuVayderyecallMawqere : UIElement
    {
        /// <inheritdoc />
        public SisdecereYipuVayderyecallMawqere()
        {
        }

        /// <inheritdoc />
        protected override void OnRender(DrawingContext drawingContext)
        {
            drawingContext.DrawRectangle(Brushes.Black,null,new Rect(10,10,100,100));
        }
    }

现在这个类会在 10,10 的坐标画出大小是 100 的矩形

对他裁剪,设置裁剪的是矩形裁剪

代码语言:javascript
复制
        public SisdecereYipuVayderyecallMawqere()
        {
            Clip = new RectangleGeometry(new Rect(30, 30, 50, 50));
        }

从图片很难看出来不同,只是可以看到两个矩形,第一个矩形比较大

对他进行圆形裁剪

代码语言:javascript
复制
        public SisdecereYipuVayderyecallMawqere()
        {
            Clip = new EllipseGeometry(new Point(30, 30), 10, 10);
        }

可以看到显示的是圆形

因为设置 Clip 属性是一个裁剪的窗口,只有在裁剪区域之内才可以显示

因为 Geometry 是可以做到不连续的,所以可以做出部分的透明,如裁剪两个矩形

代码语言:javascript
复制
        public SisdecereYipuVayderyecallMawqere()
        {
            Geometry geometry = new RectangleGeometry(new Rect(10,10,10,10));
            geometry = Geometry.Combine(geometry, new RectangleGeometry(new Rect(30, 30, 10, 10)),
                GeometryCombineMode.Union, null);

            Clip = geometry;
        }

WPF 通过 DrawingContext DrawImage 绘制图片


本文会经常更新,请阅读原文: https://lindexi.gitee.io/post/WPF-%E5%85%83%E7%B4%A0%E8%A3%81%E5%89%AA-Clip-%E5%B1%9E%E6%80%A7.html ,以避免陈旧错误知识的误导,同时有更好的阅读体验。

知识共享许可协议
知识共享许可协议

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

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

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

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

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

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档