美文网首页
绘制图片

绘制图片

作者: 翻这个墙 | 来源:发表于2017-11-23 10:47 被阅读15次

drawImage(绘制图片)

通过UIImage自身方法绘制图片步骤

  1. 新建一个类,继承自UIView(略)

  2. 在-(void)drawRect:(CGRect)rect方法实现下述几步(略)

  • 加载图片

  • 设置裁剪区域

  • 通过UIImage自身方法(drawInRect方法)渲染图片到view上面

- (void)drawRect:(CGRect)rect {
// 加载图片
    UIImage *image = [UIImage imageNamed:@"阿狸头像"];

//设置裁剪区域
    // 设置裁剪区域的代码必须要在绘图之前
    // 设置裁剪区域,超出裁剪区域的部分会被裁剪掉
    UIRectClip(CGRectMake(0, 0, 150, 150));

// 绘图(UIImage的方法)
    // 绘图的时候,绘制的内容不能超过当前控件
    // Pattern:平铺
    //  [image drawAsPatternInRect:rect];

    // drawAtPoint:默认绘制的图片跟图片本身一样
    //  [image drawAtPoint:CGPointZero];

    // drawInRect:默认绘制的图片跟控件一样,拉伸跟控件一样大
    [image drawInRect:rect];

// 填充(不必要)
    // 快速的填充一个矩形
    UIRectFill(CGRectMake(0, 0, 50, 50));
}

UIImageView底层实现原理

通过UIImageView方法创建

    // 第一种方式
//    UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 200, 200)];
//    // 默认图片会拉伸成跟控件一样大
//    imageView.image = [UIImage imageNamed:@"汽水"];
//    [self.view addSubview:imageView];

    // 默认控件的尺寸跟图片一样
    UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"CTO"]];
    _imageV = imageView;
    [self.view addSubview:imageView];

模仿底层实现

  • 表面加载代码与系统提供的第二种方法一样
    FZQImageView *imageV = [[FZQImageView alloc] initWithImage:[UIImage imageNamed:@"CTO"]];
    _imageView = imageV;
    [self.view addSubview:imageV];
底层实现
在FZQImageView.h中
@interface FZQImageView : UIView
//提供加载方法
- (instancetype)initWithImage:(UIImage *)image;
//设置图片属性
@property (nonatomic, strong) UIImage *image;
@end
在FZQImageView.m中
@implementation FZQImageView
- (instancetype)initWithImage:(UIImage *)image
{
    if (self = [super init]) {
        self.frame = CGRectMake(0, 0, image.size.width, image.size.height);
        // 赋值并绘图
        _image = image;
    }
    return self;
}
//重写set方法,每次赋值时重绘
- (void)setImage:(UIImage *)image
{
    _image = image;

    //核心代码
    [self setNeedsDisplay];
}

// 绘制图片到view中(核心代码)
- (void)drawRect:(CGRect)rect {
    [_image drawInRect:rect];
}
@end

相关文章

  • Quartz2D 绘图

    绘制文字 绘制图片 裁剪圆形图片

  • canvas - 绘制图片

    canvas - 图片绘制 1、 按照图片原大小加载 注意: 必须要保证图片加载完毕后,再绘制图片(绘制写在on...

  • 15文字图片绘制

    1、文字绘制 2、图片绘制

  • H5 新特性02

    anvas 绘制图片 基础绘制 drawImage(img, x, y) 绘制图片设置大小 dra...

  • Quartz2D之绘制图片和文字

    绘制文字和图片 绘制文字 根据需要给富文本设置很多属性 绘制图片

  • canvas绘制图片

    绘制图片 按图片原大小绘制var context = document.getElementById("canva...

  • canvas绘制图片

    绘制图片,要求图片必须在加载完成之后。drawImage(img,x,y)图片有多大绘制多大;drawImage(...

  • 绘制图片

    最简单的图片绘制程序 动态合图原理分析 如果多个图片一个drawCall完成绘制,其原理就是将要绘制的图片,统一绘...

  • Canvas使用方法总结

    引入Canvas标签 绘制直线 绘制矩形 绘制圆弧 绘制文本 绘制图片 我的github:https://gith...

  • 自定义View示例-05 仿红板报翻页效果

    1.效果图 2.思路分析 2.1 绘制图片 2.2 绘制图片折叠效果 2.3 绘制图片旋转折叠效果 2.4 添加动...

网友评论

      本文标题:绘制图片

      本文链接:https://www.haomeiwen.com/subject/wjzavxtx.html