CodeV

1.9-画家模型

发表于

iOS使用画家模型在上下文中绘制。除非另有指定，否则所有新的绘制操作都将添加到现有图形的顶部。这类似于画家将颜料物理地添加到画布上的方式。你可以通过覆盖新的绘图操作来修改上下文。

清单 1-8 演示了这个模型。它的代码构建了两个圆形贝塞尔曲线路径。 左边的一个绘制成紫色，然后绘制右边一个成绿色。结果如图1-6 所示，绿色圆圈重叠并遮盖住了原始紫色图形的一部分。

图1-6

图 1-6 绿色圆圈在紫色圆圈之后绘制，覆盖了原始紫色绘图的一部分。

Note

本章中的示例代码涉及了两个UIColor实例变量:greenColor和purpleColor。它们不是UIKit提供的标准颜色值。它们源于在撰写本书时所使用的暂定的封面色彩，绿色RGB值为（125,162,63），紫色值为（99,62,162）。
有兴趣进一步探索iOS的颜色吗？访问http://github.com/erica/uicolor-utilities。

清单 1-8 绘制重叠的圆

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
- (UIImage *) buildImage {
	// Create two circular shapes
	
	CGRect rect = CGRectMake(0, 0, 200, 200);
	
	UIBezierPath *shape1 = [UIBezierPath bezierPathWithOvalInRect:rect];
	
	rect.origin.x += 100;
	
	UIBezierPath *shape2 = [UIBezierPath bezierPathWithOvalInRect:rect];
	
	UIGraphicsBeginImageContext(CGSizeMake(300, 200));

	// First draw purple
	[purpleColor set];
	[shape1 fill];

	// Then draw green
	[greenColor set];
	[shape2 fill];

	UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
	UIGraphicsEndImageContext();
	return image;
}

如果颠倒这个绘图顺序，先绘制shape2，然后绘制shape1，可以得到如图 1-7 所示的结果。虽然位置和颜色与图1-6中的位置和颜色相同，但是紫色的形状是第二个绘制的，它遮盖了绿色圆圈的一部分。最近绘制的颜料会被添加到画布的现有内容之上。

图1-7

图 1-7 颠倒绘制顺序会使紫色圆圈遮住部分绿色圆圈。

半透明

绘图时，半透明在绘画时起着重要的作用。调整紫色的alpha分量会改变绘制操作得到的结果。这里，紫色颜色的半透明度设置为其正常值的一半：

1
purpleColor = [purpleColor colorWithAlphaComponent:0.5f];

图 1-8 显示了绘制带有调整alpha值的紫色圆的结果。虽然紫色仍然覆盖绿色的形状，它的半透明允许你透过它看到首先绘制的绿色。

图1-8

图 1-8 使用部分半透明的紫色使您能够看到紫色图形“后面”的绿色形状。

正如你即将看到的，虽然绘画的“规则”可以以编程方式改变，但是有一点保持不变：你绘制到上下文中的新的源材料总是影响已经存在的任何上下文，而不管应用的数学原理是什么。即使在使用混合模式（例如“目的地顶部”）时也是如此，其中新绘制的源材料仅绘制到尚未由上下文数据填充的清晰区域中。

关键在于理解你添加的源，无论是一个形状，线，或图像，以及你正在绘制的目的地（由上下文表示）。绘图程序的叠加属性使您能够一次放置一个绘图元素，迭代地构建到您正在处理的目标，就像画家在现实世界的画布上绘制一样。

本文翻译自《iOS Drawing Practical UIKit Solutions》作者：Erica Sadun，翻译：Cheng Dong。如果觉得本书不错请购买支持正版:亚马逊购买传送门，本书所有源代码可在GitHub上下载。译者虽然力求做到信，达，雅，但是由于时间仓促加之译者水平十分有限，文中难免会出现不正确，不准确，词不达意，难于理解的地方，还望各位批评指正，共同进步，谢谢。转载请注明出处。