JavaScript 屏幕触摸和弹起事件以及 map、area 标签的使用

本贴最后更新于 1176 天前,其中的信息可能已经事过景迁

一、需求

业务本身其实是 uni-app 内的一个监控页面的制作,由于播放监控画面的 demo 是 JavaScript 开发的,而 APP 内无法使用 js 语法的文件,也没有去修改人家的源码,所以这里使用了 web-view 标签。

监控页面一共两部分,一部分为监控画面的 div,只需要显示即可,另一部分为控制摄像头的云台,比如控制摄像头上下左右转动等功能。

做完效果如下:

acc4e6cc735d4d5f829193f456f6a93f.gif

二、实现

我这边是在 Java 端写了这个页面然后写个接口返回这个页面,APP 内的 web-view 中的 src 写接口地址即可。

主要说一下在做 touchstart、touchend 事件和 map、area 标签的使用。

上方的云台控制,每个都是一整张图片,相当于这样。

image.png

所以业务核心就在于怎么在一张图片上判断用户触摸的位置来动态的切换图片和实现不同的功能。

代码先贴上。

<div id="container" style="">
        <img id="yuntai" style="width: 250px" src="/static/home/assets/img/normal.png" usemap="#planetmap"/>
    </div>
    <map name="planetmap">
        <area shape="poly" id="top" coords="52,52,150,150,247,52,150,10">
        <area shape="poly" id="left" coords="52,52,150,150,51,248,11,150">
        <area shape="poly" id="right" coords="248,52,150,150,247,247,289,150">
        <area shape="poly" id="down" coords="51,248,150,150,247,247,150,288">
    </map>

首先就是需要一张默认图片,宽度自己定义。最后加上属性 usemap="#{map 的 name}";

接着下方继续写 map 标签,写好 name,对应上方 img 中的 usemap;

在 map 标签中写 area 标签,shape 属性自己去查都有哪些值,有圆形、矩形,多边形啥的,我这里用的好像是多边形(并不是你的默认图片或者替换的图片是什么形状就要用什么形状,根据具体的业务去修改)

我这里的业务是将一个圆形分成四等分,点击某块地方替换相应的图片,松开在换回原来的图片。

附上一个调整 coords 方法的网址 https://jingyan.baidu.com/article/d2b1d102afc2ab5c7e37d49d.html

跟着照做就能将 coords 调出来,我用的是多边形,因为圆形的三个点明显不能满足我的需求,所以就用了四个点进行定位。类似于这样,四个点连起来形成一块区域,关键就在于 area 标签内的 coords 的值,调好就出来了。

image.png

区域完全调好后,下面就用 JS 去实现点击和松开切换图片的操作。先贴一段代码,电脑、安卓、ios 都通用。

$('body').on('touchend', function () {
        $('#yuntai').attr('src', '/static/home/assets/img/normal.png');
        ysRequestYunTaiStop();
    });

    $('#top').on('touchstart', function () {
        $('#yuntai').attr('src', '/static/home/assets/img/top.png');
        ysRequestYunTaiStart(0);
    });

    $('#down').on('touchstart', function () {
        $('#yuntai').attr('src', '/static/home/assets/img/down.png');
        ysRequestYunTaiStart(1);
    });

    $('#left').on('touchstart', function () {
        $('#yuntai').attr('src', '/static/home/assets/img/left.png');
        ysRequestYunTaiStart(2);
    });

    $('#right').on('touchstart', function () {
        $('#yuntai').attr('src', '/static/home/assets/img/right.png');
        ysRequestYunTaiStart(3);
    });

