이 글에서는 주로 HTML5 Canvas의 이벤트 처리, Canvas 요소에 이벤트 바인딩, isPointInPath 메서드, 루프 다시 그리기 및 이벤트 버블링에 대해 설명합니다. 웹 프런트엔드 필드의 일부입니다. DOM은 HTML 요소를 처리할 때뿐만 아니라 그래픽 프로그래밍에도 사용됩니다. 예를 들어 SVG 드로잉에서는 다양한 그래픽이 DOM 노드 형태로 페이지에 삽입되는데, 이는 DOM 메소드를 사용하여 그래픽을 조작할 수 있음을 의미합니다. 예를 들어 b0df1a4bdae36d21726841c97f474466 요소가 있는 경우 jquery를 사용하여 클릭 이벤트 $('#p1').click(function(){…})"을 직접 추가할 수 있습니다. 이 DOM 처리 방법은 HTML5에 적합하지 않습니다. Canvas에서는 다른 메커니즘을 사용합니다. Canvas에 아무리 많은 그래픽을 그려도 Canvas는 실제로 Canvas의 일부이며 그럴 수 없습니다. 별도로 얻어서 다른 사람에게 직접 줄 수는 없습니다. 예:
코드 복사코드는 다음과 같습니다.
cvs = document.getElementById('mycanvas'); ctx = canvas.getContext('2d'); theRect = ctx.rect(10, 10, 100, 100); ctx.stroke(); console.log(theRect); //undefined이 코드는 캔버스 태그에 직사각형을 그립니다. 그래픽 그리기를 위한 ret 메서드에는 반환 값이 없습니다. 개발자 도구에서 캔버스 태그 내부에 추가된 콘텐츠가 없으며 js에서 얻은 캔버스 요소와 현재 컨텍스트에 새 그래픽을 나타내는 콘텐츠가 없는 것도 볼 수 있습니다.
그래서 프런트 엔드에서 일반적으로 사용되는 DOM은 캔버스에서는 적용되지 않습니다. 예를 들어 위의 캔버스에서 사각형을 클릭하면 실제로 전체 캔버스 요소를 클릭하게 됩니다. 캔버스 요소
코드는 다음과 같습니다.
cvs = document.getElementById('mycanvas'); cvs.addEventListener('click', function(e){ //... }, false);다음으로 이벤트 개체가 발생하는 위치를 결정해야 합니다. 이벤트 객체 e의 layerX 및 layerY 속성은 Canvas 내부 좌표계의 좌표를 나타냅니다. 그러나 이 속성은 Opera에서 지원되지 않으며 Safari에서는 이를 제거할 계획입니다.
코드 복사
코드는 다음과 같습니다.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}; }//참고: 위 기능을 사용하려면 Canvas 요소의 위치를 절대값으로 설정해야 합니다.
이제 이벤트 개체의 좌표 위치를 얻었으므로 캔버스의 어떤 그래픽이 이 좌표를 덮는지 결정해야 합니다. 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);위는 Canvas 이벤트를 처리하는 기본 방법이지만, 위의 코드에는 isPointInPath 메서드가 현재 컨텍스트의 경로만 결정하기 때문에 제한이 있습니다. 따라서 Canvas에 여러 그래픽이 그려진 경우 이벤트는 마지막 그래픽의 컨텍스트를 기준으로만 판단할 수 있습니다. 예:
코드를 복사하세요
코드는 다음과 같습니다.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위 코드에서 볼 수 있듯이 isPointInPath 메서드는 현재 컨텍스트의 그래픽 경로만 식별할 수 있으며 이전에 그려진 경로는 소급하여 판단할 수 없습니다. 이 문제에 대한 해결책은 클릭 이벤트가 발생하면 모든 그래픽을 다시 그리고 그려진 각 그래픽에 대해 isPointInPath 메서드를 사용하여 이벤트 좌표가 그래픽 범위 내에 있는지 확인하는 것입니다.
순환 다시 그리기 및 이벤트 버블링순환 다시 그리기를 수행하려면 그래픽의 기본 매개변수를 미리 저장해야 합니다.
复制代码
代码如下:
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!