［自定义组件之一］利用calyer的遮罩处理圆形图片显示

朴灿烈づ我的快乐病毒、 2022-08-20 10:14 91阅读 0赞

#import <UIKit/UIKit.h>
    
    @interface CircleImgageView : UIImageView
    
    @end

#import "CircleImgageView.h"
    @interface CircleImgageView ()
    @property (nonatomic,strong) CALayer* ShowLayer;
    @end
    
    @implementation CircleImgageView
    -(instancetype)initWithFrame:(CGRect)frame
    {
        if (self = [super initWithFrame:frame]) {
            self.ShowLayer = [CALayer layer];
            [self.layer addSublayer:self.ShowLayer];
            float imgDiameter = MIN(self.frame.size.width, self.frame.size.height);
            float x = (self.frame.size.width - imgDiameter) / 2;
            float y = (self.frame.size.height - imgDiameter) / 2;
            float w = imgDiameter;
            float h = imgDiameter;
            self.ShowLayer.frame = CGRectMake(x, y, w, h);
            self.ShowLayer.backgroundColor = [[UIColor blackColor] CGColor];
            self.ShowLayer.cornerRadius = imgDiameter / 2;
            self.layer.mask = self.ShowLayer;
            self.layer.masksToBounds = YES;
            
        }
        return self;
    }
    @end

<pre name="code" class="objc">CircleImgageView* c = [[CircleImgageView alloc] initWithFrame:CGRectMake(10, 20, 175, 175)];
        c.image = [UIImage imageNamed:@"J罗.jpg"];
        [self.view addSubview:c];

总结：

1，利用了calayer的mask属性实现。

2，addsublayer，设置mask 这两个有顺序区别，总之组件会响应最后一次的刷新状态。

3，可以利用png图片，带alpha的那种，有渐变效果。

发表评论取消回复

表情：

评论列表（有 0 条评论，91人围观）

还没有评论，来说两句吧...

相关阅读

相关图片遮罩效果

欢迎访问我的博客地址 : [博客地址][Link 1] **鼠标移入容器半遮罩层从下方逐渐移上去** 话不多说，直接上代码! <!DOCTYPE html...

小咪咪/ 2024年04月18日 16:53/ 0 赞/ 96 阅读

相关遮罩层

<view class="pop"> <view class="cont"> 内容 </view> </view> .

深藏阁楼爱情的钟/ 2023年01月11日 13:05/ 0 赞/ 354 阅读

相关 css 实现鼠标移入图片显示遮罩层

css 实现鼠标移入图片显示遮罩层代码如下 <!DOCTYPE html> <html> <head> <meta char

约定不等于承诺〃/ 2022年12月29日 06:34/ 0 赞/ 363 阅读

相关 html：自定义遮罩层弹窗（居中）

一、html代码html <div v-if="maskVisible" class="mask_layer" @click="关闭事件"> <di

布满荆棘的人生/ 2022年10月04日 13:59/ 0 赞/ 223 阅读

相关［自定义组件之四］利用Quartz2D实现圆形图片显示

import "ViewController.h" @interface ViewController () @end

布满荆棘的人生/ 2022年08月20日 13:10/ 0 赞/ 128 阅读

相关［自定义组件之三］利用calyer实现进度条效果

import <UIKit/UIKit.h> @interface ProgressView : UIView @property

谁借莪１个温暖的怀抱￠/ 2022年08月20日 12:25/ 0 赞/ 114 阅读

相关［自定义组件之一］利用calyer的遮罩处理圆形图片显示

import <UIKit/UIKit.h> @interface CircleImgageView : UIImageView @

朴灿烈づ我的快乐病毒、/ 2022年08月20日 10:14/ 0 赞/ 92 阅读

相关遮罩

<div class =“modal-backdrop in”id =“loadingModal”style =“display：none; z-index：20000

系统管理员/ 2022年05月26日 00:19/ 0 赞/ 302 阅读

相关 pr怎样制作遮罩，premiere怎样制作圆形遮罩

1. 第一步，先打开premiere，然后把你要遮罩的视频放到视频一轨道。 [![pr怎样制作遮罩，premiere怎样制作圆形遮罩][pr_premier

亦凉/ 2022年04月06日 06:18/ 0 赞/ 253 阅读

相关自定义遮罩层

业务需求，又不想用网上找的。干脆自己写一个。 // obj 中的参数可以自定义。 var app_mask = { init: functi

╰半橙微兮°/ 2022年01月27日 18:09/ 0 赞/ 422 阅读