在html5畫布標籤中創建圖像的層次樹結構？

在一組圖像之間存在一個樹形層次關係，我希望圖像在canvas標記中被表示爲一個樹形結構，子節點圖像小於父節點圖像，並且所有圖像都應該在mouseover上放大一些值。在html5畫布標籤中創建圖像的層次樹結構？

setscale和翻譯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'); 
    } 
     }); 
    };

來源

2011-12-27 ajish

您正在畫布上繪製圖像的副本。 'onmouseover'屬性只能在image * *元素上工作，而你沒有看到它。爲了得到像這樣的工作，你必須實現檢測光標和圖像的位置。 – pimvdb 2011-12-27 14:49:30

by image element你的意思是html圖片標籤？如果是的話，我可以得到與畫布標籤一起工作嗎？ – ajish 2011-12-27 15:03:35

是的，'新的圖像'基本上創建一個圖像標籤。你不能「只」將這個標籤放在畫布上。您只能在畫布上繪製可視化表示。你必須使用'canvas.onmouseover'並確定光標是否在一些數學圖像中。 – pimvdb 2011-12-27 15:22:13

在dom元素上觸發事件而不是在畫布上繪製的圖像上。如果要模擬這些事件，請嘗試在畫布上設置mousemove事件，然後如果鼠標位於繪製該圖像的區域內，則會觸發鼠標懸停。

來源

2011-12-27 14:50:20 mck89

Iam總的noob html5和畫布，你可以請建議如何檢測鼠標在哪個特定的圖像，如果它在某種程度上圖像？ – ajish 2011-12-27 15:01:23

如果我有兩幅圖像，A和B，我打算畫在畫布上，我應該在畫圖之前注意它們在畫布上的位置，尺寸等等：'A.x = 7; A.y = 195; A.width = 120; A.height = 60;'。然後當點擊畫布時，我檢查鼠標點擊（x，y）是否落在我繪製的任何對象的範圍內。當然有更高效的算法，但這是這個想法的要點。 – 2012-01-26 03:07:23

順便說一句，當我在這裏說「對象」時，我的意思是兩三個不同事物的鬆散關聯。你把「對象」想象成畫布上存在的東西，但那是錯誤的。畫布只是一堆像素（將相片複製並粘貼到MS畫圖中？同樣的想法）。我提到的「界限」只是你想省錢的數字。圖像是您「複製」到畫布上的原始圖像對象。除了你自己創造的東西之外，沒有任何聯繫。 – 2012-01-26 03:12:03

您只能將鼠標事件放在畫布本身上，而不是繪製到它的圖像上。

您將不得不開始跟蹤繪製圖像的大小和位置，以便在用戶單擊畫布時執行相關操作。有關如何跟蹤畫布上多個可選對象的示例，請參閱A Gentle Introduction to Making Canvas Useful。

來源

2011-12-27 15:00:30

在html5畫布標籤中創建圖像的層次樹結構？

回答

相關問題