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 行あります)。

アイデアは、4 つまたは 5 つの異なる「タイプ」の画像 (つまり、一部は資産、他は負債など) があり、ユーザーは各画像を対応する説明ボックス (キャンバスにも表示されます)。

だから私がやりたいのは、画像を1つの配列内の異なる「グループ」に入れることです。私はそれを調べましたが、これを行う最良の方法は連想配列を使用することであると理解しています。たとえば、次のようになります。

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、「ドラッグ可能な」画像の 1 つでイベントが検出されたときに「true」に設定されるブール値を持つことです。キャンバス上を移動するときのカーソルの x 座標と y 座標。

次に、mouseupイベントがトリガーされると、その時点でのカーソルの座標がどのようなものかを確認します。カーソルが説明ボックスの 1 つが描画される場所に画像をドロップした場合 (たとえば、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)" /major%20project/development/collision/kinetic.js :: :: 行 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 に答える