需求要求:
点击身体部位跳转,点击空白处无响应
因为人体是不规则的,所以贝塞尔曲线是不好实现的。
思维逻辑:
1,获取点击位置颜色,2,重写button,判断点击位置是否和空白处颜色RGB(0,0,0)相同,3,响应
一,获取点击位置颜色:
/// 获取图片上某个点的颜色值(不包含alpha)。
- (UIColor *)pixelColorFromPoint:(CGPoint)point scale:(CGFloat)scale {
// 判断点是否超出图像范围
if (!CGRectContainsPoint(CGRectMake(0, 0, self.size.width*scale, self.size.height*scale), point)) return nil;
// 将像素绘制到一个1×1像素字节数组和位图上下文。
NSInteger pointX = trunc(point.x/scale);
NSInteger pointY = trunc(point.y/scale);
CGImageRef cgImage = self.CGImage;
CGFloat width = self.size.width;
CGFloat height = self.size.height;
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
int bytesPerPixel = 4;
int bytesPerRow = bytesPerPixel * 1;
NSUInteger bitsPerComponent = 8;
unsigned char pixelData[4] = {0, 0, 0, 0};
CGContextRef context = CGBitmapContextCreate(pixelData, 1, 1, bitsPerComponent, bytesPerRow, colorSpace, kCGImageAlphaPremultipliedLast | kCGBitmapByteOrder32Big);
CGColorSpaceRelease(colorSpace);
CGContextSetBlendMode(context, kCGBlendModeCopy);
// 将指定像素绘制到上下文中
CGContextTranslateCTM(context, -pointX, pointY - height);
CGContextDrawImage(context, CGRectMake(0.0f, 0.0f, width, height), cgImage);
CGContextRelease(context);
CGFloat red = (CGFloat)pixelData[0] / 255.0;
CGFloat green = (CGFloat)pixelData[1] / 255.0;
CGFloat blue = (CGFloat)pixelData[2] / 255.0;
CGFloat al = (CGFloat)pixelData[3];
NSLog(@"red = %.2lf, %.2lf, %.2lf", red, green, blue);
UIColor * color = [UIColor colorWithRed:red green:green blue:blue alpha:al];
return color;
}
scale是为了适配不同机型加的比例,可以去掉。后面我会说一下这个小扩展
二,封装一个AIBudyButton:
override func point(inside point: CGPoint, with event: UIEvent?) -> Bool {
guard CGRect(origin: CGPoint(x: 0, y: 0), size: self..size ).contains(point) else {
return false
}
let color: UIColor = self.currentBackgroundImage?.pixelColor(from: point, scale: LayoutSCALE) ?? UIColor.init()
if color.isEqual(UIColor.init(red: 0, green: 0, blue: 0, alpha: 0)) {
print("不触发事件")
return false
}
print("触发事件")
return true
}
这就结束了,上图:
如图,点击空白处不会响应。
以上就结束了!
let LayoutSCALE = screenWidth/414
AIBodyButton中调用的LayoutSCALE就是这个,因为我是在414*896的UI图纸下开发的,所以做了简单的适配,当然,不要忘记button宽高的适配。
注意:这里的尺寸很严格,差一点点就会响应错误!