0

完整的代码是：

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;
        }
    }

}

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

4

1 回答 1

1

要将文本放在画布上的固定位置，请将其放在对translate或的任何调用之前scale。每次调用 后都会重置比例和翻译draw。如果您需要在 draw 中重置比例，您可以通过调用保存当前状态，push然后通过调用返回到原始状态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>

于 2021-03-27T13:14:11.263 回答