解决圆角离屏渲染方案

最近看了大量的优化tableview方案,为了配合sd下载图片,并且解决圆角图片离屏渲染问题,于是利用category自己写了个处理圆角的方法,解决了离屏渲染问题(并不是非常高效,感觉只是降低了GPU的消耗,但是提升了CPU的消耗,但是好歹也算是能提高一点fps),我还是更推荐使用yyimage下载图片,里面封装了处理圆角图片方法。

下面是代码:

//
//  UIImageView+CornerRadius.m
//  test
//
//  Created by gkoudai_xsm on 16/4/11.
//  Copyright © 2016年 gkoudai_xsm. All rights reserved.
//
#import <objc/runtime.h>
#import "UIImageView+CornerRadius.h"

static NSString * const kIsRounding = @"kIsRounding";
static NSString * const kHadAddObserver = @"kHadAddObserver";
static NSString * const kProcessedImage = @"kProcessedImage";

@interface UIImageView ()

//在category里添加属性  自己实现get和set方法  objc_getAssociatedObject/objc_setAssociatedObject
@property (nonatomic ,assign)BOOL isRounding;
@property (nonatomic ,assign)BOOL hadAddObserver;

@end

@implementation UIImageView (CornerRadius)
//public method
- (instancetype)initWithRoundingRectImageView{
    self = [super init];
    if (self) {
        [self roundingRect];
    }
    return self;
}

- (void) roundingRect {

    self.isRounding = YES;
    if (!self.hadAddObserver) {
        //添加个kvo
        [self addObserver:self forKeyPath:@"image" options:NSKeyValueObservingOptionNew context:nil];

        self.hadAddObserver = YES;
    }
}

#pragma mark - KVO
- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSString *,id> *)change context:(void *)context{

    if ([keyPath isEqualToString:@"image"]) {
        UIImage *newImage = change[NSKeyValueChangeNewKey];
        if ([newImage isMemberOfClass:[NSNull class]]) { //判断是否为空
            return;

        } else if ([objc_getAssociatedObject(newImage, &kProcessedImage) intValue] == 1) {
            //新图 判断处理
            return;
        }
        if (self.isRounding) {

            [self roundingRectWithImage:newImage cornerRadius:self.frame.size.width/2];
        }
    }
}

#pragma mark - 处理图片
- (void)roundingRectWithImage:(UIImage *)image cornerRadius:(CGFloat)cornerRadius {

    CGSize size = self.bounds.size;
    CGFloat scale = [UIScreen mainScreen].scale;
    CGSize cornerRadii = CGSizeMake(cornerRadius, cornerRadius);

    // //获得用来处理图片的图形上下文,设置no为不透明
    UIGraphicsBeginImageContextWithOptions(size, NO, scale);

    if (nil == UIGraphicsGetCurrentContext()) {
        return;
    }
    //针对某个角画圆形区域
    UIBezierPath *roundingPath = [UIBezierPath bezierPathWithRoundedRect:self.bounds byRoundingCorners:UIRectCornerAllCorners cornerRadii:cornerRadii];
    // 添加裁剪
    [roundingPath addClip];
    // 边框线宽
    roundingPath.lineWidth = 0.1;

    [image drawInRect:self.bounds];
    // 开始画
    [roundingPath stroke];

    //从当前上下文中获取一个UIImage对象
    UIImage *processedImage = UIGraphicsGetImageFromCurrentImageContext();

    //关闭图形上下文
    UIGraphicsEndImageContext();

    //关联一个处理的图片
    objc_setAssociatedObject(processedImage, &kProcessedImage, @(1), OBJC_ASSOCIATION_RETAIN_NONATOMIC);

    self.image = processedImage;
}

#pragma mark - Property

- (BOOL)hadAddObserver {

    return [objc_getAssociatedObject(self, &kHadAddObserver) boolValue];
}

- (void)setHadAddObserver:(BOOL)hadAddObserver {

    objc_setAssociatedObject(self, &kHadAddObserver, @(hadAddObserver), OBJC_ASSOCIATION_RETAIN_NONATOMIC);
}

- (BOOL)isRounding {
    return [objc_getAssociatedObject(self, &kIsRounding) boolValue];
}

- (void)setIsRounding:(BOOL)isRounding {
    objc_setAssociatedObject(self, &kIsRounding, @(isRounding), OBJC_ASSOCIATION_RETAIN_NONATOMIC);
}

#pragma mark - dealloc
- (void)dealloc{

    if (self.hadAddObserver) {

        [self removeObserver:self forKeyPath:@"image"];
    }

}
@end
时间: 05-17

解决圆角离屏渲染方案的相关文章

echarts解决一些大屏图形配置方案汇总

