HTML5 Canvas의 이벤트 처리 정보

이 글에서는 주로 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

이 코드는 캔버스 태그에 직사각형을 그립니다. 브라우저의 개발자 도구를 보면 캔버스 태그 내부도 볼 수 있습니다. 추가된 콘텐츠가 없으며, js에서 얻은 캔버스 요소와 현재 컨텍스트에는 새로운 그래픽을 나타내는 콘텐츠가 없습니다.

따라서 일반적으로 사용되는 dom 메서드는 다음과 같습니다. 위의 클릭과 같이 캔버스에서는 적용할 수 없습니다.

이벤트를 캔버스 요소에 바인딩합니다

이벤트는 캔버스 요소 수준에만 도달할 수 있습니다. 더 자세히 알고 싶다면 Canvas 내부에서 발생하는 클릭을 확인하세요. 처리를 위해 어떤 그래픽을 추가해야 하는지, 이벤트가 발생하면 이벤트 개체의 위치를 ​​확인하는 것이 기본 아이디어입니다. 를 클릭한 다음 위의 예에서 어떤 그래픽이 해당 위치를 덮는지 확인합니다. 마우스가 있는 한 x축에서 10-110 범위를 포괄합니다. 이 범위 내에서 클릭하면 사각형을 클릭한 것으로 간주할 수 있으며 사각형에서 처리해야 하는 클릭 이벤트를 수동으로 트리거할 수 있습니다. 아이디어는 실제로 비교적 간단하지만 구현은 여전히 ​​약간 복잡합니다. 이 판단 프로세스의 효율성을 고려해야 하지만 이벤트 유형도 일부 위치에서 다시 판단해야 하며 캔버스 내부의 캡처 및 버블링 메커니즘을 재정의해야 합니다.

첫 번째로 해야 할 일은 그렇습니다. 예를 들어 클릭 이벤트를 Canvas 내부의 그래픽에 바인딩하려면 Canvas 요소를 통해 이벤트를 프록시해야 합니다.

cvs = document.getElementById('mycanvas');
cvs.addEventListener('click', function(e){
  //...
}, false);

다음으로 이벤트가 있는 위치를 결정해야 합니다. object가 발생하고 이벤트 객체의 layerX와 layerX가 발생합니다. :

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에 여러 그래픽을 그린 경우 마지막 그래픽만 사용할 수 있습니다. Context는

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);

이벤트가 발생하면 처리를 위해 이벤트 개체의 좌표를 그리기 메서드에 전달합니다. 여기서 그리기 방법에 몇 가지 작은 변경이 필요합니다:

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，还需要记录鼠标移动的路线，给图形设置进出状态。由于处理的步骤变得复杂起来，必须对性能问题提高关注。

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

HTML5 canvas学习的实例介绍

angularJS结合canvas画图的实现

위 내용은 HTML5 Canvas의 이벤트 처리 정보의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!