如何从 p5.js 中的特定点旋转矩形形状

问题描述

translate(width/2,height/1.87)
  rotate(angle);
  angle++;
  rectMode(CENTER)//can i modify the rectmode and make it rotate at other point of the rect
rect(0,100,30)

我可以修改 rectMode 并让它在 rect 的其他点旋转吗？

解决方法

如果要围绕轴心点旋转，请translate() 移动矩形，使轴心点位于坐标系的原点。之后，rotate() 矩形，最后translate()它在世界上的位置：

translate(target_x,target_y);
rotate(angle);
translate(-pivot_x,-pivot_y);

function setup() {
    createCanvas(300,300);
}

// (-5,15) measured form the center of the rectangle
let pivot_x = -5,pivot_y = 15;    

// Position at which the pivot point should be moved in the world
let target_x = 150,target_y = 100; 

let angle = 0;
let angle_change = 0.01;

function draw() {
    background(255);
    
    push()

    translate(target_x,target_y);
    rotate(angle);
    translate(-pivot_x,-pivot_y);

    noFill();
    stroke(0)
    rectMode(CENTER)
    rect(0,100,30);

    pop();
    
    noStroke();
    fill(255,0);
    circle(target_x,target_y,5)
    
    angle += angle_change;
    if (abs(angle) > 0.5)
        angle_change *= -1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.2.0/p5.min.js"></script>