时间戳

首页 > 解决方案 > p5.j​​s 如何停止某些元素的旋转

javascript - p5.j​​s 如何停止某些元素的旋转

问题描述

我在 p5.js 中绘制了一些旋转矩形，一切正常。然后我需要在矩形顶部显示一些文本，并且我希望它是静止的。然而，文本也在旋转。我尝试了一些解决方案，例如将旋转（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);
}

标签： javascriptp5.js

解决方案

我使用 push() 来“保存”当前的旋转设置，然后在每次绘制矩形后使用 pop() 来恢复它们。当您使用 rotate() 时，它会旋转您绘制的所有未来形状，因此除非您非常小心地重置，否则这些更改是“永久性的”。

你可以看到它在这个 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);
}

推荐阅读