专注收集记录技术开发学习笔记、技术难点、解决方案
网站信息搜索 >> 请输入关键词:
您当前的位置: 首页 > 图形/图像

Cocoa 图形开发引见

发布时间:2011-06-27 20:26:09 文章来源:www.iduyao.cn 采编人员:星星草
Cocoa 图形开发介绍

 

转载:http://www.sinomac.com/downloads/jeff/cocoa14/14.pdf

http://blog.csdn.net/suoxd123/article/details/5210428

Programming With Cocoa (14)

Cocoa图形介绍

在本系列前一阶段,我主要讨论了如何使用Cocoa来编写用户界面。我还介绍了面向对象编程(OOP)的基本概念,以及在程序中最经常使用的Cocoa类。今

天,我们开始把重点转向Cocoa的画图和二维图形处理上。我们今天会做一个小小的起步,讨论如何在窗口中绘制简单的图形

在以后的章节中,我将会涉及绘制更复杂的图形,实现动画,以及处理原始图象数据。在此之前,让我们从最基本开始

矩形,大小和点

矩形,大小和点代表了三种Cocoa的数据类型,其实不过是C的结构而已。他们分别是NSRect,NSSize,和NSPoint。

NSPoint(或者简单说,一个“点”),是三种数据类型中最基本的,所以我们先讨论它。Cocoa中的一个点是存储了一对坐标的变量,它是用x和y值来表示点

在我们绘图平面中的坐标。我们迟些会更深入地讨论绘图平面,不过平面的意思是我们绘图的面的坐标系是笛卡儿坐标系,这我们应该在几何学中学过。平面

的原点(0, 0)在你绘图平面的左下角,正的x值表示在它的右方,正的y值表示在它的上方。在这个系统中,一个距离单位为你屏幕上的一个象素,记住这一

点,以便以后可以想象你画的图在屏幕上的大小。

好,那点究竟是怎么样?在Cocoa中怎么表示他们?NSPoint是一个C的结构,它的定义是:

typedef struct _NSPoint{

float x;

float y;

} NSPoint;

如果你对C不熟悉的话,下面是简单的解释。typedef语句是定义一种新的数据类型,NSPoint,它和_NSPoint这个结构类型是一样的。所以,当我们说

到NSPoint的时候,就相当于说到上面的这个结构。如果你对C的结构不熟悉,那么你最好能够看看你喜欢的C的介绍,以获得一些这方面的知识。

要初始化一个NSPoint变量,我们使用一个基础库的函数NSMakePoint。它有两个参数,分别代表一个点的x值和y值,并返回一个按这两个值初始化

的NSPoint变量。下面的一行代码显示如何使用:

NSPoint p = NSMakePoint (10, 45) ;

要使用这些变量(NSPoint,NSRect和NSSize),你要知道如何访问结构的成员。换句话说,给定一个NSPoint变量,我们怎么决定这个点的x坐标和y坐标

呢?答案是句点操作符。句点操作符用!!"量.成#名称的语法来访问结构中的成员。

例如,如果你想从一个NSPoint结构变量中获得x和y坐标值,我们可以按下面的办法做:

float xCoord = p.x;

float yCoord = p.y;

如果是按照我们前面说的那个点,那么xCoord的值是“10”,yCoord的值是“45”。现在我们讲完NSPoint了,让我们看看NSRect和NSSize,他们是我们会经

常用到的另外两个数据类型。

NSRect

NSRect(或者简单地说,“矩形”)是在基础框架中定义的另外一个数据类型。“矩形”在画图区中定义了一个矩形区域。它不属于一种图形,但它定义一个图形

的я界。比如说,窗口的я界,绘图区的я界,填充颜色的区域或其它类似的东西。矩形由它的原点和大小所决定,大小其实就是它的宽和高。在基础库使用

指南中关于NSRect的正式定义是:

typedef struct _NSRect {

NSPoint origin;

NSSize size;

} NSRect;

origin是一个NSPoint类型的对象,它指明了矩形的左下角位置。NSSize是一个简单的结构,其成员是矩形的宽和高数值。NSSize的定义如下:

typedef struct _NSSize {

float width;

float height;

} NSSize;

要创建一个矩形,我们使用基础库函数NSMakeRect,它有四个参数:原点的x和y坐标,宽度,高度。如果我们想要创建一个NSRect变量,我们可以这样做

NSRect r = NSMakeRect(10, 10, 100, 150);

这会创建一个原点为(10, 10),宽100,高150的矩形。这样的话,矩形的右上角将是点(110, 160)。

由于NSRect的成员也是结构变量,所以我们要使用两次句点操作符来访问到矩形的最底层信息。例如,要获得我们上面创建的矩形的x坐标值,我们要这样做

float xOrigin = r.origin.x;如果我们要知道矩形的高,我们可以类似地这么做:

float width = r.size.width;

在我们掌握了关于Cocoa绘图中数据类型的基本知识以后,让我们看看如何绘制图形。

画布和画刷

明白Cocoa绘图原理的一种有用的方法是想象你是怎么画画的。你要有一个来画东西上去,同时你需要一个东西来画——换句话说,就是一张画布和一支画

笔。在Cocoa中,画布就是NSView类,画笔就是NSBezierPath类。让我们先看看如何在PB和IB中设置我们的画布,然后我们在深入到真正画画的有趣部

分。

设置画布

正如我们前面说过的,Cocoa的画布是NSView类。它提供定义屏幕上画图区域,以及绘图背后所需要的机制。NSView是一个很庞大的类,要详细叙述它的内

部工作机制,就要复制苹果的全部的优秀文档,这样会使这篇文章非常非常的Ӑ。所以,我建议你阅读NSView类的文档以获得这个类的细节认识,而这里我们

只谈怎么使用它。

我们不会直接和一个NSView的实例打交道,它是一个抽象类。我们要生成NSView的一个子类,并把我们的画图代码添加到这个子类中,并操作这个子类。PB

提供了创建NSView子类的框架的办法。

首先我们要做的是创建一个新的项目。把它称为:CocoaDrawing。在新项目打开以后,在文件菜单中选择“新建文件”。然后在新建文件对话框中选

择“Objective-C NSView subclass”作为你要创建的文件的类型。选择“然后”按钮,并把你新的文件命名为CocoaDrawing.m。确定已经选择同时创

建CocoaDrawing.h。选择“结束”按钮,你就有了一个NSView的类文件。

下一步是让你的程序知道我们的NSView的子类。这通过IB来完成。通过双击MainMenu.nib打开IB。保持IB打开,我们要耍一个小花招来把我们的新

类,CocoaDrawing,添加到IB已知的类中间去。我们把CocoaDrawing.h这个文件从PB的项目窗口中拖到IB的实例面板上。

这样就会把我们的新类,CocoaDrawing填加到如下图所示的类面板中。这种添加类到IB中的方法适用于你在PB中创建的任何类。事实上,这就是我们在IB

产生的代码中看到IBOutlet和IBAction这些标记的原因,它使得IB可以识别任何插座和动作。(译者:这里有一个小陷阱,在拖动之前需要保存你创建的

文件。但是,如果你没有对系统创建的文件进行过修改过的话,那么文件是不会真正保存的,拖动也就不成功了。所以,如果你暂时不知道要写些什么代码的

话,那么就改动一下注释里面的版本信息吧)。

下一步是拖一个CustomView容器到我们程序窗口中。在Cocoa容器(Containers)面板中,把一个定制视图(Custom View)对象拖到窗口上。

在CustomView被选中的情况下,打开Show Info面板,在属性下(应该是定制类,Custom Class下)你会在类列表中找到CocoaDrawing。选中它以后,

你会看到定制视图的标题变为CocoaDrawing。现在我们已经搞定了,下面要学习Cocoa的画笔了。在IB中保存你的改动,返回PB,并进入下一段。画笔

我们在Cocoa中的画笔是应用库中的NSBezierPath(贝塞尔路径)类。和NSView类似,NSBezierPath也是一个有许多精巧功能的类。很不幸的,我们

今天只能看到它表面的一小层,但我们以后会更深入的了解它

贝塞尔路径是用一系列直线和曲线来描述图形的对象。例如,一个Ӑ方形可以描述为四段直线。通过贝塞尔路径,你可以创建任意复杂的图形。在视图中绘制

