如何重置体重秤？

Question

完整代码为：

var playerX;
var playerY;
var playerSize = 10;
var playerSpeed = (playerSize / Math.pow(playerSize, 1.44)) * 20;
var Newcelltimer = 0;
var cell = []
var cellEaten = 0;
var eaten = false;
var zoom = 1;

function setup() {
    frameRate(50)
    createCanvas(600, 450);
    playerX = width/2
    playerY = height/2;
}

function draw() {
  
    translate(width/2, height/2);
    scale(10/playerSize)
    translate(-playerX, -playerY);
  
    playerSpeed = (playerSize / Math.pow(playerSize, 1.44)) * 10


    Newcelltimer++;

    background(220);

    if (keyIsDown(UP_ARROW) && playerY > 0 - width) {
        playerY -= playerSpeed;
    }
    if (keyIsDown(RIGHT_ARROW) && playerX < 2 * width) {
        playerX += playerSpeed;
    }
    if (keyIsDown(DOWN_ARROW) && playerY < 2 * width) {
        playerY += playerSpeed;
    }
    if (keyIsDown(LEFT_ARROW) && playerX > 0 - width) {
        playerX -= playerSpeed;
    }

    if (Newcelltimer % 30 == 0) {
        cell.push(ceil(random(0 - width, 2 * width)),
            ceil(random(0 - height, 2 * height)))

    }

    for (var i = 0; i < cell.length / 2; i++) {

        fill(0, 255, 255, 100)
        circle(cell[i * 2], cell[i * 2 + 1], 7)
    }



    fill(255, 255, 0)
    circle(playerX, playerY, playerSize)
    fill(0)
    ellipse(playerX - playerSize / 5, playerY - playerSize / 10, playerSize / 5, playerSize / 3)
    ellipse(playerX + playerSize / 5, playerY - playerSize / 10, playerSize / 5, playerSize / 3)
    arc(playerX, playerY + playerSize / 5, playerSize / 2, playerSize / 5, 0, 3.2, PIE)
    fill(255, 255, 0)
    noStroke()
    arc(playerX, (playerY + playerSize / 5) - 1, playerSize / 2, playerSize / 5, 0, 3.2, PIE)
    stroke(0)




    for (var i = 0; i < cell.length / 2; i++) {
        let d = int(dist(cell[i * 2], cell[i * 2 + 1], playerX, playerY))
        if (d <= playerSize / 2) {
            playerSize += 7;
            cell.splice(i * 2, 2)
        }
    }


    if (playerSize >= 3 * width | playerSize >= 3 * height) {
        if (width > height) {
            playerSize = height;
        } else {
            playerSize = width;
        }
    }

}

我的问题是文本不是一直都在屏幕上，所以当你的尺寸变大，你的视野变大时，文本会改变它在屏幕上的位置，它应该总是保持不变在左上角，但随着你变大，它会越来越靠近右下角。缩放方程式可能会变成指数形式，所以请随意更改它以获得解决方案。

Answer 1

要将文本放置在 canvas 上的固定位置，请将其放置在对 translate 或 scale 的任何调用之前。每次调用 draw 后都会重置缩放和平移。如果您需要在绘图中重置比例，您可以通过调用 push and then return to the original state with a call to pop 来保存当前状态。请参阅下面的第二个示例。

这是一个基于您的草图的示例：

var playerX;
var playerY;
var playerSize = 10;
var playerSpeed = (playerSize / Math.pow(playerSize, 1.44)) * 20;
var Newcelltimer = 0;
var cell = []
var cellEaten = 0;
var eaten = false;
var zoom = 1;

function setup() {
    frameRate(50)
    createCanvas(600, 450);
    playerX = width/2
    playerY = height/2;
}

