Question

我有一个JavaScript数组，其中包含许多图像。所有图像都是使用诸如

之类的行从HTML中的隐藏部分拍摄的

sources[0] = document.getElementById("building").src

我从HTML而不是直接从源获取图像的原因是因为我想在HTML5画布上显示大约30个图像，如果我要将它们直接从源加载到JavaScript代码，页面需要花费很长时间才能加载，所以我已经将它们预加载到我的HTML的隐藏部分，然后从那里将它们加载到JavaScript代码中。

所以，我用以下内容创建了我的JavaScript数组：

var sources = [];
sources[0] = document.getElementById("building").src,
sources[1] = document.getElementById("chair").src,
....

（大约有30行用于向sources数组添加图像）。

这个想法是将有四到五种不同的“类型”图像（即一些将是资产，另一些将是负债等），并且用户将被要求将每个图像拖动到其对应的描述框（也显示在画布上）。

所以我想做的是将图像放在一个数组中的不同“组”中。我已经看了一下，我的理解是，最好的方法是使用关联数组，例如：

var sources = {
    name1 : ["name1", "place1", "data1"],
    name2 : ["name2", "place2", "data2"],
    name3 : ["name3", "place3", "data3"]
};

但是我不确定如何在我现有的情况下使用它...我会做以下的事情吗？

var sources = {
    asset1 : document.getElementById("building").src,
    asset2 : document.getElementById("chair").src,

    liability1: document.getElementById("electricity").src,
    ...
};

当用户将图像拖动到他们认为属于的描述框时，我如何检查图像是否属于它被拖动到的描述框？

我打算检查图像是否已被拖动到正确的描述框的方式是，当在其中一个'draggable上检测到mousedown事件时，将布尔值设置为“true” '图像，并跟踪x＆amp; y光标在画布上移动时的y坐标。

然后，当触发mouseup事件时，我将检查光标在该点的坐标。如果光标已将图像放到绘制其中一个描述框的位置（例如，x在介于150-200之间的50-100之间是资产描述框的位置，则负债描述框位于x 150 -200，y 150-200），然后我将检查哪个描述框位于该位置（循环描述框位置数组，并检查哪一个位于光标位置，如果有的话）。

一旦我在该位置有了描述框的名称，我将检查刚刚删除的图像的“类型”是什么，如果它与被删除的位置的框匹配，将从画布中消失，如果没有，它将被拉回到用户最初“拾取”的位置。

我不知道如何做到这一点，我如何访问用户从阵列中点击的图像的“类型”？

修改2013-03-13T14：15

所以我给出了建议的答案。但是，当我现在在浏览器中查看我的页面时，不显示画布，并且我在控制台中收到“未捕获的异常”错误。此错误消息显示：

未捕获的异常：[异常... “组件返回失败代码：0x80040111（NS_ERROR_NOT_AVAILABLE）[nsIDOMCanvasRenderingContext2D.drawImage]” nsresult： “0x80040111（NS_ERROR_NOT_AVAILABLE）” 位置：“JS帧::文件：/// L：/年％205 / major％20project / development / collision / kinetic.js ::: line 4250“data：no]

我想知道这是否是因为我在这个函数结束时调用的函数...？为了进一步解释，我正在sources函数中创建并使用window.onload数组。它目前看起来像这样：

window.onload = function(){
    var sources = {
        assets: [],
        liabilities: [],
        income: [],
        expenditure: []
    }
    console.log("the code reaches here");
    sources.assets[0] = document.getElementById("building").src,
    sources.assets[1] = document.getElementById("chair").src,
    sources.assets[2] = document.getElementById("drink").src,
    sources.assets[3] = document.getElementById("food").src,
    sources.assets[4] = document.getElementById("fridge").src,
    sources.assets[5] = document.getElementById("land").src,
    sources.assets[6] = document.getElementById("money").src,
    sources.assets[7] = document.getElementById("oven").src,
    sources.assets[8] = document.getElementById("table").src,
    sources.assets[9] = document.getElementById("van").src,

    sources.liabilities[10] = document.getElementById("burger").src,
    sources.liabilities[11] = document.getElementById("chips").src,

    /* I have loads of lines like this, adding in roughly 30 images */

    /*Maybe create an array of attributes within each position
      of this array, so that I have access to all of each
      element's attributes. */

    /*Create an associative array for the images and their types*/
    var imageTypes = new Array();

    /*Use a loop to populate the associative array, declare variables for the total number
      of items in each group, declare a variable for the item being for example: */

    var numAssets = 10;
    var numLiabilities = 5;
    var numEx = 11;
    var numInc = 8;

    // Error checking- check total of these numbers adds up to the number elements in sources array.

    var j = 0; // This is to indicate the location of the image in sources array

    loadImages(sources, drawImage);
    drawGameElements();
    drawDescriptionBoxes();
    //drawBox();

    stage.add(imagesLayer);
};

由于我在window.onload函数末尾调用的其他函数之一，画布现在是否显示？但是在我更改sources数组之前，这些函数调用是否正确执行，所以我在sources数组中更改的内容可能有问题吗？

Answer 1

我建议将您的来源对象重组为：

var sources = {
  assets: [],
  liabilities: []
};

sources.assets[0] = document.getElementById("building").src;
sources.assets[1] = document.getElementById("chair").src;
...
sources.liabilities[0] = document.getElementById("electricity").src;
...

sources对象是可选的，您可以拥有资产和负债数组。

然后你可以使用这个答案： How to determine if object is in array 找出所选图像的“类型”。

或者，您可以根据图像的“类型”为图像添加一个类，然后在用户选择时检查它。

如何给JavaScript数组的每个元素一个不同的'类型'？

1 个答案: