HTML5 Canvas_html5 튜토리얼 기술의 이벤트 처리 소개

DOM은 웹 프론트엔드 분야에서 매우 중요한 부분입니다. DOM은 HTML 요소를 처리할 때뿐만 아니라 그래픽 프로그래밍에도 사용됩니다. 예를 들어 SVG 드로잉에서는 다양한 그래픽이 DOM 노드 형태로 페이지에 삽입되는데, 이는 DOM 메소드를 사용하여 그래픽을 조작할 수 있음을 의미합니다. 예를 들어 요소가 있는 경우 jquery를 사용하여 클릭 이벤트 $('#p1').click(function(){…})"을 직접 추가할 수 있습니다. 이 DOM 처리 방법은 HTML5에 적합하지 않습니다. Canvas에서는 다른 메커니즘을 사용합니다. Canvas에 아무리 많은 그래픽을 그려도 Canvas는 실제로 Canvas의 일부이며 그럴 수 없습니다. 별도로 얻어서 누군가에게 직접 줄 수는 없습니다.

그래픽에 JavaScript 이벤트를 추가했습니다.

캔버스의 한계

캔버스에서는 모든 그래픽이 프레임에 그려집니다. 그리기 메서드는 그려진 그래픽 요소를 반환 값으로 출력하지 않으며 js는 그려진 그래픽 요소를 얻을 수 없습니다. 예:

코드 복사

코드는 다음과 같습니다.

cvs = document.getElementById( 'mycanvas' );
ctx = canvas.getContext('2d');
theRect = ctx.ect(10, 10, 100, 100);
ctx.strok();
콘솔 .log(theRect); //정의되지 않음

이 코드는 캔버스 태그에 직사각형을 그리는 코드입니다. 우선 그래픽을 그리는 ret 메서드에는 반환 값이 없다는 것을 알 수 있습니다. 브라우저의 개발자 도구를 열면 캔버스 태그 내부에 콘텐츠가 추가되지 않았으며 js에서 얻은 캔버스 요소와 현재 컨텍스트에는 새 그래픽을 나타내는 콘텐츠가 없는 것도 확인할 수 있습니다.

따라서 프런트엔드에서 흔히 사용하는 DOM 방식은 캔버스에서는 적용할 수 없습니다. 예를 들어 위의 Canvas에서 직사각형을 클릭하면 실제로 전체 Canvas 요소를 클릭하게 됩니다.

캔버스 요소에 이벤트 바인딩

이벤트는 캔버스 요소 수준에만 도달할 수 있으므로 더 나아가 클릭이 발생한 캔버스 내의 그래픽을 식별하려면 처리할 코드를 추가해야 합니다. 기본 아이디어는 이벤트가 발생하면 이벤트 개체의 위치를 ​​확인한 다음 해당 위치를 덮는 그래픽을 확인하는 것입니다. 예를 들어 위의 예에서는 x축으로 10~110, y축으로 10~110 범위를 포함하는 직사각형을 그렸습니다. 이 범위 내에서 마우스를 클릭하는 한 직사각형을 클릭한 것으로 간주할 수 있으며 직사각형에서 처리해야 하는 클릭 이벤트를 수동으로 트리거할 수 있습니다. 아이디어는 실제로 비교적 간단하지만 구현은 여전히 ​​약간 복잡합니다. 이 판단 프로세스의 효율성을 고려해야 할 뿐만 아니라 이벤트 유형도 일부 위치에서 다시 판단해야 하며 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.direct(10, 10, 100, 100);
ctx.strok();
ctx.isPointInPath (50, 50); //참
ctx.isPointInPath(5, 5); //거짓

다음으로 직사각형에서 클릭 이벤트가 발생하는지 확인하는 이벤트 판단을 추가합니다.

코드 복사

코드는 다음과 같습니다.

cvs.addEventListener('클릭 ', function (e){
p = getEventPosition(e);
if(ctx.isPointInPath(p.x, p.y)){
//사각형 클릭
}
}, false );

