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

【问题标题】：Fix position for tranlate() while rotate() only in p5js?仅在 p5js 中修复 tranlate() 而 rotate() 的位置？
【发布时间】：2021-04-02 22:05:53
【问题描述】：

有一个类，其方法可以绘制随机长度的矩形。

但是，不能只对形状进行旋转（）而不平移（ translate() ），平移会使形状从画布上绘制出来。

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

代码：

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

 }

【问题讨论】：

我不太明白你在问什么，但是对于旋转来说，将图形转换到中心，旋转然后转换回它需要显示的位置以获得图形通常是有意义的围绕其中心旋转。如果这是您的情况，请查看以下答案：stackoverflow.com/a/60406447/1978785

标签： javascript p5.js

【解决方案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...不知道如果我说我已经在第二天编辑这个了。

【讨论】：