Question

基本上我有一个装满图片的文件夹。

E.G：

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

我想最终使用drawImage函数，如下所示：

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

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

如何以一种不需要100行代码的简洁方式进行此操作？

此外，图像文件夹也在不断扩展。有没有一种方法可以让代码自动＆＃34;通过文件夹＆＃34;并添加图像而不是手动将其添加到代码？

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到图像的地图。

Javascript - 定义图像树的有效方法

1 个答案: