zoukankan      html  css  js  c++  java
  • 用CALayer实现聚光灯效果

    效果图:

    代码部分:

    #import "ViewController.h"
    
    @interface ViewController ()
    
    @property (nonatomic, strong) CALayer *imageLayer;
    @property (nonatomic, strong) CALayer *maskViewLayer;
    
    @property (nonatomic, strong) UIImage *contentImage;
    @property (nonatomic, strong) UIImage *maskViewContentImage;
    
    @end
    
    @implementation ViewController
    
    - (void)viewDidLoad {
        [super viewDidLoad];
        
        self.view.backgroundColor = [UIColor blackColor];
        
        self.contentImage = [UIImage imageNamed:@"原始图片"];
        self.maskViewContentImage = [UIImage imageNamed:@"maskLayerContents"];
        
        self.imageLayer = [CALayer layer];
        self.imageLayer.frame = CGRectMake(0, 0, 200, 200);
        self.imageLayer.contents = (id)self.contentImage.CGImage;
        
        self.maskViewLayer = [CALayer layer];
        self.maskViewLayer.frame = CGRectMake(-200, -200, 200, 200);
        self.maskViewLayer.contents = (id)self.maskViewContentImage.CGImage;
        
        // self.imageLayer的局部区域的显示与否可以通过mask的alpha通道来决定
        self.imageLayer.mask = self.maskViewLayer;
        
        [self.view.layer addSublayer:self.imageLayer];
        
    }
    
    - (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
    {
        self.maskViewLayer.frame = self.imageLayer.bounds;
    }

    github:https://github.com/RinpeChen/maskViewInCALayer

  • 相关阅读:
    VMware下Linux配置网络
    前端知识之查漏补缺二
    前端网络基础查漏补缺篇
    简单实现Promise
    前端知识之查漏补缺-1
    git tag
    云服务器安装node环境 mysql nginx
    js动画
    vue原理之双向绑定虚
    js的封装、继承与多态
  • 原文地址:https://www.cnblogs.com/Rinpe/p/5147617.html
Copyright © 2011-2022 走看看