자바 스크립트 - 이미지 트리를 정의하는 효율적인 방법

Question

기본적으로 나는 밖으로 분기하는 이미지가 가득한 폴더가 있습니다.

EG :

var gender = "male", 
    color = "white", 
    clothing = "plain"; 

ctx.drawImage(character[gender][clothing][color], 0, 0, 100, 100); 

가 어떻게 100 개 라인을 필요로하지 않는 깔끔한 방법으로이 일에 대해 갈 것 : 나는 drawImage 기능과 같이 사용하게 할

Character 
__male 
____plain 
______white 
______brown 
______black 
____suit 
______white 
______brown 
______black 
__female 
____plain 
______white 
______brown 
______black 
____dress 
______white 
______brown 
______black 
____bathingSuit 
______white 
______brown 
______black 

코드?

또한 이미지 폴더도 확장되고 있습니다. 코드가 자동으로 폴더를 거쳐 코드에 수동으로 추가하는 대신 이미지를 추가 할 수있는 방법이 있습니까?

Answer 1

함수 내에서 논리를 캡슐화하고 올바른 이미지를 설정할 때 문자열 연결을 사용하십시오. src. 당신의 Character 폴더를 가정하면 HTML 파일과 같은 디렉토리에, 당신은 사용할 수 있습니다

// Placeholder variable 
 
var ctx = { drawImage: Function.prototype } 
 

 

 
var imageCache = {} 
 

 
function getCharacterImage(options) { 
 
    var src = ['Character', options.gender, options.clothing, options.color, options.action].join('/') + '.png' 
 

 
    if (src in imageCache) return imageCache[src] 
 

 
    var image = imageCache[src] = document.createElement('img') 
 
    image.src = src 
 
    return image 
 
} 
 

 
var image = getCharacterImage({ 
 
    gender: 'male', 
 
    color: 'white', 
 
    clothing: 'plain', 
 
    action: 'walking' 
 
}) 
 

 
console.log(image.src) 
 

 
ctx.drawImage(image, 0, 0, 100, 100)

편집 : 이미 생성 된 캐시 이미지를 선호 경우, 당신이 할 수있는 동적 객체 키를 사용하여 이미지에 src 초의지도를 만듭니다.