html5 canvas 태그에서 이미지의 계층 구조 트리 구조를 생성 하시겠습니까?

Question

이미지 그룹 사이에 트리 계층 적 관계가 있습니다. 이미지를 부모 노드 이미지보다 작은 자식 노드 이미지가있는 캔버스 태그의 트리 구조로 나타내려면 모든 이미지가 마우스 오버시 일부 값으로 확장되어야합니다.

javascript 함수를 사용하면 확대/축소 효과를 조정할 수 있지만 이미지가 표시 되더라도 마우스 이벤트 수신기 기능이 제대로 작동하지 않게되고 mouseover 및 mouseout이 감지되지 않습니다. 나는 디버깅을 위해 사용한 경고 메시지를 얻지 못했다. 이것은 단지 테스트 코드입니다 : -

function loadImages(sources, callback){ 
    var images = {}; 
    var loadedImages = 0; 
    var numImages = 0; 
    // get num of sources 
    for (var src in sources) { 
    numImages++; 
    } 
    for (var src in sources) { 
    images[src] = new Image(); 
    images[src].onload = function(){ 
     if (++loadedImages >= numImages) { 
      callback(images); 
     } 
    }; 
    images[src].src = sources[src]; 
    } 
    } 



window.onload = function(){ 
var canvas = document.getElementById("myCanvas"); 
var context = canvas.getContext("2d"); 
var destX = 20; 
var destY = 20; 
var destWidth = 200; 
var destHeight = 137; 

var sources = new Array(); 
sources[0]="darth-vader.jpg"; 
sources[1]="darth-vader.jpg"; 

var imageObj = new Image(); 

loadImages(sources, function(images){ 
    context.drawImage(images[0], destX, destY, destWidth, destHeight); 
    images[0].onmouseover=function() 
    { 
     alert('1'); 
    } 

    images[0].onmouseout=function() 
    { 
     alert('2'); 
    } 
    context.drawImage(images[1], destX+200,destY, destWidth, destHeight); 
    images[1].onmouseover=function() 
    { 
     alert('3'); 
    } 

    images[1].onmouseout=function() 
    { 
     alert('4'); 
    } 
     }); 
    }; 

Answer 1

이벤트는 캔버스에 그려진 이미지가 아닌 dom 요소에서 트리거됩니다. 이러한 이벤트를 시뮬레이트하고 싶다면 캔버스에 mousemove 이벤트를 설정하고 이미지가 그려진 영역 안에 마우스가있는 경우 마우스 오버를 트리거하십시오.

Answer 2

마우스 이벤트는 그려진 이미지가 아닌 캔버스 자체에만 넣을 수 있습니다.

사용자가 캔버스를 클릭 할 때 관련 작업을 수행 할 수 있도록 그려지는 이미지의 크기와 위치를 추적해야합니다. 캔버스에서 여러 선택 가능한 개체를 추적하는 방법에 대한 예제는 A Gentle Introduction to Making Canvas Useful을 참조하십시오.