一个图形的过程是首先创建一个路径,然后填充或者勾勒它。我们很快就会看到他们的例子。

我们写的所有绘图代码都通过drawRect:这个方法完成。对那些有Java二维绘图经验的人来说,drawRect:类似于paint()。这个方法的参数是要绘制的

矩形范围。

通常我们并不直接调用drawRect:。而是在视图中发生了一些改变需要重绘的时候,会告诉视图它需要被重绘。今天,我们并不需要告诉视图重绘它自己,

但在后面的章节我们需要这样做。

我们今天要做的只是简单地画一些Ӑ方形和椭圆,它们在代码上几乎是一样的。我们主要使用的两个方法是简便构造

器+bezierPathWithRect:和+bezierPathWithOvalInRect:。让我们先看看第一个例子是怎么回事。

在drawRect:这个方法中,我们加入下面的代码:

- (void)drawRect:(NSRect)rect

{

NSRect r = NSMakeRect(10, 10, 50, 60);

NSBezierPath *bp = [NSBezierPath bezierPathWithRect:r];

NSColor *color = [NSColor blueColor];

[color set];

[bp fill];

}

在第一行,我们定义了要成为贝塞尔路径的矩形范围。跟着,我们沿着矩形的周я建立一个贝塞尔路径对象。再下一行,我们创建一种将要用来填充矩形的色

彩,接下来,通过NSColor类的set方法设置当前和以后的绘图色彩。[color set]这个消息告诉后台图形引擎所有绘图操作的颜色是蓝色(由对象的颜色

指定)。最后,我们向贝塞尔路径对象发送一个填充指令,从而按照我们指定的颜色填充路径。这段代码应该可以产生下面的输出:

我们也可以把最后一行改为:[bp stroke],这样会沿着路径产生线条,就好象下面一样:现在,如果我们把产生贝塞尔路径的代码(第二行),改为:

NSBezierPath *bp = [NSBezierPath bexierPathWithOvalInRect:r];

这样屏幕上画出的图形将是一个在指定的矩形范围内的椭圆,就好象下图一样:

另外一种画矩形的办法是用基础函数NSRectFill,它以一个矩形结构变量作为参数。这个操作的颜色是当前图形环境的颜色。例如,我们可以把第一个例子

从使用NSBezierPath改为如下的代码:

- (void)drawRect:(NSRect)rect

{

NSRect r = NSMakeRect(10, 10, 50, 60);

NSColor *color = [NSColor blueColor];

[color set];

NSRectFill(r);

}

NSRectFill是绘制视图背景颜色的简便的办法。我们可以先设置背景色为当前颜色,然后把drawRect:的参数rect传递给NSRectFill。回到我们前面

的例子,我们可以用下面的办法把背景设为黑色:

- (void)drawRect:(NSRect)rect

{

NSRect r;

NSBezierPath *bp;

[[NSColor blackColor] set];

NSRectFill(rect);

r = NSMakeRect(10, 10, 50, 60);

bp = [NSBezierPath bezierPathWithRect:r];

[[NSColor blueColor] set];

[bp fill];

}

在这个例子中,我没有使用color这个变量,而是直接向[NSColor blueColor]返回的对象发送set消息。这段代码产生下面的输出:

这段给视图背景涂色的代码的原理是,当drawRect:被视图自动调用的时候,视图的я界将作为rect参数传递过来。另外一个需要注意的是,背景绘制的代

码必须在其他绘图代码之前。这是因为新绘制的对象是绘于原有的对象之上的。

结束语

我们已经介绍了Cocoa绘图类创建图形的主要形式,并不是很复杂。在下一章,我们将继续我们的图形和绘图的讨论,学习如何产生复杂的路径。在此之前,

享受一下你今天学到的内容,实验一下实现你自己的想法。我留给你一个可以在屏幕上随机生成矩形和椭圆的程序,就象下图一样。这是一个很简单的程序,

在绘图方面,没有使用我们今天的内容之外的知识。它可以在这里下载。下次见!

友情提示:
信息收集于互联网,如果您发现错误或造成侵权,请及时通知本站更正或删除,具体联系方式见页面底部联系我们,谢谢。

其他相似内容:

热门推荐: