第二章、小实例，画字，画线，矩形，画图，动画（iOS学习笔记，从零开始。）
源代码再此下载： http://download.csdn.net/detail/hherima/5108428
本博文主要讲如何绘制文字，绘制一条直线，绘制图片，给图片添加动画。
首先，创建一个Single View Application的工程。
起名字showApp.这是一个空的工程。源文件里只有下图1中的几个源文件。
（上图1）
我们发现ViewController这个类继承自UIViewController。是MVC模式中的C，即控制类。
其次，我们添加一个V类，Myview
继承自UIView用于绘制。按照如下几个图的步骤。添加Myview类。
在ShowApp工程上右键,选择New file...,弹出下面对话框图2
（上图2）
下一步键入添加类的名字Myview图3，注意选择继承自UIView
（上图3）
下一步保存到showapp工程里如图4
（上图4）
好了，Myview已经添加到showapp工程里了。（如果Myview.h和Myview.m不在showApp文件夹下，可以拖拽到showApp文件夹下）
第三，在ViewController中初始化Myview
在ViewController.m中的viewDidLoad中添加两行代码，出事后Myview。注意在头文件处，引入#import "Myview.h"，如图5.
（上图5）
第四，添加绘制文本的代码。
在Myview.m中的drawRect函数中，添加代码如下：
/*
// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
*/
- (void)drawRect:(CGRect)rect
{
UIColor *magentaColor =
[UIColorcolorWithRed:0.5f
green:0.0f
blue:0.5f
alpha:1.0f];
/* Set the color in the graphical context */
[magentaColorset];
/* Load the font */
UIFont *helveticaBold = [UIFontfontWithName:@"HelveticaNeue-Bold"size:30.0f];
/* Our string to be drawn */
NSString *myString =@"Hellow world";
/* Draw the string using the font. The color has
already been set */
[myStringdrawAtPoint:CGPointMake(25,190)withFont:helveticaBold];
}
运行工程，模拟器就会显示Hello world了。
第五，绘制一条直线。
这里，我把绘制文本的代码放到drawMyText函数里，绘制直线的代码放到drawMyLine函数。如下所示：
*注意在头文件中声明drawMyText 和 drawMyLine两个函数。
- (void)drawMyText;
- (void)drawMyLine;
下面是源文件代码。
- (void)drawRect:(CGRect)rect
{
[selfdrawMyText];
[selfdrawMyLine];
}
- (void)drawMyText
{
UIColor *magentaColor =
[UIColorcolorWithRed:0.5f
green:0.0f
blue:0.5f
alpha:1.0f];
/* Set the color in the graphical context */
[magentaColorset];
/* Load the font */
UIFont *helveticaBold = [UIFontfontWithName:@"HelveticaNeue-Bold"size:30.0f];
/* Our string to be drawn */
NSString *myString =@"Hellow world";
/* Draw the string using the font. The color has
already been set */
[myStringdrawAtPoint:CGPointMake(25,190)withFont:helveticaBold];
}
- (void)drawMyLine
{
//draw line
CGContextRef context =UIGraphicsGetCurrentContext();//获取画布
CGContextSetStrokeColorWithColor(context, [UIColorredColor].CGColor);//线条颜色
CGContextSetShouldAntialias(context,NO);//设置线条平滑，不需要两边像素宽
CGContextSetLineWidth(context,1.0f);//设置线条宽度
CGContextMoveToPoint(context,153,6); //线条起始点
CGContextAddLineToPoint(context,153,145);//线条结束点
CGContextStrokePath(context);//结束，也就是开始画
}
一条竖直的直线已经显示到模拟器上了。
第六、绘制矩形
首先，获取上下文
CGContextRef context = UIGraphicsGetCurrentContext();
画无框矩形
- //设置矩形填充颜色：红色
- CGContextSetRGBFillColor(context, 1.0, 0.0, 0.0, 1.0);
- //填充矩形
- CGContextFillRect(context, rect);
- //执行绘画
- CGContextStrokePath(context);
画有框矩形
- //设置矩形填充颜色：红色
- CGContextSetRGBFillColor(context, 1.0, 0.0, 0.0, 1.0);
- //填充矩形
- CGContextFillRect(context, rect);
- //设置画笔颜色：黑色
- CGContextSetRGBStrokeColor(context, 0, 0, 0, 1);
- //设置画笔线条粗细
- CGContextSetLineWidth(context, 1.0);
- //画矩形边框
- CGContextAddRect(context,rect);
- //执行绘画
- CGContextStrokePath(context);
摘自：http://blog.csdn.net/onlyou930/article/details/7726399
第七、绘制图片（注意图片可能颠倒）
事先准备一个图片，例如我准备了一个图片叫1.png，放到Support Files文件夹下：
在Myview.h里添加属性。
@interface Myview : UIView
{
UIImage* image1;
}
@property (nonatomic,retain)UIImage* image1;
- (void)drawMyImage;
在Myview.m文件里，添加
@synthesize image1;
- (void)drawRect:(CGRect)rect
{
[self drawMyText];
[self drawMyLine];
[selfdrawMyImage];
}
- (void)drawMyImage
{
//draw image
CGContextRef context =UIGraphicsGetCurrentContext();//获取画布
//CGContextDrawImage(context,CGRectMake(160,0,160, 150), [image1CGImage]);
//上面这种方式，绘制出来的图片是翻转的，开始不知道。因为测试的图片都比较对称。后发发现是上下颠倒了
//下面才是正确的方法。
UIGraphicsPushContext( context );
[imagedrawInRect:imageRect];
UIGraphicsPopContext();
}
使用CGContextDrawImage绘制图片上下颠倒的原因：
在iOS的不同framework中使用着不同的坐标系 ：
UIKit － y轴向下
Core Graphics(Quartz) － y轴向上
OpenGL ES － y轴向上
UIKit是iPhone SDK的Cocoa Touch层的核心framework，是iPhone应用程序图形界面和事件驱动的基础，它和传统的windows桌面一样，坐标系是y轴向下的;
Core Graphics(Quartz)一个基于2D的图形绘制引擎，它的坐标系则是y轴向上的；
OpenGL ES是iPhone SDK的2D和3D绘制引擎，它使用左手坐标系，它的坐标系也是y轴向上的，如果不考虑z轴，在二维下它的坐标系和Quartz是一样的。
所以，当通过CGContextDrawImage绘制图片到一个context中时，如果传入的是UIImage的CGImageRef，因为UIKit和CG坐标系y轴相反，所以图片绘制将会上下颠倒。
在initWithFrame里对image1进行初始化，为1.png
- (id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
// Initialization code
image1 = [UIImageimageNamed:@"1.png"];
}
return self;
}
运行工程，就能显示图片了，如图6
第八、给图片添加动画
上面的图片显示方式直接绘制图片，下面的方式为控件方式绘制。当然，图片控件的话，就不需要我们自己绘制了，iOS的UI库已经帮助我们绘制了。
代码如下：彩色部分需要添加。
头文件部分。
@interface Myview : UIView
{
UIImage* image1;
UIImage* image2;
}
@property (nonatomic,retain) UIImage* image1;
@property (nonatomic,retain)UIImage* image2;
- (void)drawRect:(CGRect)rect;
- (void)drawMyText;
- (void)drawMyLine;
- (void)drawMyImage;
- (void)annimateImage;
@end
源文件部分
#import "Myview.h"
#import <QuartzCore/QuartzCore.h>
@implementation Myview
@synthesize image1;
@synthesize image2;
- (id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
// Initialization code
image1 = [UIImage imageNamed:@"1.png"];
image2 = [UIImageimageNamed:@"2.png"];
[selfannimateImage];
}
return self;
}
- (void)annimateImage
{
UIImageView* imageView = [[UIImageViewalloc]initWithImage:image2];
imageView.frame =CGRectMake(0,0,100,100);
[selfaddSubview:imageView];
imageView.userInteractionEnabled =YES;
UITapGestureRecognizer* singleTap =
[[UITapGestureRecognizeralloc]initWithTarget:selfaction:@selector(onImageClick)];
[imageViewaddGestureRecognizer:singleTap];
//animation
CABasicAnimation *animation = [CABasicAnimationanimationWithKeyPath:@"transform"];
animation.delegate =self;
animation.toValue = [NSValuevalueWithCATransform3D:CATransform3DMakeRotation(M_PI ,0, 0,1.0)];
animation.duration =1;
animation.cumulative =YES;
animation.repeatCount =INT_MAX;
[imageView.layeraddAnimation:animationforKey:@"animation"];
}
代码已经添加完毕，但是我们不能编译过去，因为我们使用了QuartzCore的头文件，却没有引入它的库。
怎么引入，如图7所示：点击工程：
（上图7）
点击“+”号，将QuartzCore的库引入。再次编译工程成功运行。如图8
（上图8）
上图中的太阳一直在转动，这就是我们加的动画。
源代码再此下载：http://download.csdn.net/detail/hherima/5108428
第二章、小实例，画字，画线，矩形，画图，动画（iOS学习笔记，从零开始。）相关推荐
- 微信小程序零基础入门_第二章 小程序框架_逻辑层
第二章 小程序框架_逻辑层 2.1 逻辑层 小程序开发框架的逻辑层是基于JavaScript进行编写和实现的.在开发过程中写的所有代码,最终都被整合成一份JavaScript,在小程序启动的时候开始执 ...
- 小吴的《机器学习 周志华》学习笔记 第二章 模型评估与选择
小吴的<机器学习 周志华>学习笔记 第二章 模型评估与选择 上一周我们介绍了第一章的基础概念,这一次将带来第二章的前三节.后面的2.4 比较检验与2.5 偏差与方差,涉及概率论与数理统计概 ...
- 小吴的《机器学习 周志华》学习笔记 第二章 2.4 比较检验、2.5 偏差与方差
小吴的<机器学习 周志华>学习笔记 第二章 2.4 比较检验. 2.5 偏差与方差 2.4 比较检验 上一周提到了实验的评价方法和性能量度,步骤简单可以看成:先使用某种实验评估方法测得学习 ...
- ios 线条球_画线弹球球游戏下载-画线弹球球下载iOS版-西西软件下载
画线弹球球是一款非常有趣的弹射游戏,玩家在游戏中需要利用画笔画线的方式来保持小球一直弹射不坠地,同时在游戏中过程中你还可以收集各式道具来强化自己,欢迎感兴趣的朋友前来西西下载体验! 游戏介绍 画线弹球 ...
- 小吴的《机器学习 周志华》学习笔记 第一章 绪论
小吴的<机器学习 周志华>学习笔记 第一章 绪论 近一年时间接触到不少机器学习的知识,虽然断断续续学了一些,总感觉还没有入门(只学会了疯狂调包).因此,最近开始系统学习Machine Le ...
- ctf线下AWD攻防赛学习笔记
Hello,我是普通Gopher,00后男孩,极致的共享主义者,想要成为一个终身学习者.专注于做最通俗易懂的计算机基础知识类公众号.每天推送Golang技术干货,内容起于K8S而不止于K8S,涉及Do ...
- HTML5+CSS3小实例：滚动的方块loading动画
实例:滚动的方块loading动画 技术栈:HTML+CSS 效果: 源码: <!DOCTYPE html> <html><head><meta http-e ...
- EPD画PCB——画Package(以BGA为例)学习笔记
一.画边框,做定位 根据数据手册先画出对应尺寸的边框,使用命令rec画出矩形边框. 二.创建BGA LAND 2.1添加BGA的BALL LAND,参照下图依次点击找到创建BGA LNAD的对话框. ...
- 第二章 @Entity实例里常用的注解详解
一.javax.persistence概况介绍 虽然Spring Data JPA已经帮我们对数据的操作封装得很好了, 约定大于配置思想,帮我们默认了很多东西. JPA(Java持久性API) 是存储 ...
最新文章
- python3安装pip3-python3及pip3安装
- Day 8： Harp.JS——现代静态web服务器
- 把所有的谎言献给你β（找规律数学题）
- 你认识的python有你想的那么神吗_Python的10个神奇的技巧
- scipy.optimize.fsolve：用Python求解方程的解
- 关于Retinex图像增强算法的一些新学习。
- tyvj 1391 走廊泼水节【最小生成树】By cellur925
- c#与api类型对照表
- [转]学习object－c，补习一下指针
- Java中直接输出一个类的对象
- 开发人员系统功能设计常用办公软件分享
- 〖Python零基础入门篇㉟〗- 私有函数、私有变量及封装
- 网状神经系统的典型特点,网状结构神经系统
- 云通讯这局棋，声网、容联云怎么破？
- ERNIE-ViLG文心跨模态AI绘画大模型——中文版stable-diffusion
- Moderate Modular Mode
- Spark SQL 编程初级实践
- C# Linq中 WherT 和SelectT 的区别
- 心理服务机构运营成本太高？《心理服务OA系统》来解决！
- Dataset之MNIST：MNIST(手写数字图片识别及其ubyte.gz文件)数据集简介、下载、使用方法(包括数据增强)之详细攻略