У меня есть программа, которая отслеживает число. Если вы превысите свое целевое число, вы посетите страницу, на которой показано, сколько еще вы накопили. На этой странице находится автомат для жевательной резинки, и в зависимости от количества излишков, которое вы накопили, определенное количество жевательных резинок появляется сбоку от машины. Все работает нормально, но примерно на 1 из каждых трех страниц загружается жевательная резинка, а затем появляется машина, сначала покрывая все изображения жевательной резинки.
Это делается через vue. js Вот код, который у меня есть:
created () {
this.$http.get('/gumballs/' + this.$auth.user().id).then(res => {)
this.createCanvas()
})
}
*******
createCanvas () {
// general canvas properties...
// gumball machine properties
this.createGumbllMachine(canvas.width, ctx, (err, succ) => {
if (err) {
console.log(err)
} else if (succ) {
this.createGumballs(canvas.width, ctx)
}
})
}
**********
createGumballMachine (width, ctx, cb) {
const imgObj = document.createElement('img')
imgObj.src = machineImg
imgObj.onload = () => {
ctx.drawImage(imgObj, (width / 2) - 350, 100)
}
return cb(null, 'ok')
}
Я попытался использовать функцию обратного вызова в качестве последнего аргумента в createGumballMachine() так что сначала рисуется машина, а потом рисуются жевательные резинки, но это не работает.
Я также пробовал использовать async и await, но я не мог получить изображение для рендеринга в все так. Что-то происходило, когда vue никогда не мог пройти часть своего жизненного цикла created.
Я пробовал читать об этом по другим вопросам SO, но не могу понять. Я знаю, что у него есть какое-то отношение к работе ctx.dtawImage(), но я застрял.
Любая помощь приветствуется. Если вам нужно увидеть код для createGumballs(), дайте мне знать, но я не понимаю, как это вызывает проблему.