javascript 在p5.js中显示两次的文本

vyswwuz2 于 2023-05-16 发布在 Java

关注(0)|答案(1)|浏览(113)

当我尝试将文本添加到p5.js canvas时，由于某种原因，它显示了两次。下面附上代码：

let img;

function setup() {
    createCanvas(screen.availWidth, screen.availHeight);
    img = loadImage('https://mediumpurpleperfumeddegrees.boyuan12.repl.co/circuit1.webp');
    textOutput();
}

function draw() {
     image(img, screen.availWidth / 2 - img.width, 0, img.width * 1.25, img.height * 1.25);
     textSize(20);
     text('5V', screen.availWidth / 2 - img.width - 20, img.height / 2 + 30);
     text('50Ω', screen.availWidth / 2 - img.width + 100, img.height / 2 - 45);
     text('100Ω', screen.availWidth / 2 - img.width + 220, img.height / 2 + 50);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.js"></script>

Output p5.js sketch
我试着看了一下文档，但没有发现太有帮助。

JavaScript

来源：https://stackoverflow.com/questions/76233053/text-displayed-twice-in-p5-js

1条答案

按热度按时间

nxowjjhe1#

draw()每秒运行多次，用于动画。通常情况下，您希望在重绘屏幕之前清除屏幕，否则您可能会出现重影。
您正在setup中加载图像，它不会在开始draw()循环之前等待图像显示。最初，img.width在几帧中为1，然后加载图像，它变成图像的宽度，200左右。draw()在没有clear的情况下运行，加上异步图像加载，导致文本显示在两个地方。
相反，使用preload来避免在图像准备好之前绘制任何内容，并且使用noLoop()禁用动画循环，或者在draw()的顶部使用background()或clear()来擦除过时的绘图。

let img;

function preload() { // fix 1
  img = loadImage(
    "https://mediumpurpleperfumeddegrees.boyuan12.repl.co/circuit1.webp"
  );
}

function setup() {
  createCanvas(screen.availWidth, screen.availHeight);
  textOutput();
  noLoop(); // fix 2
}

function draw() {
  // clear() // alternative to noLoop() if you want animation
  image(img, screen.availWidth / 2 - img.width, 0, img.width * 1.25, img.height * 1.25);
  textSize(20);
  text("5V", screen.availWidth / 2 - img.width - 20, img.height / 2 + 30);
  text("50Ω", screen.availWidth / 2 - img.width + 100, img.height / 2 - 45);
  text("100Ω", screen.availWidth / 2 - img.width + 220, img.height / 2 + 50);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.js"></script>

赞(0）回复(0）举报 2023-05-16

我来回答

javascript 在p5.js中显示两次的文本

1条答案

相关问题

热门标签

最新问答