создание иерархической древовидной структуры изображений в тэге html5 canvas? - PullRequest
Новая
       20

создание иерархической древовидной структуры изображений в тэге html5 canvas?

2 голосов
/ 27 декабря 2011

существует древовидная иерархическая связь между группой изображений, я хочу, чтобы изображения были представлены в виде древовидной структуры в теге 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');
    }
      });
     };

Ответы [ 2 ]

0 голосов
/ 27 декабря 2011

Вы можете размещать события мыши только на самом холсте, а не на изображениях, нарисованных на нем.

Вам нужно будет следить за размером и расположением нарисованных изображений, чтобы вы могли делать соответствующие вещи, когда пользователь нажимает на холст. См. Нежное введение в создание полезного Canvas , где приведены примеры того, как отслеживать несколько выбираемых объектов на холсте.

0 голосов
/ 27 декабря 2011

События инициируются элементами dom, а не изображениями, написанными на холсте. Если вы хотите смоделировать эти события, попробуйте установить событие mousemove на холсте, а затем, если мышь находится внутри области, где вы нарисовали изображение, запустите наведение мыши.

...