위는 Canvas 이벤트를 처리하는 기본 방법이지만 위 코드에는 isPointInPath 메서드가 여러 그래픽이 그려진 경우 현재 컨텍스트에서만 경로를 결정하므로 제한이 있습니다. 캔버스만 이벤트는 마지막 그래픽의 맥락을 기준으로 판단할 수 있습니다. 예:

코드 복사

코드는 다음과 같습니다:

cvs = document.getElementById('mycanvas');
ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.direct(10, 10, 100, 100);
ctx.Stroke();
ctx.isPointInPath(20, 20); //true
ctx.beginPath();
ctx.direct(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, 너비: 100, 높이: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.lect(v.x, v.y, v.width, v.height);
ctx.strok();
});
}

위 코드는 두 개의 직사각형의 기본 매개변수를 미리 저장해 두고 있으며, draw 메소드가 호출될 때마다 이러한 기본 매개변수가 루프에서 호출되어 두 개의 직사각형을 그립니다. 여기서는 다시 그릴 때 캔버스를 지우는 데에도clearRect 메서드가 사용됩니다. 다음으로 해야 할 일은 이벤트 대리자를 추가하고 다시 그릴 때 각 컨텍스트에서 isPointInPath 메서드를 사용하는 것입니다.

코드 복사

코드는 다음과 같습니다.

cvs.addEventListener('클릭 ', 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.direct(v.x, v.y, v.width, v.height);
ctx.strok();
if(p && ctx.isPointInPath(p.x, p.y)){
// 이벤트 좌표가 전달되면 isPointInPath를 사용하여 결정합니다.
//현재 환경이 좌표를 포함하는 경우 현재 환경의 인덱스 값을 배열에 넣습니다.
who.push(i);
}
});
//배열의 인덱스 값에 따라 해당 요소를 arr 배열에서 찾을 수 있습니다.
누구를 반환;
}

위 코드에서는 클릭 이벤트가 발생하면 그리기 메소드가 다시 그리기를 수행하고, 다시 그리기 과정에서 각 그래픽이 이벤트 좌표를 덮고 있는지 확인하고, 판단이 참이면 그래픽이 클릭된 것으로 간주합니다. , 그래픽의 인덱스 값을 배열에 넣고 마지막으로 배열을 draw 메서드의 반환 값으로 사용합니다. 이 처리 메커니즘에 따라 캔버스에 N개의 그래픽이 있고 그 중 일부가 겹치고 이 겹치는 영역에서 클릭 이벤트가 발생하면 그리기 메서드의 반환 배열에 N개의 멤버가 있게 됩니다. 이때는 이벤트 버블링의 상황과 조금 비슷합니다. 배열의 마지막 멤버가 Canvas 상단에 있고, 첫 번째 멤버가 하단에 있다고 생각하면 됩니다. 이고 다른 멤버는 e.target입니다. 버블 프로세스 중에 전달된 노드입니다. 물론 이것은 가장 간단한 처리 방법일 뿐입니다. 실제로 DOM 처리를 시뮬레이션하려면 그래픽에 대한 부모-자식 관계를 설정해야 합니다.

위는 Canvas 이벤트 처리의 기본 방법입니다. 실제 애플리케이션에서는 그래픽 매개변수를 캐시하는 방법, 루프 다시 그리기를 수행하는 방법, 이벤트 버블링을 처리하는 방법 모두 실제 상황에 따라 처리해야 합니다. 그리고, click은 상대적으로 처리하기 쉬운 이벤트인데, 상대적으로 귀찮은 이벤트로는 mouseover, mouseout, mousemove가 있습니다. 마우스가 Canvas 요소에 들어가면 항상 mousemove 이벤트가 발생하므로 mouseover나 mouseout을 별도로 설정하고 싶을 경우가 있습니다. 특정 그래픽의 경우 마우스 이동 경로를 기록하고 그래픽의 시작 및 종료 상태도 설정해야 합니다. 처리 단계가 더욱 복잡해짐에 따라 성능 문제에 더 많은 주의를 기울여야 합니다.