javascript - Konva：获取旋转矩形的角坐标(Konva: get corners coordinate of a rotated rectangle)

Question

How can i get corners coordinate of a rotated rectangle (with center of rectangle as pivot) ?

(如何获得旋转矩形的角坐标（以矩形的中心为枢轴）？)

i already tried all of the solution from the link below but seems haven't got any luck.

(我已经从下面的链接尝试了所有解决方案，但似乎还没有运气。)

Rotating a point about another point (2D)

(围绕另一个点旋转一个点（2D）)

Find corners of a rotated rectangle given its center point and rotation

(在给定其中心点和旋转的情况下查找旋转矩形的角)

https://gamedev.stackexchange.com/questions/86755/how-to-calculate-corner-positions-marks-of-a-rotated-tilted-rectangle

(https://gamedev.stackexchange.com/questions/86755/how-to-calculate-corner-positions-marks-of-a-rotated-tilted-rectangle)

here's the code

(这是代码)

// make a rectangle with zero rotation
const rect1 = new Konva.Rect({
  x: 200,
  y: 200,
  width: 100,
  height: 50,
  fill: "#00D2FF",
  draggable: true,
  rotation: 0,
  name: "rect"
});

// convert degree to rad
const degToRad = (deg: number) => deg * (Math.PI / 180);

// here's the code i use to rotate it around its center (from https://konvajs.org/docs/posts/Position_vs_Offset.html)

const rotateAroundCenter = (node: Rect, rotation: number) => {
     const topLeft = {
    x: -node.width() / 2,
    y: -node.height() / 2
  };
  console.log(`current X: ${node.x()}, current Y: ${node.y()},`)

  const currentRotatePoint = rotatePoint(topLeft, degToRad(node.rotation()));
  const afterRotatePoint = rotatePoint(topLeft, degToRad(rotation));
  const dx = afterRotatePoint.x - currentRotatePoint.x;
  const dy = afterRotatePoint.y - currentRotatePoint.y;

  node.rotation(rotation);
  node.x(node.x() + dx);
  node.y(node.y() + dy);
  layer.draw();

console.log(`the actual position x: ${node.x()}, y: ${node.y()}`);
};

// the code that i expected to give me the corner point

const computeCornerPoint = (r:Rect) => {
  // for now we want to compute top left corner point(as it's the easiest corner to get)
  let corner = {
     x: r.x(),
     y: r.y()
  };

  // the coordinate of rectangle's center (in stage coordinate)
  const cx = r.x() + r.width();
  const cy = r.y();

  // sine and cosine of the rectangle's rotation
  const s = Math.sin(degToRad(r.rotation()));
  const c = Math.cos(degToRad(r.rotation()));

  // rotate the corner point
  let xnew = c * (corner.x - cx) - s * (corner.y - cy) + cx;
  let ynew = s * (corner.x - cx) + c * (corner.y - cy) + cy;

  console.log(`based on this function calculation: xnew : ${xnew}, ynew: ${ynew}`);
  return [xnew, ynew];
}

based on the code above, if the initial rotation is 0, and i rotate the rectangle 30 degree clockwise, then the actual position would be same as the value from computeCornerPoint, which is (219, 178) and if i rotate it again by 30 degree clockwise, the actual position would be (246, 169) while the value from computeCornerPoint would be (275, 175).

(根据上面的代码，如果初始旋转为0，并且我将矩形顺时针旋转30度，则实际位置将与来自computeCornerPoint的值相同，即（219，178），并且如果我再次将其旋转30度顺时针旋转度，则实际位置将为（246，169），而来自computeCornerPoint的值将为（275，175）。)

  ask by Rayhan Hamada translate from so

Answer 1

等待大神答复