Question

我正在使用Processing API将图像绘制到我的HTML画布中，稍后我可以在代码中使用它。我拥有的JavaScript代码是：

var sketchProc = function(processingInstance) {
  with (processingInstance) {

    /* @pjs preload="images/hot-air.png" */

    size(innerWidth, innerHeight);
    var testImage = loadImage("images/hot-air.png");

    draw = function() {
      image(testImage, 0, 0, 500, 500);
    }
  }
}

var canvas = document.getElementById("canvas");
var processingInstance = new Processing(canvas, sketchProc);

控制台说图像的尺寸为0x0。我尝试使用Processing's directives加载，但我仍然得到图像尺寸为0x0。但是，当我在绘制循环中调用loadImage()时，程序会识别图像的尺寸为512x512。

我不想在绘制循环中连续调用loadImage()。我该怎么做才能确保图像在绘制循环外正确加载？

您可以找到最小的工作示例here。

Answer 1

首先，感谢您为我们发布了MCVE。

我认为问题在于，出于某种原因，当您编写JavaScript-only Processing.js code时，preload指令（可能是loadImage()函数本身）不起作用。我已经在Processing.js的各种编辑器和版本中对此进行了测试。

因此，要使用loadImage()功能，您应该使用pure Processing code。 Here是一个CodePen，可以显示您是如何做到的：

<script type="application/processing">
    /* @pjs preload="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg"; */
    PImage testImage;

    void setup(){
      size(500, 500);
      testImage = loadImage("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg");
      println(testImage.height);
    }

    void draw() {
      background(100);
      image(testImage, 0, 0, 250, 250);
    }
</script>
<canvas> </canvas>

仅作比较，here是使用纯JavaScript语法的相同代码。这不起作用。

但退后一步：如果你习惯使用JavaScript，那你为什么要使用Processing.js？ Processing.js是为想要编写自动转换为JavaScript的Java语法的Processing（Java）开发人员而设计的。此时，Processing.js已经很老了，不再维护了。

相反，我建议使用P5.js。 P5.js允许您编写JavaScript语法来创建Web优先处理草图。 P5.js更新，并且仍在积极开发中。

以下是P5.js中的相同代码：

var testImage;

function preload(){
  testImage =  loadImage("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg");
}

function setup() { 
  createCanvas(400, 400);
} 

function draw() { 
  background(100);
  image(testImage, 0, 0, 250, 250);
}

无耻的自我推销：我写了一篇关于Processing，Processing.js和P5.js之间差异的教程here。

在JavaScript中使用Processing的loadImage

1 个答案: