图像数组P5.js

Array of images P5.js

本文关键字：js P5 数组 图像      更新时间：2023-09-26

我在preload函数中创建了一个稍后要使用的图像数组。然而，当我想使用图像属性的高度和宽度类型是未定义的。在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);
}

所以imag1。高度值未定义。我猜解释器丢失了类型，所以有一种方法来恢复类型和信息?类似于Java或c++中的强制转换?

然而，如果不改变请求图像的属性，我可以打印图像，但每个图像都有自己的值，我不能调整它们的大小。

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

尽量缩小问题范围。当你这样做的时候会发生什么?

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

如果this是undefined，那么你知道图像位置有问题。检查位置和拼写。检查web浏览器中开发人员工具的network选项卡，以确保文件正在加载。

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

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，这将帮助您提出更具体的问题。好运。

相关文章：