JavaScript-通過在HTML5畫布上單擊存儲在對象數組中的圖像來獲取對象的屬性

Question

我有以下JS對象：

var sources = {
        assets: [],
        liabilities: [],
        income: [],
        expenditure: []
    }

如您所見，該對象包含許多JS數組。 我使用以下行將HTML隱藏部分中的許多圖像添加到這些數組中：

sources.assets[0] = document.getElementById("building").src,
sources.assets[1] = document.getElementById("chair").src,
sources.liabilities[0] = document.getElementById("burger").src,
sources.liabilities[1] = document.getElementById("chips").src,

我現在想做的是：當在畫布上的這些圖像之一上檢測到單擊（或mousedown ）時，我想找出圖像在對象內屬於哪個數組，並保存該值數組（即數組名稱-資產/負債等）到變量。

但是我不確定如何找到它...我嘗試使用以下命令在圖像上檢測到單擊時打印圖像屬性的內容：

console.log("value of variable obj:" + output + ". Shape is " + obj.shape + ". index is " + obj.shape.index);

但這只是在控制台中提供了以下打印輸出

value of variable obj:shape: [object Object]; pixel: [object Uint8ClampedArray]; . Shape is [object Object]. index is 7

在控制台中。

我正在使用KineticJS庫的本地副本將圖像繪制到畫布上，並且我知道obj變量是dynamicJS庫中mousedown函數中使用的變量。

要求用戶將每個“可拖動”圖像拖到其相應的描述框（位於畫布上）。

我想知道的是如何找出被單擊的圖像屬於哪個數組，然后可以將該數組的名稱與用戶拖動“被單擊”的圖像的名稱進行比較。圖像到：如果它們相同，則用戶已將圖像拖到正確的描述框中；如果不相同，則他們做出了錯誤的選擇。

有誰知道我如何找出點擊圖像屬於哪個數組？

Answer 1

在創建dynamicJS圖像時，將每個圖像的“名稱”屬性設置為如下所示的圖像類型：

var chair = new Kinetic.Image({
      x: 140,
      y: 20,
      name: chair,
      ...more...

然后，當選擇圖像時，可以使用所選對象的.getName（）檢索“椅子”。

從那里開始數組查找，一切都很好...

因此，您使用的是類似於CSS類名的“ name”屬性。