Question

在一组图像之间存在树形层次关系，我希望图像在canvas标签中表示为树结构，子节点图像小于父节点图像，并且所有图像都应在鼠标悬停时按比例放大。

setcale和translate 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。

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

2 个答案: