仅在 p5js 中修复 tranlate() 而 rotate() 的位置？

Question

有一个 class 方法可以绘制具有随机长度的矩形。

但是，不能只对形状执行 rotate() 而不进行翻译（ translate() ），翻译会使形状脱离 canvas.

那么有没有办法让它在旋转时不发生平移？

代码：

class rect {

 constructor(range) {
   this.boundary = 100;

   this.x = random(this.boundary, width - this.boundary);
   this.y = random(this.boundary, height - this.boundary);
   this.xu = this.x + random(50, 200);
   this.yu = this.y + random(50, 200);

   this.range = range;
   this.limit = random(-range, range);

   this.rand_color1 = random(255);
   this.rand_color2 = random(255);
   this.rand_color3 = random(255);
 }

 custom_shapes() {   

   // how to make no translations occur while only perform rotation on shapes?
   translate(this.x-this.margin,this.y-this.margin);
   rotate(30);

   fill(this.rand_color1, this.rand_color2, this.rand_color3)
   quad(this.x, this.y, this.xu + this.limit, this.y, this.xu, this.yu, this.x, this.yu + this.limit);
   }

 }

Answer 1

如果你的意思是你的矩形在旋转时会离开屏幕，它围绕 x = 0，y= 0 点旋转，所以我想你可以这样做：

push() //push and pop acts as a way to "seperate" any style and translate and so on...
rectMode(CENTER)         // basically the middle of the rect = x , y
translate(this.x,this.y) // **OR** translate(this.x - this.rectSizeX / 2, this.y - this.rectSizeY / 2) 
//quad()                 // if you're not using the rectMode()
pop() // also you'll have to fill() and so on in here i believe, not too sure

另外，如果您知道它总是长方形或高方形，您可以只使用 rect(x,y,xSize,ySize) // 如果认为它是大小的话

如果您只想将 translate() 分开，只需将 push() 和 pop() 放在它周围...

哦，是的，translate() 基本上只是将你给它的任何 x 和 y 变成 0,0...不知道我是否已经说过我只是在第二天编辑它。

仅在 p5js 中修复 tranlate() 而 rotate() 的位置？

Fix position for tranlate() while rotate() only in p5js?

javascript

p5.js