CodeV

7.5-绘制反射

发表于

绘制反射时，您可以绘制一个轻轻消失的倒影图像。 图7-6显示了这种常见的技术。 我添加了一个轻微的垂直间距，以突出显示原始图像在哪里结束以及反射的图像（在哪里）开始。 大多数绘制反射的图像使用这个间隙来模拟源图像和其下面的反射表面之间的高程差。

图7-6

图7-6渐变使您可以（绘制）褪色反射。Public domain images courtesy of the National Park Service.

清单7-5显示了构建此翻转镜像的函数。 这个实现有几件事情要注意：

  • 上下文在反射开始点垂直翻转。 这使得反射能够反向绘制，从底部开始，靠近灌木丛，并向上移动经过熊头。
  • 与以前的蒙版示例不同，清单7-5使用了一个矩形参数来限制蒙版和图像绘制。 这使您能够在更大的上下文中将反射绘制为矩形。
  • CGContextClipToMask()函数的应用略微不同于清单7-2。 该函数不是将灰阶图像蒙版传递给第三个参数，而是传递正常的带有Alpha通道的RGB图像。 当以这种方式使用时，图像用作alpha蒙版。 来自图像的Alpha级别决定了剪切区域的哪些部分受到新的更新的影响。 在这个例子中，绘制的反转图像从上到下渐失。

清单7-5构建反射的图像

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// Draw an image into the target rectangle
// inverted and masked to a gradient
void DrawGradientMaskedReflection(
	UIImage *image, CGRect rect)
{
	CGContextRef context = UIGraphicsGetCurrentContext();
	if (context == NULL)
		COMPLAIN_AND_BAIL(
			@"No context to draw into", nil);
	
	// Build gradient
	UIImage *gradient = GradientImage(rect.size,
		WHITE_LEVEL(1.0, 0.5), WHITE_LEVEL(1.0, 0.0));
	
	PushDraw(^{
		// Flip the context vertically with respect
		// to the origin of the target rectangle
		CGContextTranslateCTM(context, 0, rect.origin.y);
		FlipContextVertically(rect.size);
		CGContextTranslateCTM(context, 0, -rect.origin.y);
		
		// Add clipping and draw
		CGContextClipToMask(context, rect, gradient.CGImage);
		[image drawInRect:rect];
	});
}

虽然反射提供了一个有趣的上下文剪切的例子，您不一定需要在应用程序中应用的功能。 这是因为CAReplicatorLayer类和图层蒙版也完成了这一点，加上它们提供了实时更新，所以如果视图的内容发生变化，反射也会跟着改变。 虽然您可以在Quartz中做到这一切，但有很多很好的理由反应为什么你不应该（使用Quartz）。 反射提供了这个规则的一个很好的例子。

当您专注于图像而不是视图时，您应该在Quartz中绘制反射。 反射通常构成绘图序列的一部分，而不是最终产品。

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