功能范围外的图像参考问题

Question

我有用YAIL加载的图像，它运行得很好，但我需要"pill"图像是可拖动的，我需要pill图像是可引用的。我曾尝试通过将pill声明为done（）函数范围之外的变量来实现这一点，但这不起作用。到目前为止：

var currentdate = new Date();
var datetime = currentdate.getHours();
var loader = new YAIL(done, progress, errors);
var pill = new Image();
if(datetime==1||datetime==13){
loader.add("clock/clock1.png");
loader.add("clock/pill.png");
}
else if(datetime==2||datetime==14){
loader.add("clock/clock2.png");
loader.add("clock/pill.png");
}
else if(datetime==3||datetime==15){
loader.add("clock/clock3.png");
loader.add("clock/pill.png");
}
else if(datetime==4||datetime==16){
loader.add("clock/clock4.png");
loader.add("clock/pill.png");
}
else if(datetime==5||datetime==17){
loader.add("clock/clock5.png");
loader.add("clock/pill.png");
}
else if(datetime==6||datetime==18){
loader.add("clock/clock6.png");
loader.add("clock/pill.png");
}
else if(datetime==7||datetime==19){
loader.add("clock/clock7.png");
loader.add("clock/pill.png");
}
else if(datetime==8||datetime==20){
loader.add("clock/clock8.png");
loader.add("clock/pill.png");
}
else if(datetime==9||datetime==21){
loader.add("clock/clock9.png");
loader.add("clock/pill.png");
}
else if(datetime==10||datetime==22){
loader.add("clock/clock10.png");
loader.add("clock/pill.png");
}
else if(datetime==11||datetime==23){
loader.add("clock/clock11.png");
loader.add("clock/pill.png");
}
else if(datetime==0||datetime==12){
loader.add("clock/clock12.png");
loader.add("clock/pill.png");
}

loader.load();
function done(e) { 
    var imageLst = e.images;
    canvas.ctx.drawImage(imageLst[0], 400, 180);
    canvas.ctx.drawImage(imageLst[1], 580, 350, 30,30);
    redpill=imageLst[1];
}

Answer 1

这不是YAIL的问题，而是您在哪里声明变量的问题。

如果你想在其他函数中访问变量，你需要将变量放在函数范围之外（就像任何函数一样）：

var imageLst;  /// declare here
function done(e) { 
    imageLst = e.images;  /// set here, images are now available outside done()
    canvas.ctx.drawImage(imageLst[0], 400, 180);
    canvas.ctx.drawImage(imageLst[1], 580, 350, 30,30);
    redpill=imageLst[1];
}

注意：imageLst现在将可用于子函数。如果您需要从任何函数访问，则需要确保imageLst是在全局范围内声明的。

注2：即使变量在函数范围之外可用，在完成之前也不会进行实际设置。因此，与任何异步操作一样，您需要从done处理程序中调用解决方案中的下一步：

function done(e) {
    /// now the variable is set
    imageLst = e.images;
    /// go to next step in solution
    myNextStep();
}