实现点击图片不同区域响应不同的事件

时间:2022-11-16 19:33:30

最近有一个遥控器的项目, 需要实现点击图片上指定位置响应不同事件

图片如下: 

实现点击图片不同区域响应不同的事件

大概目的是点击图片上的温度可以直接改变空调温度

大概思路就是先通过gesture获取点击的点坐标, 然后对坐标做处理.

开始考虑以纵轴为0度, 计算点击坐标跟中心点连线并计算跟纵轴的角度来判断,  不过代码写好后发现在不同的设备上有误差

所以就改用将图片分成一个个的格子, 然后判断触摸点在哪一个格子上面

 

下面来说说做法:

 

首先把图片放到一个表格中, 调增好表格的缩放大小刚好图片边缘压在单元格线上

如图:

实现点击图片不同区域响应不同的事件

从这里可看到, 将图片分割成 高度: 43个单位  宽度: 9个单位

然后做个记录每个点在哪些单元格上面:

我的记录如下:

实现点击图片不同区域响应不同的事件

 

然后我们可以写代码,  给ImageView添加一个手势

   self.bgImg.userInteractionEnabled = YES;
[self.bgImg addGestureRecognizer:[[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tempTapAction:)]];

 

从gesture获取转换后的坐标并做判断:

- (void)tempTapAction:(UIGestureRecognizer *)tapGesture {

float xunit = self.bgImg.frame.size.width / 9;
float yunit = self.bgImg.frame.size.height / 43;

CGPoint point;
point
= [tapGesture locationInView:self.bgImg];
// NSLog(@"点击: %@", NSStringFromCGPoint(point));

if (point.x < xunit * 2 && (point.y > yunit * 27 && point.y < yunit * 31)) {

NSLog(
@"16度");
_temper
= 16;
}

else if (point.x < xunit * 2 && (point.y > yunit * 22 && point.y < yunit * 26)) {

NSLog(
@"17度");
_temper
= 17;
}

else if (point.x < xunit * 2 && (point.y > yunit * 17 && point.y < yunit * 21)) {

NSLog(
@"18度");
_temper
= 18;
}

else if (point.x < xunit * 2 && (point.y > yunit * 12 && point.y < yunit * 16)) {

NSLog(
@"19度");
_temper
= 19;
}

else if ((point.x < xunit * 3 && point.x > xunit * 1) && (point.y > yunit * 8 && point.y < yunit * 12)) {

NSLog(
@"20度");
_temper
= 20;
}

else if ((point.x < xunit * 3 && point.x > xunit * 2) && (point.y > yunit * 5 && point.y < yunit * 9)) {

NSLog(
@"21度");
_temper
= 21;
}

else if ((point.x < xunit * 4 && point.x > xunit * 3) && (point.y > yunit * 3 && point.y < yunit * 7)) {

NSLog(
@"22度");
_temper
= 22;
}

else if ((point.x < xunit * 5 && point.x > xunit * 4) && (point.y > yunit * 2 && point.y < yunit * 6)) {

NSLog(
@"23度");
_temper
= 23;
}

else if ((point.x < xunit * 6 && point.x > xunit * 5) && (point.y > yunit * 3 && point.y < yunit * 7)) {

NSLog(
@"24度");
_temper
= 24;
}

else if ((point.x < xunit * 7 && point.x > xunit * 6) && (point.y > yunit * 5 && point.y < yunit * 9)) {

NSLog(
@"25度");
_temper
= 25;
}

else if ((point.x < xunit * 8 && point.x > xunit * 6) && (point.y > yunit * 8 && point.y < yunit * 12)) {

NSLog(
@"26度");
_temper
= 26;
}

else if ((point.x < xunit * 9 && point.x > xunit * 7) && (point.y > yunit * 12 && point.y < yunit * 16)) {

NSLog(
@"27度");
_temper
= 27;
}

else if ((point.x < xunit * 9 && point.x > xunit * 7) && (point.y > yunit * 17 && point.y < yunit * 21)) {

NSLog(
@"28度");
_temper
= 28;
}

else if ((point.x < xunit * 9 && point.x > xunit * 8) && (point.y > yunit * 22 && point.y < yunit * 26)) {

NSLog(
@"29度");
_temper
= 29;
}

else if ((point.x < xunit * 9 && point.x > xunit * 7) && (point.y > yunit * 27 && point.y < yunit * 31)) {

NSLog(
@"30度");
_temper
= 30;
}

// 调用修改温度方法
}