本文主要记录使用echarts解决各种大屏图形配置方案. 1.说在前面 去年经常使用echarts解决一些可视化大屏项目,一直想记录下使用经验,便于日后快速实现.正好最近在整理文档,顺道一起记录在博客中.详见:http://webhmy.com/2018/06/23/echarts/ 2.基本使用 Echarts3.0是通过配置实现图形的,根据不同的配置或者组合配置生成想要的图形.后面主要介绍options中的配置内容. setOption // dom表示对应的dom节点,必须指定宽高 var

【iOS沉思录】UIImage圆角矩形的‘离屏渲染’和‘在屏渲染’实现方法

iOS中为view添加圆角效果有两种方式,一种基于"离屏渲染"(off-screen-renderring),直接设置view的layer层参数即可简单实现,也很常用,但性能较低:另一种则是编写底层图形代码,实现'在屏渲染'(on-screen-renderring),可以大大优化绘制性能. iOS中圆角效果实现的最简单.最直接的方式,是直接修改View的layer层参数: /* 设置圆角半径 */ view.layer.cornerRadius = 5; /* 将边界以外的区域遮盖住

腾讯优测优分享 | 探索react native首屏渲染最佳实践

腾讯优测是专业的移动云测试平台,旗下的优分享不定时提供大量移动研发及测试相关的干货~此文主要与以下内容相关,希望对大家有帮助. react native给了我们使用javascript开发原生app的能力,在使用react native完成兴趣部落安卓端发现tab改造后,我们开始对由react native实现的界面进行持续优化.目标只有一个,在享受react native带来的新特性的同时,在体验上无限逼近原生实现.作为一名前端开发,本文会从前端角度,探索react native首屏渲染最佳实

移动端高清、多屏适配方案

移动端高清.多屏适配方案 背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范往往会遵循以下两点: 首先,选取一款手机的屏幕宽高作为基准(以前是iphone4的320×480,现在更多的是iphone6的375×667). 对于retina屏幕(如: dpr=2),为了达到高清效果,视觉稿的画布大小会是基准的2倍,也就是说像素点个数是原来的4倍(对i

探索react native首屏渲染最佳实践

1.前言 react native给了我们使用javascript开发原生app的能力,在使用react native完成兴趣部落安卓端发现tab改造后,我们开始对由react native实现的界面进行持续优化.目标只有一个,在享受react native带来的新特性的同时,在体验上无限逼近原生实现.作为一名前端开发,本文会从前端角度,探索react native首屏渲染最佳实践. 2.首屏耗时计算方法 2.1我们关注的耗时 优化首屏渲染耗时,需要先定义首屏耗时的衡量方法.将react nat

离屏渲染优化

离屏渲染(Offscreen Render) objc.io 出品的 Getting Pixels onto the Screen 的翻译版绘制像素到屏幕上应该是国内对离屏渲染这个概念推广力度最大的一篇文章了.文章里提到「直接将图层合成到帧的缓冲区中(在屏幕上)比先创建屏幕外缓冲区,然后渲染到纹理中,最后将结果渲染到帧的缓冲区中要廉价很多.因为这其中涉及两次昂贵的环境转换(转换环境到屏幕外缓冲区,然后转换环境到帧缓冲区).」触发离屏渲染后这种转换发生在每一帧,在界面的滚动过程中如果有大量的离屏渲

[ios]离屏渲染优化

原文链接:https://mp.weixin.qq.com/s?__biz=MjM5NTIyNTUyMQ==&mid=2709544818&idx=1&sn=62d0d2e9a363d250beb2d6887dca54b3&scene=0&key=b28b03434249256bb3a6b7bd2f2cbe21550293fa9af7ff8669e50331f9be4207e196edd9757d3c09338a394b4dfefce6&ascene=1&a

离屏渲染

layout: post title: iOS 离屏渲染 认知 date: 2016-05-14 23:14:30.000000000 +09:00 离屏渲染obj中国 文章内容主要来自 seedante 1.什么是离屏渲染 obj 中国有一篇文章专门提到了离屏渲染的问题,文章中提到?直接将图层合成到当前显示屏幕的帧缓冲区中,比先在屏幕外面创建新的缓冲区,然后渲染到纹理中,最后将结果渲染到当前显示屏幕的帧缓冲区中,性能要好的多? 主要原因是环境切换 * 转换环境到屏幕外缓冲区* 转换屏幕到帧缓冲

【原创】移动端高清、多屏适配方案

移动端高清.多屏适配方案 背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范往往会遵循以下两点: 首先,选取一款手机的屏幕宽高作为基准(以前是iphone4的320×480,现在更多的是iphone6的375×667). 对于retina屏幕(如: dpr=2),为了达到高清效果,视觉稿的画布大小会是基准的2倍,也就是说像素点个数是原来的4倍(对i