HTML5 Canvas의 이벤트 처리 소개

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

<.> 캔버스 제한 사항

캔버스에서는 모든 그래픽이 프레임에 그려집니다. 그리기 방법은 그려진 그래픽 요소를 반환 값으로 출력하지 않습니다. 예:

코드는 다음과 같습니다.

cvs = document.getElementById('mycanvas')

ctx = canvas .getContext('2d');

　theRect = ctx.ect(10, 10, 100, 100);

　ctx.strok();

console.log (theRect); //undefine

이 코드는 캔버스 태그에 직사각형을 그립니다. 먼저 그래픽을 그리는 ret 메소드에 반환 값이 없음을 알 수 있습니다. 브라우저를 보면 캔버스 태그 내부에 콘텐츠가 추가되지 않은 것을 볼 수 있지만 js에서는 캔버스 요소와 현재 얻은 컨텍스트에 새 그래픽을 나타내는 콘텐츠가 없으므로 프런트 엔드에서 일반적으로 사용되는 dom 메서드가 없습니다. 예를 들어 위의 Canvas에서 사각형을 클릭하면 실제 클릭은 Canvas 요소 전체가 됩니다.

Canvas 요소에 이벤트 바인딩

이벤트는 캔버스 요소 수준에서 더 나아가려면 캔버스에서 클릭이 발생했는지 확인하세요. 처리를 위해 어떤 내부 그래픽을 추가해야 할까요? 기본 아이디어는 이벤트가 발생하면 캔버스 요소에 이벤트를 바인딩하는 것입니다. 예를 들어 위의 예에서는 x축의 10-110 범위와 x축의 10-110 범위를 포함하는 사각형이 그려집니다. 이 범위에서 마우스를 클릭하면 사각형을 클릭하는 것으로 간주할 수 있으며, 사각형에서 처리해야 하는 클릭은 실제로 비교적 간단합니다. 하지만 구현은 여전히 ​​다소 복잡합니다. 이 판단 프로세스의 효율성을 고려해야 할 뿐만 아니라 이벤트 유형도 일부 위치에서 다시 판단되어야 하며 Canvas 내부의 캡처 및 버블링 메커니즘을 재정의해야 합니다.

가장 먼저 해야 할 일은 이벤트를 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.ect(10, 10, 100, 100);

ctx.Stroke();

ctx.isPointInPath(50, 50); //true

ctx.isPointInPath(5, 5);

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

코드는 다음과 같습니다.

cvs.addEventListener('click', function(e) {

p = getEventPosition(e);

if(ctx.isPointInPath(p.x, p.y)){

//직사각형 클릭

}

　}, false);

위는 Canvas 이벤트를 처리하는 기본 방법이지만 위 코드에는 여전히 제한 사항이 있습니다. 캔버스에 여러 객체가 그려져 있는 경우 그래픽을 그릴 때 마지막 그래픽의 맥락을 통해서만 이벤트를 판단할 수 있습니다. 예:

코드는 다음과 같습니다.

cvs = document.getElementById('mycanvas');

ctx = canvas.getContext('2d');

ctx.beginPath();

ctx.lect(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, 너비:100, 높이: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('click', function(e ){

p = getEventPosition(e);

draw(p);

}, false);

이벤트가 발생하면 이벤트가 object 좌표는 처리를 위해 그리기 메서드에 전달됩니다. 여기에서는 그리기 메서드에도 약간의 변경을 가해야 합니다.

코드는 다음과 같습니다.

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 배열 요소에서 해당 항목을 찾을 수 있습니다.

return who;

}

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

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

위 내용은 HTML5 Canvas의 이벤트 처리에 대한 소개입니다. 더 많은 관련 글은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!