CodeV

6.10-构建内凹图形

发表于

代码清单6-8对渐变应用了不同的扭曲，如图6-16所示。 此函数使用暗到明渐变来产生“内凹”路径效果。 一对阴影 - 顶部的黑色内部阴影和底部的白色阴影 - 增加了错觉。 结合渐变和一个小斜角，他们欺骗你的眼睛看到一个“切割”的形状。

图6-16

图6-16顶部：渐变加强了这个图像的“内凹”外观。 底部：渐进的内凹，一步一步。

代码清单6-8内凹图形

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
27
28
29
30
31
void DrawIndentedPath(UIBezierPath *path,
	UIColor *primary, CGRect rect)
{
	CGContextRef context = UIGraphicsGetCurrentContext();
	if (!context) COMPLAIN_AND_BAIL(@"No context to draw to", nil);
	
	// Draw the black inner shadow at the top
	PushDraw(^{
		CGContextSetBlendMode(UIGraphicsGetCurrentContext(),
			kCGBlendModeMultiply);
		DrawInnerShadow(path, WHITE_LEVEL(0, 0.4),
			CGSizeMake(0, 2), 1);
	});
	
	// Draw the white shadow at the bottom
	DrawShadow(path, WHITE_LEVEL(1, 0.5), CGSizeMake(0, 2), 1);
	
	// Create a bevel effect
	BevelPath(path, WHITE_LEVEL(0, 0.4), 2, 0);
	
	// Draw a gradient from light (bottom) to dark (top)
	PushDraw(^{
		[path addClip];
		CGContextSetAlpha(UIGraphicsGetCurrentContext(), 0.3);
		
		UIColor *secondary = ScaleColorBrightness(primary, 0.3);
		Gradient *gradient = [Gradient
			gradientFrom:primary to:secondary];
		[gradient drawBottomToTop:path.bounds];
	});
}

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