用于mask遮罩效果的图片配合resizableImage使用

简介:

用于mask遮罩效果的图片配合resizableImage使用

效果:

作为素材用的图片:

源码:

//
//  ViewController.m
//  Rect
//
//  Created by YouXianMing on 15/3/29.
//  Copyright (c) 2015年 YouXianMing. All rights reserved.
//

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
 
    // 背景图
    UIImageView *bgView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"psb.jpeg"]];
    bgView.frame        = CGRectMake(0, 0,
                                     bgView.frame.size.width / 2.f,
                                     bgView.frame.size.height / 2.f);
    bgView.center       = self.view.center;
    [self.view addSubview:bgView];
    
    // 作为mask用的图片
    UIImage *maskImage   = [UIImage imageNamed:@"rect_new"];
    maskImage            = [maskImage resizableImageWithCapInsets:UIEdgeInsetsMake(13, 13, 13, 13)
                                                     resizingMode:UIImageResizingModeTile];
    
    // 作为mask用的view
    UIImageView *maskView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
    maskView.image        = maskImage;
    bgView.maskView       = maskView;
    
    
    // 执行动画
    [UIImageView animateWithDuration:3.f animations:^{
        maskView.frame = bgView.bounds;
    }];
}

@end

需要注意的细节:

这对于做alpha通道的渐变效果十分便利。

 

目录
相关文章
Fireworks如何给图片添加阴影效果? fw给图片增加阴影效果的技巧
有时需要给图片添加阴影效果。那么,Fireworks软件中如何给图片添加阴影效果呢?
layer弹出图片大小自适应
layer弹出图片大小自适应
135 0
|
小程序 UED
微信小程序轮播图image控件图片mode属性自适应及解决图片加载闪烁bug
微信小程序轮播图image控件图片mode属性自适应及解决图片加载闪烁bug
404 0
|
小程序 JavaScript
微信小程序 - image 宽高自适应(图片无法自适应撑开标签)
微信小程序 - image 宽高自适应(图片无法自适应撑开标签)
726 0
|
小程序 容器
【微信小程序】image组件的4种缩放模式与9种裁剪模式
假设有一个容器(这个容器的宽高就是设置的样式),要将图片放进去。而aspectFit的特点就是保持图片不变形,且容器要“刚好”将这个图片装进去。如果原始图片比容器大,就要被等比例缩小;如果原始图片比容器小,就会被等比例放大。一直放大或缩小到图片的某一条边刚好和容器的一条边重合。
1413 0
|
移动开发
【笔记】h5页面img标签变形,无法完美适配
h5页面img标签变形,无法完美适配
221 0
|
存储 Swift
Swift - Cell自适应+代码约束(SnapKit)横竖屏支持平铺+根据URL获取图片size
Swift - Cell自适应+代码约束(SnapKit)横竖屏支持平铺+根据URL获取图片size
223 0
|
JavaScript 前端开发
利用 clip-path 实现动态区域裁剪
利用 clip-path 实现动态区域裁剪
262 0
利用 clip-path 实现动态区域裁剪
|
Android开发
【Android 应用开发】Paint 渲染 之 BitmapShader 位图渲染 ( 渲染流程 | CLAMP 拉伸最后像素 | REPEAT 重复绘制图片 | MIRROR 绘制反向图片 )(二)
【Android 应用开发】Paint 渲染 之 BitmapShader 位图渲染 ( 渲染流程 | CLAMP 拉伸最后像素 | REPEAT 重复绘制图片 | MIRROR 绘制反向图片 )(二)
309 0
【Android 应用开发】Paint 渲染 之 BitmapShader 位图渲染 ( 渲染流程 | CLAMP 拉伸最后像素 | REPEAT 重复绘制图片 | MIRROR 绘制反向图片 )(二)
|
前端开发 Android开发
【Android 应用开发】Paint 渲染 之 BitmapShader 位图渲染 ( 渲染流程 | CLAMP 拉伸最后像素 | REPEAT 重复绘制图片 | MIRROR 绘制反向图片 )(一)
【Android 应用开发】Paint 渲染 之 BitmapShader 位图渲染 ( 渲染流程 | CLAMP 拉伸最后像素 | REPEAT 重复绘制图片 | MIRROR 绘制反向图片 )(一)
422 0