github:https://github.com/woaiyouxi0803/GuideImageView 好用欢迎点🌟Star~
iOS新手引导--GuideImageView(一)
iOS新手引导--GuideImageView(二)
iOS新手引导--GuideImageView(三)
此篇主讲新增镂空效果
一、思路
与之前一致iOS新手引导--GuideImageView(二)
镂空的位置 相对图片坐标 有可能负数,所以需要自己设好maskImageRect
的x
和y
(如:镂空位置相对图片坐标在上方,则maskImageRect
的y
为负数)
二、参数说明
1.maskRect
属性为镂空位置 相对屏幕坐标。
maskRect
大小为maskImageRect
中设置的size
,并且maskRect
中心位置 和 maskViewRect
中心对齐。
2.枚举GuideImageViewMask
GuideImageViewMaskRoundRect
: 矩形 / 带圆角的矩形 / 内接圆
当cornerRadius == 0
-->矩形
当maskImageRect
的 width == heigth
&& cornerRadius == maskImageRect.width/2.0
--> 内接圆。
GuideImageViewMaskCircumcircle
:外接圆。(maskRect
的四角与圆相交)。
3.核心代码
- (void)hollowWithGuideImageViewMaskType:(GuideImageViewMask)maskType cornerRadius:(CGFloat)cornerRadius;
三、demo说明
1.对于普通View的镂空
maskImageRect
通过预览图片手动获得 x
大概为80,假设y
为-30,
镂空需要有圆角并包含整个View。
故大小为((80+30) ,30)
, cornerRadius = 30/2.0
[maskGuidImageView hollowWithGuideImageViewMaskType:GuideImageViewMaskRoundRect
cornerRadius:30/2.0
maskView:view
imageName:@"Coin_Speed_BlackSecond6"
imageSize:CGSizeMake(270, 185)
maskImageRect:CGRectMake(80, -30, 80+30, 30)
confirmRect:CGRectMake(0, 0, 270, 185)
clickBlock:clickBlock]
2.对于tabbarItem
其UITabBarButton
高度为48,相对图片下方
故maskImageRect
的y
等于图片大小73.5
通过预览图片手动获得 x
大概为100,
镂空大小为48*48。
之后调用
- (void)hollowWithGuideImageViewMaskType:(GuideImageViewMask)maskType cornerRadius:(CGFloat)cornerRadius;
设置成内接圆即可。
[maskGuidImageView addGuideWithTabBarItemIndex:index
imageName:@"containerGuide"
imageSize:CGSizeMake(248, 73.5)
maskImageRect:CGRectMake(100, 73.5, 48, 48)
confirmRect:CGRectMake(0, 0, 248,73.5)
clickBlock:clickBlock]
[maskGuidImageView hollowWithGuideImageViewMaskType:GuideImageViewMaskRoundRect
cornerRadius:48/2.0]