p5.js 将不受 scale() 函数影响的元素添加到 canvas

Question

我正在创建 p5.js agar.io 风格的游戏。在我的绘制函数中，我使用 scale 函数缩小地图，因为我的 agar.io blob 对象的半径增加了。

function draw() {
    var newzoom = 64 / blob.r;
    zoom = lerp(zoom, newzoom, 0.1);
    scale(zoom);
    ...
    show_highscores();

 }

在我的 draw() 函数中，我还使用 show_highscores() 函数绘制了一个标签，我将使用它来显示游戏中所有玩家的高分。

function show_highscores() {
    textSize(12);
    text("Leaderboard", blob.pos.x - 150, blob.pos.y - 80);
    fill(0, 102, 153);
 }

问题： 由于 scale() 我在 draw() 函数中运行，所以我的高分标签相对于我的 blob（始终位于屏幕中间）正在改变位置和大小。

问题：

有没有一种方法可以不受 scale 函数的影响来绘制我的高分标签。是否可以在您的 canvas 上叠加一个标签，或者为我的高分标签绘制一个额外的 canvas。

Answer 1

在绘制记分卡之前，您可以在需要时使用 push() and pop() 功能恢复到基本比例。像这样：

function setup(){
  createCanvas(200, 200);
  frameRate(1);
}

function draw(){
  background(50);
  fill('white');
  stroke(255);

  push();
  scale(random(0.2,3));
  rect(30, 20, 50, 50);
  line(0, 0, 100, 200);
  pop();
  
  stroke(0);
  fill(255, 0, 0, 100);
  rect(30, 20, 50, 50);
}

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

p5.js 将不受 scale() 函数影响的元素添加到 canvas

p5.js Add elements to canvas that are not affected by scale() function

javascript

absolute

scale

p5.js