이 글에서는 주로 HTML5 Canvas의 이벤트 처리, Canvas 요소에 이벤트 바인딩, isPointInPath 메서드, 루프 다시 그리기 및 이벤트 버블링에 대해 설명합니다. 웹 프런트엔드 필드의 일부입니다. DOM은 HTML 요소를 처리할 때뿐만 아니라 그래픽 프로그래밍에도 사용됩니다. 예를 들어 SVG 드로잉에서는 다양한 그래픽이 DOM 노드 형태로 페이지에 삽입되는데, 이는 DOM 메소드를 사용하여 그래픽을 조작할 수 있음을 의미합니다. 예를 들어
코드는 다음과 같습니다.
cvs = document.getElementById('mycanvas'); ctx = canvas.getContext('2d'); theRect = ctx.rect(10, 10, 100, 100); ctx.stroke(); console.log(theRect); //undefined
그래서 프런트 엔드에서 일반적으로 사용되는 DOM은 캔버스에서는 적용되지 않습니다. 예를 들어 위의 캔버스에서 사각형을 클릭하면 실제로 전체 캔버스 요소를 클릭하게 됩니다. 캔버스 요소
코드는 다음과 같습니다.
cvs = document.getElementById('mycanvas'); cvs.addEventListener('click', function(e){ //... }, false);
코드 복사
코드는 다음과 같습니다.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}; }
이제 이벤트 개체의 좌표 위치를 얻었으므로 캔버스의 어떤 그래픽이 이 좌표를 덮는지 결정해야 합니다. isPointInPath 메서드
Canvas의 isPointInPath 메서드는 현재 컨텍스트 그래픽이 다음과 같은 특정 좌표를 포함하는지 여부를 확인할 수 있습니다.
코드는 다음과 같습니다.
cvs = document.getElementById('mycanvas'); ctx = canvas.getContext('2d'); ctx.rect(10, 10, 100, 100); ctx.stroke(); ctx.isPointInPath(50, 50); //true ctx.isPointInPath(5, 5); //false
코드 복사
코드는 다음과 같습니다.cvs.addEventListener('click', function(e){ p = getEventPosition(e); if(ctx.isPointInPath(p.x, p.y)){ //点击了矩形 } }, false);
코드를 복사하세요
코드는 다음과 같습니다.cvs = document.getElementById('mycanvas'); ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.rect(10, 10, 100, 100); ctx.stroke(); ctx.isPointInPath(20, 20); //true ctx.beginPath(); ctx.rect(110, 110, 100, 100); ctx.stroke(); ctx.isPointInPath(150, 150); //true ctx.isPointInPath(20, 20); //false
순환 다시 그리기 및 이벤트 버블링순환 다시 그리기를 수행하려면 그래픽의 기본 매개변수를 미리 저장해야 합니다.
复制代码
代码如下:
arr = [ {x:10, y:10, width:100, height:100}, {x:110, y:110, width:100, height:100} ]; cvs = document.getElementById('mycanvas'); ctx = canvas.getContext('2d'); draw(); function draw(){ ctx.clearRech(0, 0, cvs.width, cvs.height); arr.forEach(function(v){ ctx.beginPath(); ctx.rect(v.x, v.y, v.width, v.height); ctx.stroke(); }); }
上面的代码事先将两个矩形的基本参数保存下来,每次调用draw方法,就会循环调用这些基本参数,用于绘制两个矩形。这里还使用了clearRect方法,用于在重绘时清空画布。接下来要做的是增加事件代理,以及在重绘时对每一个上下文环境使用isPointInPath方法:
复制代码
代码如下:
cvs.addEventListener('click', function(e){ p = getEventPosition(e); draw(p); }, false);
事件发生时,将事件对象的坐标传给draw方法处理。这里还需要对draw方法做一些小改动:
复制代码
代码如下:
function draw(p){ var who = []; ctx.clearRech(0, 0, cvs.width, cvs.height); arr.forEach(function(v, i){ ctx.beginPath(); ctx.rect(v.x, v.y, v.width, v.height); ctx.stroke(); if(p && ctx.isPointInPath(p.x, p.y)){ //如果传入了事件坐标,就用isPointInPath判断一下 //如果当前环境覆盖了该坐标,就将当前环境的index值放到数组里 who.push(i); } }); //根据数组中的index值,可以到arr数组中找到相应的元素。 return who; }
在上面代码中,点击事件发生时draw方法会执行一次重绘,并在重绘过程中检查每一个图形是否覆盖了事件坐标,如果判断为真,则视为点击了该图形,并将该图形的index值放入数组,最后将数组作为draw方法的返回值。在这种处理机制下,如果Canvas里有N个图形,它们有一部分是重叠的,而点击事件恰巧发生在这个重叠区域上,那么draw方法的返回数组里会有N个成员。这时就有点类似事件冒泡的情况,数组的最后一个成员处于Canvas最上层,而第一个成员则在最下层,我们可以视为最上层的成员是e.target,而其他成员则是冒泡过程中传递到的节点。当然这只是最简单的一种处理方法,如果真要模拟DOM处理,还要给图形设置父子级关系。
以上就是Canvas事件处理的基本方法。在实际运用时,如何缓存图形参数,如何进行循环重绘,以及如何处理事件冒泡,都还需要根据实际情况花一些心思去处理。另外,click是一个比较好处理的事件,相对麻烦的是mouseover、mouseout和mousemove这些事件,由于鼠标一旦进入Canvas元素,始终发生的都是mousemove事件,所以如果要给某个图形单独设置mouseover或mouseout,还需要记录鼠标移动的路线,给图形设置进出状态。由于处理的步骤变得复杂起来,必须对性能问题提高关注。
위 내용은 HTML5 Canvas의 이벤트 처리 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!