javascript - 旋转自定义形状会将其移动到 Angular 落

Question

使用translate(width/2,height/2)旋转自定义形状时；旋转( Angular ))，它会移动左下角的形状。我尝试将翻译值设置为负值，它修复了它，但原点位于 0,0 。我用过pop(); push()和beginShape(); endShape没有成功。

var points = [];
var r;
var lines = 30;

function setup() {
  createCanvas(window.innerWidth, window.windowHeight);
  angleMode(DEGREES);
  // get the points of the corners of the hexagon
  r = Math.min(width, height) * 0.4;
  var angle = 60;
  for (var i = 1; i < 7; i++) {
    var tempX = r * sin((angle * i + 30) % 360) + width / 2;
    var tempY = r * cos((angle * i + 30) % 360) + height / 2;
    points.push([tempX, tempY]);
  }
  background(0);
  stroke(0, 0, 255);
  rectMode(CENTER);
}

function draw() {
  background(0);
  // draw the lines of ...
  push();
  translate(width/2, height/2);
  rotate(frameCount * 0.75);
  beginShape();
  for (var i = 0; i < points.length; i++) {
    // ... the hexagon perimeter
    line(points[i][0], points[i][1], points[(i + 1) % 6][0], points[(i + 1) % 6][1]);
    var tempAngle = 240 + i * 60;
    var tempX = r * 1.1545 * sin(tempAngle) + points[i][0];
    var tempY = r * 1.1545 * cos(tempAngle) + points[i][1];
    for (var j = 0; j < lines + 1; j++) {
      // ... the lines inside the hexagon
      var tempAngle2 = tempAngle = (30 / lines * j) + 210 + i * 60;
      var distance = r / cos(30 / lines * j);
      var tempX2 = distance * sin(tempAngle2) + points[i][0];
      var tempY2 = distance * cos(tempAngle2) + points[i][1];;
      line(points[i][0], points[i][1], tempX2, tempY2);
    }
    endShape();
  }
  pop();
}

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

Answer 1

我认为问题在于您正在使用 x/y 偏移量定义形状的点。通过从点定义中删除 width/2 和 height/2 ，它可以使您的形状居中。​​

var points = [];
var r;
var lines = 30;

function setup() {
  createCanvas(window.innerWidth, window.windowHeight);
  angleMode(DEGREES);
  // get the points of the corners of the hexagon
  r = Math.min(width, height) * 0.4;
  var angle = 60;
  for (var i = 1; i < 7; i++) {
    var tempX = r * sin((angle * i + 30) % 360)
    var tempY = r * cos((angle * i + 30) % 360)
    points.push([tempX, tempY]);
  }
  background(0);
  stroke(0, 0, 255);
  //rectMode(CENTER);
}

function draw() {
  background(0);
  // draw the lines of ...
  push();
  
  translate(width/2, height/2);
  rotate(frameCount * 0.75);
  
  beginShape();
  for (var i = 0; i < points.length; i++) {
    // ... the hexagon perimeter
    line(points[i][0], points[i][1], points[(i + 1) % 6][0], points[(i + 1) % 6][1]);
    var tempAngle = 240 + i * 60;
    var tempX = r * 1.1545 * sin(tempAngle) + points[i][0];
    var tempY = r * 1.1545 * cos(tempAngle) + points[i][1];
    for (var j = 0; j < lines + 1; j++) {
      // ... the lines inside the hexagon
      var tempAngle2 = tempAngle = (30 / lines * j) + 210 + i * 60;
      var distance = r / cos(30 / lines * j);
      var tempX2 = distance * sin(tempAngle2) + points[i][0];
      var tempY2 = distance * cos(tempAngle2) + points[i][1];;
      line(points[i][0], points[i][1], tempX2, tempY2);
    }
    endShape();
  }
  pop();
}

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