HTML5 Canvas의 이벤트 처리 소개

이 글에서는 주로 HTML5 Canvas의 이벤트 처리, Canvas 요소에 이벤트 바인딩, isPointInPath 메서드, 루프 다시 그리기 및 이벤트 버블링에 대해 설명합니다. 웹 프런트엔드 필드의 일부입니다. DOM은 HTML 요소를 처리할 때뿐만 아니라 그래픽 프로그래밍에도 사용됩니다. 예를 들어 SVG 드로잉에서는 다양한 그래픽이 DOM 노드 형태로 페이지에 삽입되는데, 이는 DOM 메소드를 사용하여 그래픽을 조작할 수 있음을 의미합니다. 예를 들어 요소가 있는 경우 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은 캔버스에서는 적용되지 않습니다. 예를 들어 위의 캔버스에서 사각형을 클릭하면 실제로 전체 캔버스 요소를 클릭하게 됩니다. 캔버스 요소

이벤트는 캔버스 요소 레이어에만 도달할 수 있으므로 더 나아가 클릭이 발생한 캔버스 내의 그래픽을 식별하려면 이를 처리하기 위한 코드를 추가해야 합니다. Canvas 요소에 이벤트를 추가하고 이벤트가 발생하면 이벤트 객체의 위치를 ​​확인한 다음 어떤 객체가 해당 위치를 덮는지 확인합니다. 예를 들어 위의 예에서는 직사각형이 그려집니다. x축 10~110, y축 10~110 범위 내에서 마우스를 클릭하는 한, 즉 사각형을 클릭한 것으로 간주할 수 있습니다. 직사각형에 의해 처리되어야 하는 것은 수동으로 트리거될 수 있습니다. 아이디어는 실제로 비교적 간단하지만 구현은 여전히 ​​약간 복잡합니다. 이 판단 프로세스의 효율성을 고려해야 할 뿐만 아니라 이벤트 유형도 다시 설정해야 합니다. 캡처 및 버블링 메커니즘을 재정의해야 합니다.

가장 먼저 해야 할 일은 이벤트를 Canvas 요소에 바인딩하는 것입니다. Canvas 내부의 그래픽을 사용하려면 Canvas 요소를 통해 이벤트를 프록시해야 합니다.

코드 복사

코드는 다음과 같습니다.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!