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

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

图片如下:

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

大概思路就是先通过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;
    }

    // 调用修改温度方法
}
时间: 2024-10-22 13:07:06

实现点击图片不同区域响应不同的事件的相关文章

点击图片上传文件

一.选择文件 1.隐藏input(大部分手机浏览器,微信中都不可用) 通过js触发选择文件.js获取选择的文件并上传 实现: <html> <head> <title>上传</title> </head> <body> <img src="xxxxxxx" id="image" onclick="select()" name="image" />

前端jquery实现点击图片弹出大图层(且滚动鼠标滑轮图片缩放)

<img src="{$vo.photo}" height="50px" onclick="showdiv({$i});"> <div id="bg"></div> <div id="show{$i}" class="show" style="display:none;"> <img src="{$vo.

Android ImageView图片透明区域不响应点击事件,不规则图片透明区域响应点击事件

转载:http://blog.csdn.net/aminfo/article/details/7872681 经常会在项目中用到透明图片,不规则图片,特别是做游戏的时候,需要对图片的透明区域的点击事件做特别处理. 一.先上图片文件transparent.png,图片中间区域与外围区域是非透明的,其它区域是透明的: 二.上布局文件test.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout

CSS:点击图片区域上传文件

前端菜鸟,本人目前只能看懂和抄代码.因为参与一个项目需要用到这块样式,于是在网上找到的例子.于是记下来,同时也是方便自己查阅. /*定义图像以及大小*/ .imageFileInput{ width: 200px; height: 200px; position: absolute; background-color: red; /*这里可以换成图片路径(background-image:../img/....)注意图片路径*/ } /*定义上传*/ .fileInput{ height: 10

移动端点击图片查看大图

一.需求 点击图片查看大图,再点大图隐藏.多用于移动端,因为移动端屏幕小,可能需要查看大图. 二.代码 <!DOCTYPE html> <html> <meta charset="utf-8"/> <head runat="server"> <title>JQuery点击图片查看大图by starof</title> <style type="text/css">

jQuery点击图片放大显示原图效果

HTML部分:<div id="append_parent"></div> JS代码部分: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 //内容页图片点击放大效果     var imgBoxMod=$(".ctnlist .text i

jQuery - 点击图片加边框

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>为图片添加边框</title> <script type="text/javascript" src="./js/jquery-1.8.3.min.js"></script> <scrip

js点击图片删除子标签li

上图的效果图请看下面 点击图片部分会删除子标签li部分

非微信图文网页,微信浏览器点击图片弹出自带图片浏览 (原创请勿转载)

微信图文网页点击插入的图片,会在微信的图片浏览器上浏览图片可以放大缩小,但是自己做的网页没有这个功能,下面我就来介绍一下这个功能,做出一个完美一点的demo.如果不想看过程直接到最后看demo... 教程需要:脚本编辑器(记事本或者是notepad++.DW都可以).jquery.js.微信浏览器作为测试 如下图效果 我们用到的是微信内置JsAPI的一个,这个函数在微信的开发者平台文档里我没有找到,是在网上搜到的. WeixinJSBridge.invoke('imagePreview',{