p5.js 如何停止某些元素的旋转

Question

我正在 p5.js 中绘制一些旋转矩形，一切正常。然后我需要一些文本显示在矩形的顶部，我希望它是静止的。但是，文本也在旋转。我已经尝试了一些解决方案，例如将 rotate(0) 或值设置为最后绘制的矩形的旋转负值，但没有任何效果。

class Rectangle {
    constructor(size, colorR, colorG, colorB, angle) {
        this.size = size;
        this.colorR = colorR;
        this.colorG = colorG;
        this.colorB = colorB;
        this.angle = angle;
        this.actualAngle = this.angle;
    }

    draw() {
        stroke(0);
        strokeWeight(2);
        fill(this.colorR, this.colorG, this.colorB);
        rotate(this.actualAngle);
        rect(0, 0, this.size, this.size);
    }

    increaseAngle() {
        this.actualAngle += this.angle;
    }

    getActualAngle(){
        return this.actualAngle;
    }
}

var rectangles = [];

 function setup() {
    var canvas1 = createCanvas(800, 700);
    canvas1.parent("regLog");
    var size = 12;
    for (var i = 0; i < 10; i++) {
        let ranR = random(150);
        let ranG = random(150);
        let ranB = random(150);
        let angle = random(-0.005, 0.005);
        rectangles.push(new Rectangle(size, ranR, ranG, ranB, angle));
        size += 50;
    }
}

function draw() {
    background(255);

    rectMode(CENTER);
    translate(width / 2, height / 2);
    for (var i = rectangles.length - 1; i > 0; i--) {
        rectangles[i].draw();
    }

    if (second() % 1 == 0) {
        for (let i = 0; i < rectangles.length; i++) {
            rectangles[i].increaseAngle();
        }
    }

    rotate(0);
    noStroke();
    fill(255, 255, 255, 0);    
    rect(0, 0, 50, 50);
    textAlign(CENTER);
    fill(255);
    textSize(60);
    text("Coming soon!", 0, 0);
}

Answer 1

我使用 push() "save" 当前旋转设置，然后在每次绘制矩形后使用 pop() 恢复它们。当你使用 rotate() 时，它会旋转你绘制的所有未来形状，所以变化是 "permanent" 除非你非常小心地重新设置。

您可以在这个 jsfiddle 中看到它工作 -> https://jsfiddle.net/ozsLtxhb/237/

我注释掉了你为 jsfiddle 工作分配父级的部分，所以在你将它复制粘贴到任何东西之前取消注释

class Rectangle {
    constructor(size, colorR, colorG, colorB, angle) {
        this.size = size;
        this.colorR = colorR;
        this.colorG = colorG;
        this.colorB = colorB;
        this.angle = angle;
        this.actualAngle = this.angle;
    }

    draw() {
        /*push here*/
        push();
        stroke(0);
        strokeWeight(2);
        fill(this.colorR, this.colorG, this.colorB);
        rotate(this.actualAngle);
        rect(0, 0, this.size, this.size);
        /*pop here*/
        pop();
    }

    increaseAngle() {
        this.actualAngle += this.angle;
    }

    getActualAngle(){
        return this.actualAngle;
    }
}

var rectangles = [];

 function setup() {
    var canvas1 = createCanvas(800, 700);
/*     canvas1.parent("regLog"); */
    var size = 12;
    for (var i = 0; i < 10; i++) {
        let ranR = random(150);
        let ranG = random(150);
        let ranB = random(150);
        let angle = random(-0.005, 0.005);
        rectangles.push(new Rectangle(size, ranR, ranG, ranB, angle));
        size += 50;
    }
}

function draw() {
    background(255);

    rectMode(CENTER);
    translate(width / 2, height / 2);
    for (var i = rectangles.length - 1; i > 0; i--) {
        rectangles[i].draw();
    }

    if (second() % 1 == 0) {
        for (let i = 0; i < rectangles.length; i++) {
            rectangles[i].increaseAngle();
        }
    }

    rotate(0);
    noStroke();
    fill(255, 255, 255, 0);    
    rect(0, 0, 50, 50);
    textAlign(CENTER);
    fill(255);
    textSize(60);
    text("Coming soon!", 0, 0);
}

p5.js 如何停止某些元素的旋转

p5.js How to stop rotation of certain elements

javascript

p5.js