P5图像不渲染

Question

编辑：看看我在post

最后做错了什么

我是 P5.js 的新手，我正在尝试按照 P5 参考加载图像。我正在使用没有缓存保存的本地节点 http-server。这是我的项目的结构：

我认为显示 Controls、Factory、Hive、Bee javascript 文件无关，因为它们没有使用任何 P5 相关代码。

这是我的“主要”代码：

const ctrls = new Controls();
const fctry = new Factory();

const wH = window.innerHeight;
const wW = window.innerWidth;

var sprites = {};

function preload() {
    sprites = {
        "hive": {
            "image": loadImage('./images/hive.png'),
            "size": 128,
        },
        "blue_flower": {
            "image": loadImage('./images/blue_flower.png'),
            "size": 25,
        },
        "red_flower": {
            "image": loadImage('./images/red_flower.png'),
            "size": 25,
        },
        "bee": {
            "image": loadImage('./images/bee.png'),
            "size": 20
        }
    }
}

var to_display = [];

function setup() {
    createCanvas(wW, wH);
}

function draw() {
    background(220);
    for (obj of to_display) {
        //e.g Hive : obj.getSprite() = "hive", obj.getPos = {x: 500, y: 500}
        image(sprites[obj.getSprite()].image, obj.getPos().x, obj.getPos().y);
    }
}

function mouseClicked(e) {
    if (e.target.id == "container") {
        let selected_object = ctrls.get_selected_to_place();
        to_display.push(fctry.createObject(selected_object, 500, 500));
        console.log("to_display :", to_display);
    }
}

所以，基本上，在单击时，我正在创建一个我希望呈现并将其存储在 to_display 中的对象。

在绘制函数中，我遍历所有对象并尝试显示它们。但是，没有出现单个图像，浏览器控制台或服务器日志中没有警告/错误。没有 CORS 警告。 Firefox 和 Chrome

我试过制作 4 个不同的全局变量来存储我的图像，如下所示：

var hive;

function preload() {
    hive = loadImage('./images/hive.png');
}

function draw() {
    image(hive, 200, 200, 128, 128);
}

我也试过为我的图片使用 http 位置，像这样:

sprites = {
    "hive": {
        "image": loadImage('http://127.0.0.1:8080/images/hive.png'),
        "size": 128,
    },
    "blue_flower": {
        "image": loadImage('http://127.0.0.1:8080/images/blue_flower.png'),
        "size": 25,
    },
    "red_flower": {
        "image": loadImage('http://127.0.0.1:8080/images/red_flower.png'),
        "size": 25,
    },
    "bee": {
        "image": loadImage('http://127.0.0.1:8080/images/bee.png'),
        "size": 20
    }
}

（我可以显示它们访问链接）

但是结果一样，我想不通。

我看到有人在 draw 中调用 loadImage 并使用回调来显示图像，但我认为连续使用 loadImage 是一种资源浪费，我宁愿不这样做，即使它有效。

您是否知道在没有任何 error/warning 的情况下可能导致 P5 无法显示图像的原因？ ~~我应该在他们的 Github 上开个 issue 吗？~~ 显然不

编辑： 显示器实际上工作得很好，但不是在屏幕上。多亏了 George Profenza，我仔细检查了所有的想法，然后意识到我有一个剩余的 div，其中包含以下内容 CSS 属性 :

height: 100vh;

这个，关联于：

html, body {
    overflow: hidden;
}

导致 canvas 完全脱离屏幕。

Answer 1

我相信你忘了在 loadImage()

前面添加 'assets'

Ex = ('assets/enter the address here')

function preload() {
  img = loadImage('assets/laDefense.jpg');
}
function setup() {
  image(img, 0, 0);
}

例子

Answer 2

我已经 tested 你加载、设置和填充 sprites 对象的方法，而且我怀疑工作顺利。

没有 Controls 和 Factory 类就不可能进行全面测试，但它确实缩小了问题范围：

let selected_object = ctrls.get_selected_to_place();
to_display.push(fctry.createObject(selected_object, 500, 500));

我会先仔细检查 selected_object 是否有有效数据，然后再检查 fctry.createObject(selected_object, 500, 500)。

我看到您已经在打印 to_display 到控制台。如果可能的话，你也应该输出日志。

如果日志输出看起来正确（例如 sprites[obj.getSprite()].image 是一个有效的 p5.Image 实例）我还会仔细检查没有其他任何东西阻止图像渲染可见，例如：

确保图像不是全部 alpha/transparent 像素（不太可能）
确保检查图像尺寸（例如，不难发现 1x1 像素图像）
确保图像渲染位置 (obj.getPos().x, obj.getPos().y) 不在屏幕外的某个地方。

上述检查可能听起来很明显/微不足道，但它们会消除在创建和使用数据之间的某处您的数据发生有趣事情的可能性。

P5图像不渲染

P5 image not rendering

javascript

p5.js