基本上区域划分好的小伙伴们看这个应该非常简单,就使用 JQuery 监听 touchstart(屏幕点击)事件,而松开事件(touchend)如果所有的松开事件都是一致的话,就可以监听 body 的松开事件即可。这样就实现了点击切换,松开在换回的操作。

  • JavaScript

    JavaScript 一种动态类型、弱类型、基于原型的直译式脚本语言,内置支持类型。它的解释器被称为 JavaScript 引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在 HTML 网页上使用,用来给 HTML 网页增加动态功能。

    713 引用 • 1174 回帖 • 104 关注
  • CSS

    CSS(Cascading Style Sheet)“层叠样式表”是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

    186 引用 • 471 回帖 • 2 关注
  • HTML

    HTML5 是 HTML 下一个的主要修订版本,现在仍处于发展阶段。广义论及 HTML5 时,实际指的是包括 HTML、CSS 和 JavaScript 在内的一套技术组合。

    103 引用 • 294 回帖

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...

推荐标签 标签

  • 正则表达式

    正则表达式(Regular Expression)使用单个字符串来描述、匹配一系列遵循某个句法规则的字符串。

    31 引用 • 94 回帖
  • Latke

    Latke 是一款以 JSON 为主的 Java Web 框架。

    70 引用 • 533 回帖 • 734 关注
  • sts
    2 引用 • 2 回帖 • 166 关注
  • 周末

    星期六到星期天晚,实行五天工作制后,指每周的最后两天。再过几年可能就是三天了。

    14 引用 • 297 回帖
  • VirtualBox

    VirtualBox 是一款开源虚拟机软件,最早由德国 Innotek 公司开发,由 Sun Microsystems 公司出品的软件,使用 Qt 编写,在 Sun 被 Oracle 收购后正式更名成 Oracle VM VirtualBox。

    10 引用 • 2 回帖 • 8 关注
  • Bootstrap

    Bootstrap 是 Twitter 推出的一个用于前端开发的开源工具包。它由 Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作开发,是一个 CSS / HTML 框架。

    18 引用 • 33 回帖 • 679 关注
  • CloudFoundry

    Cloud Foundry 是 VMware 推出的业界第一个开源 PaaS 云平台,它支持多种框架、语言、运行时环境、云平台及应用服务,使开发人员能够在几秒钟内进行应用程序的部署和扩展,无需担心任何基础架构的问题。

    5 引用 • 18 回帖 • 150 关注
  • flomo

    flomo 是新一代 「卡片笔记」 ,专注在碎片化时代,促进你的记录,帮你积累更多知识资产。

    4 引用 • 91 回帖 • 1 关注
  • webpack

    webpack 是一个用于前端开发的模块加载器和打包工具,它能把各种资源,例如 JS、CSS(less/sass)、图片等都作为模块来使用和处理。

    41 引用 • 130 回帖 • 281 关注
  • 微服务

    微服务架构是一种架构模式,它提倡将单一应用划分成一组小的服务。服务之间互相协调,互相配合,为用户提供最终价值。每个服务运行在独立的进程中。服务于服务之间才用轻量级的通信机制互相沟通。每个服务都围绕着具体业务构建,能够被独立的部署。

    96 引用 • 155 回帖 • 1 关注
  • ReactiveX

    ReactiveX 是一个专注于异步编程与控制可观察数据(或者事件)流的 API。它组合了观察者模式,迭代器模式和函数式编程的优秀思想。

    1 引用 • 2 回帖 • 140 关注
  • Sym

    Sym 是一款用 Java 实现的现代化社区(论坛/BBS/社交网络/博客)系统平台。

    下一代的社区系统,为未来而构建

    524 引用 • 4599 回帖 • 698 关注
  • Gitea

    Gitea 是一个开源社区驱动的轻量级代码托管解决方案,后端采用 Go 编写,采用 MIT 许可证。

    4 引用 • 16 回帖 • 1 关注
  • Caddy

    Caddy 是一款默认自动启用 HTTPS 的 HTTP/2 Web 服务器。

    10 引用 • 54 回帖 • 140 关注
  • 国际化

    i18n(其来源是英文单词 internationalization 的首末字符 i 和 n,18 为中间的字符数)是“国际化”的简称。对程序来说,国际化是指在不修改代码的情况下,能根据不同语言及地区显示相应的界面。

    7 引用 • 26 回帖 • 4 关注
  • Thymeleaf

    Thymeleaf 是一款用于渲染 XML/XHTML/HTML5 内容的模板引擎。类似 Velocity、 FreeMarker 等,它也可以轻易的与 Spring 等 Web 框架进行集成作为 Web 应用的模板引擎。与其它模板引擎相比,Thymeleaf 最大的特点是能够直接在浏览器中打开并正确显示模板页面,而不需要启动整个 Web 应用。

    11 引用 • 19 回帖 • 320 关注
  • ngrok

    ngrok 是一个反向代理,通过在公共的端点和本地运行的 Web 服务器之间建立一个安全的通道。

    7 引用 • 63 回帖 • 612 关注
  • Ngui

    Ngui 是一个 GUI 的排版显示引擎和跨平台的 GUI 应用程序开发框架,基于
    Node.js / OpenGL。目标是在此基础上开发 GUI 应用程序可拥有开发 WEB 应用般简单与速度同时兼顾 Native 应用程序的性能与体验。

    7 引用 • 9 回帖 • 361 关注
  • Swift

    Swift 是苹果于 2014 年 WWDC(苹果开发者大会)发布的开发语言,可与 Objective-C 共同运行于 Mac OS 和 iOS 平台,用于搭建基于苹果平台的应用程序。

    34 引用 • 37 回帖 • 509 关注
  • BookxNote

    BookxNote 是一款全新的电子书学习工具,助力您的学习与思考,让您的大脑更高效的记忆。

    笔记整理交给我,一心只读圣贤书。

    1 引用 • 1 回帖 • 1 关注
  • Linux

    Linux 是一套免费使用和自由传播的类 Unix 操作系统,是一个基于 POSIX 和 Unix 的多用户、多任务、支持多线程和多 CPU 的操作系统。它能运行主要的 Unix 工具软件、应用程序和网络协议,并支持 32 位和 64 位硬件。Linux 继承了 Unix 以网络为核心的设计思想,是一个性能稳定的多用户网络操作系统。

    922 引用 • 936 回帖
  • 酷鸟浏览器

    安全 · 稳定 · 快速
    为跨境从业人员提供专业的跨境浏览器

    3 引用 • 59 回帖 • 22 关注
  • MongoDB

    MongoDB(来自于英文单词“Humongous”,中文含义为“庞大”)是一个基于分布式文件存储的数据库,由 C++ 语言编写。旨在为应用提供可扩展的高性能数据存储解决方案。MongoDB 是一个介于关系数据库和非关系数据库之间的产品,是非关系数据库当中功能最丰富,最像关系数据库的。它支持的数据结构非常松散,是类似 JSON 的 BSON 格式,因此可以存储比较复杂的数据类型。

    90 引用 • 59 回帖 • 2 关注
  • RabbitMQ

    RabbitMQ 是一个开源的 AMQP 实现,服务器端用 Erlang 语言编写,支持多种语言客户端,如:Python、Ruby、.NET、Java、C、PHP、ActionScript 等。用于在分布式系统中存储转发消息,在易用性、扩展性、高可用性等方面表现不俗。

    49 引用 • 60 回帖 • 396 关注
  • uTools

    uTools 是一个极简、插件化、跨平台的现代桌面软件。通过自由选配丰富的插件,打造你得心应手的工具集合。

    5 引用 • 13 回帖
  • 尊园地产

    昆明尊园房地产经纪有限公司,即:Kunming Zunyuan Property Agency Company Limited(简称“尊园地产”)于 2007 年 6 月开始筹备,2007 年 8 月 18 日正式成立,注册资本 200 万元,公司性质为股份经纪有限公司,主营业务为:代租、代售、代办产权过户、办理银行按揭、担保、抵押、评估等。

    1 引用 • 22 回帖 • 704 关注
  • Git

    Git 是 Linux Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。

    207 引用 • 358 回帖