html5中监听canvas内部元素点击事件的三种方法


Posted in HTML / CSS onApril 28, 2019

canvas内部元素不能像DOM元素一样方便的添加交互事件监听,因为canvas内不存在“元素”这个概念,他们仅仅是canvas绘制出来的图形。这对于交互开发来说是一个必经障碍,想要监听图形的点击事件思路很简单,只要监听canvas元素本身的点击事件,再判断点击坐标位于哪一个图形内部,就变相实现了图形点击事件。本文将介绍三种方法,判断坐标点是否位于某个canvas图形内部。

约定

本文介绍的三种方法适用于识别canvas内形状不规则而且位置无规律的图形点击事件,对于形状规则或者位置有规律的场景,肯定有更简便的实现,这里不做讨论。

像素法

像素检测法的思路是,将canvas中的多个图形(如果有多个的话)分别离屏绘制,并用 getImageData() 方法分别获取到像素数据保存起来。当canvas元素监听到点击事件时,通过点击坐标可以直接推算出点击发生在canvas上的第几个像素,然后遍历前面保存的图形数据,看看这个像素的alpha值是不是0,如果是0说明落点不在当前图形内,否则就说明点到了这个图形。

根据点击坐标得到所点击的像素序号的方法:

像素序号 = (纵坐标-1) * canvas宽度 + 横坐标

比如在宽度为 5 的画布上点击坐标 (3,3) ,根据上述公式得到像素序号是 (3-1) * 5 + 3 = 18 ,如图所示:

html5中监听canvas内部元素点击事件的三种方法

因为canvas导出的图形数据是将每个像素以 rgba 的顺序存成4个数字组成的数组,所以想访问指定像素的alpha值,只要读取这个数组的第 pIndex * 4 + 3 个值就可以了,如果这个值不为0,说明该像素可见,也就是点击到了该图形。

这个方法是我认为思路最直接、结果最准确、而且对图形形状没有任何要求的方法,但这个方法有一个致命的局限,当图形需要在画布上移动时,要频繁的创建数据缓存才能保证检测结果准确,受到画布尺寸和图形数量的影响, getImageData() 方法的性能会成为严重的瓶颈。所以如果canvas图形是静态的,这个方法非常适合,否则就不适合用这个方法了。

角度法

角度判断法的原理很容易理解,如果一个点在多边形内部,则该点与多边形所有顶点两两构成的夹角,相加应该刚好等于360°。

html5中监听canvas内部元素点击事件的三种方法

计算过程可以转变为以下三个步骤:

1.已知多边形顶点和已知坐标,将坐标与顶点两两组合成三点队列
2. 已知三点求夹角,可以使用 余玄定理
3.判断夹角之和是否360°

每一步都很简单,实现如下:

//计算两点距离
const getDistence = function (p1, p2) {
  return Math.sqrt((p1.x - p2.x) * (p1.x - p2.x) + (p1.y - p2.y) * (p1.y - p2.y))
};
//角度法判断点在多边形内部
const checkPointInPolyline = (point, polylinePoints) => {
    let totalA = 0;
    const A = point;
    for (let i = 0; i < polylinePoints.length; i++) {
        let B, C;
        if (i === polylinePoints.length - 1) {
            B = {
                x: polylinePoints[i][0],
                y: polylinePoints[i][1]
            };
            C = {
                x: polylinePoints[0][0],
                y: polylinePoints[0][1]
            };
        } else {
            B = {
                x: polylinePoints[i][0],
                y: polylinePoints[i][1]
            };
            C = {
                x: polylinePoints[i + 1][0],
                y: polylinePoints[i + 1][1]
            };
        }
        //计算角度
        const angleA = Math.acos((Math.pow(getDistence(A, C), 2) + Math.pow(getDistence(A, B), 2) - Math.pow(getDistence(B, C), 2)) / (2 * getDistence(A, C) * getDistence(A, B)))
        totalA += angleA
    }
    //判断角度之和
    return totalA === 2 * Math.PI
}

这个方法有一个局限性,就是图形必须是 凸多边形 。如果不是凸多边形需要先切割成凸多边形再计算,这就比较复杂了。

类似的思路还有面积法,如果一个点在多边形内部,那么该点与多边形所有顶点两两构成的三角形,面积相加应该等于多边形的面积,首先计算多边形的面积就很麻烦,所以这种方法可以直接pass掉。

射线法

射线法是一个我讲不清道理但非常好用的方法,只要判断点与多边形一侧的交点个数为奇数,则点在多边形内部。需要注意的是,只要数任何一侧的焦点个数就可以,比如左侧。这个方法不限制多边形的类型,凸多边形、凹多边形甚至环形都可以。

html5中监听canvas内部元素点击事件的三种方法

实现起来也非常简单:

 

const checkPointInPolyline = (point, polylinePoints) => {
    //射线法
  let leftSide = 0;
  const A = point;
  for (let i = 0; i < polylinePoints.length; i++) {
    let B, C;
    if (i === polylinePoints.length - 1) {
      B = {
        x: polylinePoints[i][0],
        y: polylinePoints[i][1]
      };
      C = {
        x: polylinePoints[0][0],
        y: polylinePoints[0][1]
      };
    } else {
      B = {
        x: polylinePoints[i][0],
        y: polylinePoints[i][1]
      };
      C = {
        x: polylinePoints[i + 1][0],
        y: polylinePoints[i + 1][1]
      };
    }
    //判断左侧相交
    let sortByY = [B.y, C.y].sort((a,b) => a-b)
    if (sortByY[0] < A.y && sortByY[1] > A.y){
      if(B.x<A.x || C.x < A.x){
        leftSide++
      }
    }
  }
  return leftSide % 2 === 1
}

