javascript - 图像数组 P5.js

Question

我在预加载函数中创建了一个稍后要使用的图像数组。但是，当我想使用图像属性高度和宽度时，类型未定义。有什么方法可以在javascript中进行转换或其他东西吗？

我尝试创建一个新图像，但我错过了图像属性，例如:

    var images = new Array();
function preload() {    
images.push(loadImage("image0.jpg"));

var img=loadImage("image1.jpg");
var aspect = img.height / img.width; // Here I successfully get the image properties
images.push(img);
}

function setup() {
createCanvas(1000, 600);
var imgNum = parseInt(random(0, images.length - 1), 10);
var img1 =images[parseInt(imgNum, 10)];
var aspect = img1.height / img1.width; // Here img1 has undefined type so the value img1.height is undefined too.

            console.log("value: "+aspect);
    image(images[imgNum], 0, 0);
    console.log(img1);
}

因此 img1.height 值未定义。我猜解释器丢失了类型，所以有办法恢复类型和信息吗？类似于 java 或 c++ 中的强制转换？

但是，如果不更改询问图像的属性，我可以打印图像，但每个图像都有自己的值，我无法调整它们的大小。

function setup() {
 createCanvas(1000, 600);
 var img1 =images[parseInt(imgNum, 10)];
 image(img1, 0, 0);
}

Answer 1

尝试缩小问题范围。当你这样做时会发生什么？

function preload() {
   var img = loadImage("image0.jpg");
   console.log(img.height);
}

如果这是未定义的，那么您就知道该图像位置有问题。检查位置和拼写。检查网络浏览器中开发人员工具的网络选项卡，确保文件正在加载。

当你运行这个时会发生什么？

var x = parseInt(random(100, width), 10);
console.log(x);

x 的值是多少？是你所期望的吗？

同样，它的值是多少？

parseInt(imgNum, 10)

如果这是有道理的，那么请继续这一行:

var img1 =new p5.Image(images[parseInt(imgNum, 10)]);

你为什么要这样做？ images 数组应该已经包含 p5.Image 的实例。这条线实际上没有任何意义。您应该能够做更多类似这样的事情:

var img1 = images[2];

请注意，我已经对索引进行了硬编码。从这里开始只是为了测试目的。

请注意，这些问题更多的是你要问自己。这就是调试问题的过程，也是遇到这样的问题时应该做的事情。尝试通过找出代码的哪些部分正在工作来隔离问题。然后对这些部分进行硬编码以创建 MCVE ，这将帮助您提出更具体的问题。祝你好运。