1

我将处理代码作为纯文本文件保存到 Visual Studio 代码中，我添加了 images/gradient.jpg 以及徽标。我将 img 代码替换为画布代码，但没有出现动画徽标。到目前为止，我已经尝试了所有方法，但没有任何效果。徽标只是没有出现。

@pjs preload="gradient.jpg,BRICKSxMORTAR_logo_transparentX.png";


PImage gradient;
PImage logo;




void setup(){
 size(792, 150);
 background(0);
 gradient = loadImage("gradient.jpg");
 logo = loadImage("BRICKSxMORTAR_logo_transparentX.png");
 }

void draw(){
  for(int i = 0; i < 10; i++){
  float x = random(width);
  //ellipse(x, 20, 300, 200);
  image(gradient,300,11);
  ellipse(x, 200, x, 300);
  image(logo,1,9);
  //ellipse(x, x, 30, 20);{




 }
}


    <canvas id="logo" data-processing-sources="BxM_animatedLogo.pde"></canvas>
</div>
4

1 回答 1

1

看起来您正在尝试将草图从 processing-java 转换为processingjs（已弃用）。

在这里使用 WayBackMachine 是ProcessingJSloadImage()参考。以防万一，以下是描述：

将图像加载到PImage类型的变量中。可以加载四种类型的图像（ .gif、.jpg、.tga、.png ）图像。要正确加载， 图像 必须位于当前草图的数据目录中，必须使用 @pjs preload 指定图像路径来预加载图像。在大多数情况下，在setup()中加载所有图像以在程序开始时预加载它们。在draw()中加载图像会降低程序的速度。您还可以从不需要任何预加载的数据 URI 加载图像，例如“data:image/jpg;base64,{base 64 编码数据块}”。

文件名参数也可以是在线找到的文件的 URL。出于安全原因，在线找到的处理草图只能从其来源的同一服务器下载文件。

文件名参数的扩展名用于确定图像类型。如果图像文件名没有以适当的扩展名结尾，请将扩展名指定为 loadImage() 的第二个参数，如本页第三个示例所示。

如果图片加载不成功，则返回null值，并在控制台打印错误信息。错误消息不会停止程序，但是如果您的代码不检查从 loadImage() 返回的值是否为 null，则 null 值可能会导致 NullPointerException。

注意：某些浏览器不允许您从 file:// URI 加载图像。建议您使用 web 服务器进行开发和测试，以避免 file:// URI 出现任何问题。

我已经强调了斜体的重要部分，这是示例片段之一：

// @pjs preload must be used to preload the image

/* @pjs preload="laDefense.jpg"; */

PImage b;

void setup() {

  b = loadImage("laDefense.jpg");

  noLoop();

}



void draw() {

  image(b, 0, 0);

}

希望在您的情况下，只需添加@pjs preload评论：

/* @pjs preload="gradient.jpg,BRICKSxMORTAR_logo_transparentX.png"; */

PImage gradient;
PImage logo;

void setup() {
  size(792, 150);
  background(0);
  gradient = loadImage("gradient.jpg");
  logo = loadImage("BRICKSxMORTAR_logo_transparentX.png");
}

void draw() {
  for (int i = 0; i < 10; i++) {
    float x = random(width);
    image(gradient, 300, 11);
    ellipse(x, 200, x, 300);
    image(logo, 9, 11);
  }
}

我没有对此进行测试，但希望它有效。源代码表明它应该处理多个图像。

作为旁注，将来请将代码片段作为格式化文本发布。对于 HTML/CSS，在某些情况下，您可以使用 stackoverflow 的代码 JS/HTML/CSS 片段功能，或者如果它更简单/更灵活，请使用众多在线服务之一，例如jsfiddle、codepen、glitch。Sketchpad.cc也可能有效。加载图像需要更长的时间（甚至可能在有数据计划的移动设备上花费更多的钱），而文本更轻，更容易运行/测试。总的来说，它会让其他人更容易支持你。

于 2021-08-10T00:19:50.437 回答