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

Posted 2020-09-27 一切都是最好的安排

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

图片如下: 

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

大概思路就是先通过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;
    }
    
    // 调用修改温度方法    
}