Canvas的事件处理,监听点击的位置

原创 2018年02月12日 17:06:44

DOM是Web前端领域非常重要的组成部分,不仅在处理HTML元素时会用到DOM,图形编程也同样会用到。比如SVG绘图,各种图形都是以DOM节点的形式插入到页面中,这就意味着可以使用DOM方法对图形进行操作。比如有一个元素,可以直接用jquery增加click事件$(‘#p1’).click(function(){…})”。然而这种DOM处理方法在HTML5的Canvas里不再适用,Canvas使用的是另外一套机制,无论在Canvas上绘制多少图形,Canvas都是一个整体,图形本身实际都是Canvas的一部分,不可单独获取,所以也就无法直接给某个图形增加JavaScript事件。

给Canvas元素绑定事件:
由于事件只能达到Canvas元素这一层,所以,如果想进一步深入,识别点击发生在Canvas内部的哪一个图形上,就需要增加代码来进行处理。基本思路是:给Canvas元素绑定事件,当事件发生时,检查事件对象的位置,然后检查哪些图形覆盖了该位置。比如画一个矩形,该矩形覆盖x轴10-110、y轴10-110的范围。只要鼠标点击在这个范围里,就可以视为点击了该矩形,也就可以手动触发矩形需要处理的点击事件。思路其实比较简单,但是实现起来还是稍微有点复杂。不仅要考虑这个判断过程的效率,有些地方还需要重新判断事件类型,设置要重新定义一个Canvas内部的捕获和冒泡机制。
这里写图片描述
这里写图片描述
html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
    <body>
        <canvas id="myCanvas" width="320" height="620" style="position: absolute;top: 100px;left: 100px;background: burlywood;"></canvas>
    </body>
</html>

js:

arr = [
 {x:0, y:0, width:320, height:200,content:'我是第一个框',color:'green'},
  {x:0, y:204, width:320, height:200,content:'我是第二个框',color:'blue'},
  {x:0, y:404, width:320, height:200,content:'我是第三个框',color:'yellow'}
];
cvs = document.getElementById('myCanvas');
ctx = cvs.getContext('2d');
draw();

//对事件进行监听
cvs.addEventListener('click', function(e){
  p = getEventPosition(e);
  //判断点击了那个矩形
  if(p.y <= arr[0].height){
    console.log('你点击了第一个矩形',p)
  }
  if(p.y>arr[0].height && p.y <= (arr[1].height+arr[1].y)){
    console.log('你点击了第二个矩形',p)
  }
  if(p.y>(arr[1].height+arr[1].y) && p.y <= (arr[2].height+arr[2].y)){
    console.log('你点击了第三个矩形',p)
  }
}, false);

//注:使用这个函数,需要给Canvas元素的position设为absolute。
//要判断事件对象发生的位置,事件对象e的layerX和layerY属性表示Canvas内部坐标系中的坐标
function getEventPosition(ev){
  var x, y;
  if (ev.layerX || ev.layerX == 0) {
    x = ev.layerX;
    y = ev.layerY;
  } else if (ev.offsetX || ev.offsetX == 0) { // Opera
    x = ev.offsetX;
    y = ev.offsetY;
  }
  return {x: x, y: y};
}

//画图像
    function draw(p){
  var who = [];
  ctx.clearRect(0, 0, cvs.width, cvs.height);
  arr.forEach(function(v, i){
    ctx.beginPath();
    ctx.rect(v.x, v.y, v.width, v.height);
    ctx.font="20px Georgia";
    ctx.fillStyle=v.color;
    ctx.fillText(v.content,0,v.y+20);
    ctx.stroke();
    if(p && ctx.isPointInPath(p.x, p.y)){
      //如果传入了事件坐标,就用isPointInPath判断一下
      //如果当前环境覆盖了该坐标,就将当前环境的index值放到数组里
      who.push(i);
    }
  });
  //根据数组中的index值,可以到arr数组中找到相应的元素。
  return who;
}

参考地址

版权声明:本文为博主原创文章,未经博主允许可以随便转载。 https://blog.csdn.net/a419419/article/details/79317773

JavaFX中的事件处理方法

在JavaFX中,事件(event)用对象表示。当用户和接口进行了某些交互后,就会生成事件对象,并将其传给你建立的事件处理方法,称为事件处理器(event handler)。事件处理器检查事件对象,并...
  • u012487272
  • u012487272
  • 2018-02-13 13:59:58
  • 111

分享一个在canvas中的点击事件

网上看到许多写的canvas中事件,不胜其烦,觉得写的也不知道是什么今天思考了一个分享给大家,欢迎指导改进html jslet canvas = document.getElementByI...
  • qq_24729895
  • qq_24729895
  • 2017-07-29 18:44:48
  • 719

Canvas 设置里面的元素位置

Canvas 设置里面的元素位置
  • pksniq
  • pksniq
  • 2011-03-21 14:58:00
  • 1469

安卓自定义View进阶-Canvas之图片文字

在上一篇文章Canvas之画布操作中我们了解了画布的一些基本操作方法,本次了解一些绘制图片文字相关的内容。如果你对前几篇文章讲述的内容熟练掌握的话,那么恭喜你,本篇结束之后,大部分的自定义View已经...
  • osle123
  • osle123
  • 2016-10-08 15:01:44
  • 593

canvas实现一个解锁demo

问题1: 代码如下: function Foo() {}; Foo.prototype.talk = function () { alert('hello~\n'); }; var a ...
  • onepunchmen00
  • onepunchmen00
  • 2017-11-21 17:26:05
  • 256

HTML5 Canvas多层点击事件监听实例

最近写一个HTML5的游戏框架。今天写到一个多层点击事件的监听。觉得还是挺好玩的。于是把它从模块中抽化出来了。以下代码只是一些思想。具体实现肯定不是那么丑陋。如果想具体了解,这里是代码托管地址(无耻地...
  • C860_zy
  • C860_zy
  • 2014-03-21 15:58:53
  • 2295

canvas响应鼠标事件

Sprite sheets body { background: #dddddd; } #canvas...
  • hb707934728
  • hb707934728
  • 2017-03-29 16:27:40
  • 2454

android开发 之 Canvas绘制文字,图片

一.Canvas的常用操作速查表操作类型相关API备注绘制颜色drawColor, drawRGB, drawARGB使用单一颜色填充整个画布绘制基本形状drawPoint, drawPoints, ...
  • z_x_Qiang
  • z_x_Qiang
  • 2017-08-02 17:22:26
  • 2068

一个少女心满满的例子带你入门canvas

本文首发于我的个人博客:http://cherryblog.site/ github项目地址:https://github.com/sunshine940326/canvasStar 项...
  • sunshine940326
  • sunshine940326
  • 2017-08-02 11:07:40
  • 1351

canvas绑定事件的时候 获得鼠标点击的地方在canvas画布内的坐标的方法

var x = event.clientX - canvas.getBoundingClientRect().left; var y = event.clientY - canvas.getBoun...
  • yanlingdi
  • yanlingdi
  • 2016-05-27 09:44:05
  • 1549
收藏助手
不良信息举报
您举报文章:Canvas的事件处理,监听点击的位置
举报原因:
原因补充:

(最多只允许输入30个字)