function draw() {
    background(220);
    text("This Text Stays Right Here", 20, 20);
    translate(width/2, height/2);
    scale(10/playerSize)
    translate(-playerX, -playerY);
  
    playerSpeed = (playerSize / Math.pow(playerSize, 1.44)) * 10

    Newcelltimer++;

    if (keyIsDown(UP_ARROW) && playerY > 0 - width) {
        playerY -= playerSpeed;
    }
    if (keyIsDown(RIGHT_ARROW) && playerX < 2 * width) {
        playerX += playerSpeed;
    }
    if (keyIsDown(DOWN_ARROW) && playerY < 2 * width) {
        playerY += playerSpeed;
    }
    if (keyIsDown(LEFT_ARROW) && playerX > 0 - width) {
        playerX -= playerSpeed;
    }

    if (Newcelltimer % 30 == 0) {
        cell.push(ceil(random(0 - width, 2 * width)),
            ceil(random(0 - height, 2 * height)))
    }

    for (var i = 0; i < cell.length / 2; i++) {

        fill(0, 255, 255, 100)
        circle(cell[i * 2], cell[i * 2 + 1], 7)
    }
    fill(255, 255, 0)
    circle(playerX, playerY, playerSize)
    fill(0)
    ellipse(playerX - playerSize / 5, playerY - playerSize / 10, playerSize / 5, playerSize / 3)
    ellipse(playerX + playerSize / 5, playerY - playerSize / 10, playerSize / 5, playerSize / 3)
    arc(playerX, playerY + playerSize / 5, playerSize / 2, playerSize / 5, 0, 3.2, PIE)
    fill(255, 255, 0)
    noStroke()
    arc(playerX, (playerY + playerSize / 5) - 1, playerSize / 2, playerSize / 5, 0, 3.2, PIE)
    stroke(0)

    for (var i = 0; i < cell.length / 2; i++) {
        let d = int(dist(cell[i * 2], cell[i * 2 + 1], playerX, playerY))
        if (d <= playerSize / 2) {
            playerSize += 7;
            cell.splice(i * 2, 2)
        }
    }
    if (playerSize >= 3 * width | playerSize >= 3 * height) {
        if (width > height) {
            playerSize = height;
        } else {
            playerSize = width;
        }
    }
}

<script src="https://cdn.jsdelivr.net/npm/p5@1.3.0/lib/p5.js"></script>

带有 push 和 pop 的示例请注意，对 stroke 的调用不会被推送和弹出，因此文本使用上面设置的描边颜色。

var playerX;
var playerY;
var playerSize = 10;
var playerSpeed = (playerSize / Math.pow(playerSize, 1.44)) * 20;
var Newcelltimer = 0;
var cell = []
var cellEaten = 0;
var eaten = false;
var zoom = 1;

function setup() {
    frameRate(50)
    createCanvas(600, 450);
    playerX = width/2
    playerY = height/2;
}

function draw() {
    background(220);
    push();
    translate(width/2, height/2);
    scale(10/playerSize)
    translate(-playerX, -playerY);
  
    playerSpeed = (playerSize / Math.pow(playerSize, 1.44)) * 10

    Newcelltimer++;

    if (keyIsDown(UP_ARROW) && playerY > 0 - width) {
        playerY -= playerSpeed;
    }
    if (keyIsDown(RIGHT_ARROW) && playerX < 2 * width) {
        playerX += playerSpeed;
    }
    if (keyIsDown(DOWN_ARROW) && playerY < 2 * width) {
        playerY += playerSpeed;
    }
    if (keyIsDown(LEFT_ARROW) && playerX > 0 - width) {
        playerX -= playerSpeed;
    }

    if (Newcelltimer % 30 == 0) {
        cell.push(ceil(random(0 - width, 2 * width)),
            ceil(random(0 - height, 2 * height)))
    }

    for (var i = 0; i < cell.length / 2; i++) {

        fill(0, 255, 255, 100)
        circle(cell[i * 2], cell[i * 2 + 1], 7)
    }
    fill(255, 255, 0)
    circle(playerX, playerY, playerSize)
    fill(0)
    ellipse(playerX - playerSize / 5, playerY - playerSize / 10, playerSize / 5, playerSize / 3)
    ellipse(playerX + playerSize / 5, playerY - playerSize / 10, playerSize / 5, playerSize / 3)
    arc(playerX, playerY + playerSize / 5, playerSize / 2, playerSize / 5, 0, 3.2, PIE)
    fill(255, 255, 0)
    noStroke()
    arc(playerX, (playerY + playerSize / 5) - 1, playerSize / 2, playerSize / 5, 0, 3.2, PIE)
    stroke(0)

    for (var i = 0; i < cell.length / 2; i++) {
        let d = int(dist(cell[i * 2], cell[i * 2 + 1], playerX, playerY))
        if (d <= playerSize / 2) {
            playerSize += 7;
            cell.splice(i * 2, 2)
        }
    }
    if (playerSize >= 3 * width | playerSize >= 3 * height) {
        if (width > height) {
            playerSize = height;
        } else {
            playerSize = width;
        }
    }
    pop();
    // notice that calls to stroke are not pushed and popped
    text("This Text Stays Right Here Because of Push and Pop", 20, 20);
}

<script src="https://cdn.jsdelivr.net/npm/p5@1.3.0/lib/p5.js"></script>

如何重置体重秤？

How do I reset the scale?

javascript

scale

p5.js