在 html5 canvas 标签中创建图像的分层树结构？

Question

一组图像之间存在树状层次关系，我希望图像在画布标记中表示为树结构，其中子节点图像小于父节点图像，并且所有图像应在鼠标悬停时按一定值放大。

setscale 和translate javascript 函数让我可以很好地实现缩放效果，但我无法使鼠标事件侦听器函数正常工作，尽管显示了图像，但未检测到鼠标悬停和鼠标移出。我没有收到用于调试的警报消息。这只是一个测试代码：-

     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

您只能将鼠标事件放在画布本身上，而不能放在绘制到画布上的图像上。

您必须开始跟踪所绘制图像的大小和位置，以便在用户单击画布时可以执行相关操作。有关如何跟踪的示例，请参阅让 Canvas 变得有用的简要介绍画布上的多个可选对象。