자바 스크립트 배열의 각 요소에 다른 '유형'을 지정하는 방법은 무엇입니까?

Question

나는 다수 심상을 포함하는 JavaScript 배열이있다. 이미지는 모든 행을 사용하여 내 HTML에 숨겨진 섹션에서 촬영 한 같은

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

의 I 소스에서 직접 HTML에서 이미지를 얻기보다는하고 이유는 내가 30 중을 표시 할 때문에있는 그대로 HTML5 canvas에서 JavaScript 코드로 소스 코드를 직접로드하는 경우 페이지로드 시간이 오래 걸릴 수 있으므로 HTML의 숨겨진 섹션에서 해당 페이지를 미리로드 한 다음 거기에서 JavaScript 코드.

그래서, 나는 다음 내 자바 스크립트 배열을 만들었습니다

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

을합니다 (sources 배열에 이미지를 추가하는 약 30 라인이 있습니다).

이미지의 종류가 4 가지 또는 5 가지 (즉, 일부는 자산, 다른 일부는 부채 등)이며, 사용자는 각 이미지를 해당 이미지로 드래그해야합니다. 해당 설명 상자 (캔버스에 표시됨).

그래서 내가하고 싶은 것은 이미지를 하나의 배열 안에 다른 '그룹'에 넣는 것입니다. 나는 그것으로 모양을 했어, 나의 이해는이 작업을 수행하는 가장 좋은 방법은 연관 배열을 사용하는 것입니다 것입니다, 그래서, 예를 들면 :

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 이벤트가 감지되면 "true"로 설정된 부울을 갖는 것입니다. 캔버스 주위를 이동할 때 커서의 x 좌표을 추적합니다.

그런 다음 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 프레임 :: 파일 : /// M : /year%205/major%20project/development/collision/kinetic.js :: :: 라인 (4250) "데이터 : 아니오]

나는이 때문에 인 경우 궁금하네요 함수 나는이 함수의 끝에서 부르고있다 ...? 조금 더 설명하기 위해 window.onload 함수 안에 sources 배열을 만들고 사용하고 있습니다. 그것은 현재 다음과 같습니다

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 배열에서 변경된 내용이 잘못되었을 수 있습니까? 소식통은 선택 객체

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

, 당신은 단지 자산과 부채의 배열을 가질 수 있습니다 : 나는 당신의 소스를 구조 조정 좋을 것

Answer 1

은 반대.

그러면이 답변을 How to determine if object is in array 과 같이 사용하여 선택한 이미지의 '유형'을 파악할 수 있습니다.

---

또는 '유형'에 따라 이미지에 클래스를 추가 한 다음 사용자가 선택할 때이를 확인할 수 있습니다.