啥也不說先上個效果圖
Paste_Image.png
這個效果寫起來挺簡單眶拉,主要運用下面幾個知識點
-
layer
的mask
: 圖層蒙版 -
layer
的shadowPath
: 繪制自定義形狀陰影 -
UIBezierPath
:繪制六邊形路線
說完知識點下面上代碼了
- 繪制六邊形的路線
-(CGPathRef)getCGPath:(CGFloat)viewWidth{
UIBezierPath * path = [UIBezierPath bezierPath];
path.lineWidth = 2;
[[UIColor whiteColor] setStroke];
[path moveToPoint:CGPointMake((sin(M_1_PI / 180 * 60)) * (viewWidth / 2), (viewWidth / 4))];
[path addLineToPoint:CGPointMake((viewWidth / 2), 0)];
[path addLineToPoint:CGPointMake(viewWidth - ((sin(M_1_PI / 180 * 60)) * (viewWidth / 2)), (viewWidth / 4))];
[path addLineToPoint:CGPointMake(viewWidth - ((sin(M_1_PI / 180 * 60)) * (viewWidth / 2)), (viewWidth / 2) + (viewWidth / 4))];
[path addLineToPoint:CGPointMake((viewWidth / 2), viewWidth)];
[path addLineToPoint:CGPointMake((sin(M_1_PI / 180 * 60)) * (viewWidth / 2), (viewWidth / 2) + (viewWidth / 4))];
[path closePath];
return path.CGPath;
}
- 繪制一個六邊形的layer,并把image 賦值到contents 上
CGRect hexagnoRect = self.bounds;
//繪制一個六邊形的layer为流,并復制一個image給他的contents
CALayer *hexagonLayer = [CALayer layer];
hexagonLayer.frame = hexagnoRect;
CAShapeLayer * shapLayer = [CAShapeLayer layer];
shapLayer.lineWidth = 1;
shapLayer.strokeColor = [UIColor whiteColor].CGColor;
shapLayer.path = [self getCGPath:hexagnoRect.size.width-20];
hexagonLayer.mask = shapLayer;
hexagonLayer.contents = (__bridge id _Nullable)(self.image.CGImage);
- 創(chuàng)建一個CALayer酸茴,將六邊形layer 添加到CALayer上,并繪制模糊陰影
CALayer *completeLayer = [CALayer layer];
completeLayer.frame = CGRectMake(10, 10, self.bounds.size.width-10, self.bounds.size.height-10);
[completeLayer addSublayer:hexagonLayer];
completeLayer.shadowOpacity = 1.0f;
completeLayer.shadowPath = [self getCGPath:hexagnoRect.size.width];
completeLayer.shadowOffset = CGSizeMake(-10, -10);
completeLayer.shadowColor = self.hg_shadowColor.CGColor;
[self.layer addSublayer:completeLayer];
這樣就完成只做了
制作陰影.gif
<a >戳我看Demo</a>
感覺不錯的給個星星哦