射线法有一种特殊情况,当点在多变形的一条边上时需要特殊处理。但在工程中我认为也可以不处理,因为如果用户刚好点在图形的边界上,那么程序认为他没有点到也讲的过去。

总结

以上三种方法都可以实现canvas中不规则图形的点击检测。其中,像素法的优势在于不挑形状,而且在静态场景中有一定的性能优势;角度法应该说只有理论价值,实用性不佳;工程中最实用的当属射线法,局限性小,实现简单,多数时候只需要知道射线法就可以了。
 

HTML / CSS 相关文章推荐
通过CSS3的object-fit来调整图片适配尺寸的技巧简介
Feb 27 HTML / CSS
IE8下CSS3选择器nth-child() 不兼容问题的解决方法
Nov 16 HTML / CSS
HTML5 Canvas实现玫瑰曲线和心形图案的代码实例
Apr 10 HTML / CSS
Html5画布_动力节点Java学院整理
Jul 13 HTML / CSS
html5指南-2.如何操作document metadata
Jan 07 HTML / CSS
HTML5之SVG 2D入门7—SVG元素的重用与引用
Jan 30 HTML / CSS
HTML5+JS实现俄罗斯方块原理及具体步骤
Nov 29 HTML / CSS
HTML5 DeviceOrientation实现手机网站摇一摇功能代码实例
Apr 24 HTML / CSS
html5使用canvas实现弹幕功能示例
Sep 11 HTML / CSS
H5最强接口之canvas实现动态图形功能
May 31 HTML / CSS
关于html字符串正则判断和匹配的具体使用
Dec 12 HTML / CSS
html输入两个数实现加减乘除功能
Jul 01 HTML / CSS
Html5实现单张、多张图片上传功能
Apr 28 #HTML / CSS
鲜为人知的HTML5语音合成功能
May 17 #HTML / CSS
Html5内唤醒百度、高德APP的实现示例
May 20 #HTML / CSS
socket.io 和canvas 实现的共享画板功能
May 22 #HTML / CSS
Canvas 文字碰撞检测并抽稀的方法
May 27 #HTML / CSS
利用canvas实现图片下载功能来实现浏览器兼容问题
May 31 #HTML / CSS
HTML5印章绘制电子签章图片(中文英文椭圆章、中文英文椭圆印章)
Jun 03 #HTML / CSS
You might like
PHP数据库开发知多少
2006/10/09 PHP
详解Yaf框架PHPUnit集成测试方法
2017/12/27 PHP
PHP等比例压缩图片的实例代码
2018/07/26 PHP
Js 本页面传值实现代码
2009/05/17 Javascript
wap浏览自动跳转到wap页面的js代码
2014/05/17 Javascript
javascript引用赋值(地址传值)用法实例
2015/01/13 Javascript
浅谈JavaScript的Polymer框架中的behaviors对象
2015/07/29 Javascript
pace.js页面加载进度条插件
2015/09/29 Javascript
深入理解javascript作用域第二篇之词法作用域和动态作用域
2016/07/24 Javascript
Angular.js中$apply()和$digest()的深入理解
2016/10/13 Javascript
node.js的事件机制
2017/02/08 Javascript
微信小程序 template模板详解及实例代码
2017/03/09 Javascript
JS组件系列之Gojs组件 前端图形化插件之利器
2017/11/29 Javascript
layui实现三级联动效果
2019/07/26 Javascript
Node.js利用Express实现用户注册登陆功能(推荐)
2020/10/26 Javascript
解决VUE 在IE下出现ReferenceError: Promise未定义的问题
2020/11/07 Javascript
[36:19]2018DOTA2亚洲邀请赛 小组赛 A组加赛 Newbee vs LGD
2018/04/03 DOTA
Python contextlib模块使用示例
2015/02/18 Python
python3实现UDP协议的服务器和客户端
2017/06/14 Python
Python Tkinter实现简易计算器功能
2018/01/30 Python
11个Python3字典内置方法大全与示例汇总
2019/05/13 Python
python查找重复图片并删除(图片去重)
2019/07/16 Python
Python中实现输入一个整数的案例
2020/05/03 Python
Django 解决model 反向引用中的related_name问题
2020/05/19 Python
基于matplotlib中ion()和ioff()的使用详解
2020/06/16 Python
Python利用myqr库创建自己的二维码
2020/11/24 Python
名人珠宝设计师:Melinda Maria Jewelry
2019/03/06 全球购物
澳大利亚墨水站Ink Station:墨水和碳粉打印机墨盒
2019/03/24 全球购物
中专毕业生的自我鉴定
2013/12/01 职场文书
环保建议书400字
2014/05/14 职场文书
安全隐患整改报告
2014/11/06 职场文书
2014年办公室文秘工作总结
2014/12/09 职场文书
受资助学生感谢信
2015/01/21 职场文书
2015年高三班主任工作总结
2015/05/21 职场文书
Spring Data JPA使用JPQL与原生SQL进行查询的操作
2021/06/15 Java/Android
一篇文章看懂MySQL主从复制与读写分离
2021/11/07 MySQL