0

我有一个包含许多图像的 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,
....

sources（将图像添加到数组中大约有 30 行）。

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

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

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,
    ...
};

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

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

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

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

我不确定如何执行此操作，我如何访问用户从数组中单击的图像的“类型”？

编辑 2013-03-13T14:15

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

未捕获的异常：[异常...“组件返回失败代码：0x80040111（NS_ERROR_NOT_AVAILABLE）[nsIDOMCanvasRenderingContext2D.drawImage]”nsresult：“0x80040111（NS_ERROR_NOT_AVAILABLE）”位置：“JS 框架 :: file:///M:/year%205 /major%20project/development/collision/kinetic.js :: :: line 4250" 数据：无]

我想知道这是否是因为我在这个函数末尾调用的函数......？为了进一步解释，我在函数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数组中更改的内容可能有问题？

4

1 回答 1

-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;
...

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

然后您可以使用这个答案： 如何确定对象是否在数组 中以找出所选图像的“类型”。

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

于 2013-03-13T10:56:30.757 回答