我正在尝试为自己创建某种API，今天我正在Promises上开发图像加载系统。我进行了一些测试，由于某种原因，马里奥的图像未显示在画布上。没有错误消息。我已经尝试调试了一段时间，但是我不能让它工作：（
有人对如何解决它有想法吗？
当我尝试调试它时，我注意到了一些奇怪的事情：当您尝试使用grid.context.drawImage（mario，0，0）绘制mario时；在例如如果在Cellimage.draw中执行相同的操作，则Loader.add将其显示出来。 我希望这会有所帮助：/
function random(a, b, c) {
c = c || 1;
return Math.floor(Math.random()*Math.floor((b-a+1)/c))*c+a;
}
function loop(n, callback) {
for (let i = 0; i < n; i++) {
callback();
}
}
function varNameToString(objVar) {
return Object.keys(objVar)[0];
}
function createCanvas(container, width, height, id) {
container = container || document.body;
id = id || null;
width = width || 0;
height || height || 0;
let canvas = document.createElement("canvas");
if (id != null) { canvas.setAttribute("id", id); }
canvas.width = width;
canvas.height = height;
return container.appendChild(canvas);
}
Array.prototype.random = function() {
let randomElement = random(0, this.length - 1);
return this.slice(randomElement, randomElement + 1);
}
class Loader {
constructor(){
this.loaderImages = [];
}
add(img, src, onLoad) {
this.loaderImages.push({promise: new Promise(resolve => {
img.onload = function(){
//grid.context.drawImage(mario, 0,0);
resolve(img);
}
img.src = src;
}), onLoad: function(){
onLoad();
}
});
}
load(img, onLoad) {
this.loaderImages.img.promise.then(onLoad());
}
loadAll(onLoad) {
Promise.all(this.loaderImages).then((imgs) => {
console.log(imgs);
onLoad(imgs);
});
}
}
class Vector2d {
constructor(x, y) {
this.x = x;
this.y = y;
}
static add(vec1, vec2) {
return new Vector(vec1.x + vec2.x, vec1.y + vec2.y);
}
static dotProduct(vec1, vec2) {
return vec1.x * vec2.x + vec1.y * vec2.y;
}
static determinant(vec1, vec2) {
return new Vector(vec1.x * vec2.y - vec1.y * vec2.x);
}
arg() {
return Math.tan(this.y/this.x);
}
abs() {
return Math.sqrt(this.x*this.x + this.y*this.y);
}
multiplyScalar(scalar) {
return new Vector(this.x * scalar, this.y * scalar);
}
}
class Grid {
constructor(context, cellCountX, cellCountY, width, height, options) {
this.options = options || {
gridOffsetX: 0,
gridOffsetY: 0
}
this.context = context;
this.cellCountX = cellCountX;
this.cellCountY = cellCountY;
this.width = width;
this.height = height;
this.cells = [];
this.griOffsetX = this.options.gridOffsetX;
this.griOffsetY = this.options.gridOffsetY;
for(let i = 0; i < cellCountX; i++) {
this.cells[i] = [];
for(let j = 0; j < cellCountY; j++) {
this.cells[i][j] = {
context: context,
x: i,
y: j,
xcoord: i*width,
ycoord: j*height,
color: "white",
opacity: 0.0,
images: {},
text: "",
font: "",
border: {
thickness: 0,
color: "",
moveCellOrigin: false
},
fill: function(color, cellX, cellY, fillWidth, fillHeight) {
cellX = cellX + this.xcoord || this.xcoord;
cellY = cellY + this.ycoord || this.ycoord;
fillWidth = fillWidth || width;
fillHeight = fillHeight || height;
context.fillStyle = color;
context.fillRect(cellX, cellY, fillWidth, fillHeight);
},
addImage: function(image, name, width, height) {
this.images[name] = (new CellImage(this, image, this.x, this.y, width, height));
}
}
}
}
}
loop(callback) {
for(let i = 0; i < this.cellCountX; i++) {
for(let j = 0; j < this.cellCountY; j++) {
callback(i, j);
}
}
}
updateImgs() {
loop((i, j) => {
this.cells[i, j].drawImage(this.cells[i, j].img.image, this.cells[i, j].img.width, this.cells[i, j].img.height);
});
}
updateAll() {
updateImg();
}
}
class CellImage {
constructor(grid, image, x, y, width, height, options) {
this.grid = grid;
this.image = image;
this.x = x;
this.y = y;
this.width = width || image.width;
this.height = height || image.height;
this.options = options || {
offsetX: 0,
offsetY: 0,
sourceOffsetX: 0,
sourceOffsetY: 0,
sourceWidth: null,
sourceHeight: null,
rotationAngle: 0,
centerOfRotation: "CENTER"
}
}
draw() {
this.options.sourceWidth = (this.options.sourceWidth === null) ? this.image.width : this.options.sourceWidth;
this.options.sourceHeight = (this.options.sourceHeight === null) ? this.image.height : this.options.sourceHeight;
if (this.options.rotationAngle % 360 !== 0) {
if (this.options.centerOfRotation === "CENTER") {
this.grid.context.save();
this.grid.context.translate(this.grid.cells[this.x, this.y].xcoord + this.width / 2, this.grid.cells[this.x, this.y].ycoord + this.height / 2);
this.grid.context.rotate(this.options.rotationAngle*Math.PI/180);
this.grid.context.drawImage(this.image, this.options.sourceOffsetX,this.options.sourceOffsetY,this.options.sourceWidth,this.options.sourceHeight, -this.width/2, -this.height/2, this.width, this.height);
this.grid.context.restore();
} else {
this.grid.context.save();
this.grid.context.translate(this.options.centerOfRotation.x, this.options.centerOfRotation.y);
this.grid.context.rotate(this.options.rotationAngle*Math.PI/180);
this.grid.context.drawImage(this.image, this.options.sourceOffsetX,this.options.sourceOffsetY,this.options.sourceWidth,this.options.sourceHeight, -this.width/2, -this.height/2, this.width, this.height);
this.grid.context.restore();
}
} else {
this.grid.context.drawImage(this.image, this.options.sourceOffsetX, this.options.sourceOffsetY, this.options.sourceWidth, this.options.sourceHeight, this.xcoord + this.options.offsetX, this.ycoord + this.options.offsetY, this.width, this.height);
this.grid.context.drawImage(this.image, 300, 300);
}
}
}
var canvas = createCanvas(document.body, 640, 640, "myCanvas");
const ctx = canvas.getContext("2d");
var grid = new Grid(ctx, 3, 3, 200, 200);
grid.loop((x, y) => {
let color = ((x + y)%2 === 1) ? "grey" : "darkgrey";
grid.cells[x][y].fill(color);
});
var mario = new Image(), luigi = new Image();
var loader = new Loader();
loader.add(mario, "mario.png", () => {
grid.cells[1][2].addImage(mario, "mario", 200, 200);
console.log(grid.cells[1][2].images);
grid.cells[1][2].images.mario.draw();
});
loader.loadAll(imgs => {
loader.loaderImages.forEach(loaderImage => {
loaderImage.onLoad();
});});