p5.js Добавляет элементы на холст, на которые не влияет функция scale ()

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();

 }

В моем *Функция 1007 * Я также рисую метку с моей функцией show_highscores(), которую я буду использовать для отображения рекордов всех игроков в игре.

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

Проблема: Моя метка рекордов меняет положение и размер относительно моего блоба (который всегда находится в середине экрана) из-за scale(), который я выполняю в своей функции draw().

Вопрос:

Есть ли способ нарисовать мою таблицу рекордов таким образом, чтобы на нее не влияла шкала ?1027 * функция.Можно ли наложить ярлык поверх вашего холста или нарисовать дополнительный холст для моего лейбла рекордов.

Answer 1

Вы можете использовать функции push () и 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>