Question

I'm having some issues calculating the corners of a rotated rectangle within a rotated container with both having offset x/y co-ords.

The pivot is off but I'm not sure of the solution. The following scenarios work:

(x, y, rotation)
image = 0, 0, 45
container = 100, 100, 45

image = 200, 0, 45
container = 100, 100, 0

however setting the rotation of the container, and the image co-ords messes up the pivot e.g.

image = 200, 0, 45
container = 100, 100, 45

Below is the code for calculating the corners of the image in global co-ordinate space:

public get corners() {
        const worldData = this.worldData;
        //Get angle of object in radians;
        const radAngle = worldData.rotation * Math.PI / 180;
        const pivotX = worldData.pivotX;
        const pivotY = worldData.pivotY;
        const width = this.sourceWidth * worldData.scaleX;
        const height = this.sourceHeight * worldData.scaleY;
        const x = worldData.x;//this.x;
        const y = worldData.y;//this.y;

        //Get the corners
        const c1 = this.getCorner(pivotX, pivotY, x, y, radAngle);
        const c2 = this.getCorner(pivotX, pivotY, x + width, y, radAngle);
        const c3 = this.getCorner(pivotX, pivotY, x + width, y + height, radAngle);
        const c4 = this.getCorner(pivotX, pivotY, x, y + height, radAngle);

        return {c1, c2, c3, c4};
    }

    public get worldData() {
        let x = this.x;
        let y = this.y;
        let pivotX = this.x;
        let pivotY = this.y;
        let rotation = this.rotation;
        let scaleX = this.scaleX;
        let scaleY = this.scaleY;
        let parent = this.parent;

        while(parent) {
            x += parent.x;
            y += parent.y; 
            pivotX += parent.x;
            pivotY += parent.y;
            rotation += parent.rotation;
            scaleX *= parent.scaleX;
            scaleY *= parent.scaleY;
            parent = parent.parent;
        }

        return {x, y, scaleX, scaleY, rotation, pivotX, pivotY}
    }

    protected getCorner(pivotX:number, pivotY:number, cornerX:number, cornerY:number, angle:number) {
        let x, y, distance, diffX, diffY;

        /// get distance from center to point
        diffX = cornerX - pivotX;
        diffY = cornerY - pivotY;
        distance = Math.sqrt(diffX * diffX + diffY * diffY);

        /// find angle from pivot to corner
        angle += Math.atan2(diffY, diffX);

        /// get new x and y and round it off to integer
        x = pivotX + distance * Math.cos(angle);
        y = pivotY + distance * Math.sin(angle);

        return {x, y};
    }

Answer 1

让我们假设情况如下：

其中图像的左下角（实线）具有坐标(x_i, y_i)，而容器的左下角（虚线）具有坐标(X_c, Y_c)。此外，图像（宽度w和高度h）相对于实验室框架逆时针旋转角度beta，同时容器本身旋转（也逆时针旋转））按角度alpha。

现在，让我们关注例如右上角P。对于实验室框架（全局画布），其坐标可以表示为：

R(beta) . ( w, h ) + ( x_i, y_i )

其中.表示矩阵乘法，R是逆时针旋转矩阵

R(beta) = [ cos(beta) -sin(beta) ]
          [ sin(beta)  cos(beta) ]

现在，我们需要将其转换为相对于容器的坐标系。形式上，这意味着我们需要先减去偏移量，然后再旋转-alpha（或顺时针旋转alpha）。因此，一切都结合在一起：

R(-alpha).( R(beta) . (w, h) + (x_i, y_i) - (X_c, Y_c) )

只需将(w, h)替换为适当的坐标，即可类似地处理其他角...

就代码而言，可以将这些公式实现为：

//counter-clock-wise rotation by given angle in degrees
function rotateCCWBy(angle, {x, y}) {
  const angle_rad = angle * Math.PI / 180;
  const cos_a = Math.cos(angle_rad),
        sin_a = Math.sin(angle_rad);

  return {
    x: cos_a * x - sin_a * y,
    y: sin_a * x + cos_a * y
  };
}

//shift by a multiple fac of an offset {xref, yref}
function offsetBy(fac, {x:xref, y:yref}, {x, y}) {
  return {
    x: fac*xref + x,
    y: fac*yref + y
  };
}

const image = {
  coords: {x: 200, y: 0}, //lab-frame coordinates
  angle: 45, //lab-frame rotation angle
  width: 50,
  height: 10
};

const container = {
  coords: {x: 100, y: 100}, //lab-frame coordinates
  angle: 45 //lab-frame rotation angle
};

//calculate the coordinates of the image's top-right corner
//with respect to the container
const corner = rotateCCWBy(-container.angle,
  offsetBy(
    -1, container.coords,
    offsetBy(
      +1, image.coords,
      rotateCCWBy(image.angle,
        {x: image.width, y: image.height}
      )
    )
  )
);

console.log(corner);

编辑：

如果假设y轴指向“向下”，则上面的公式也适用，一个公式只需要将角度解释为顺时针方向，而不是逆时针方向（因此原则上，函数{{1} }应该重命名为rotateCCWBy）。例如，让我们考虑这种情况：

在此，容器的左上角位于位置（2,1），并且容器本身旋转了15度。宽度为4高度为2的图像（黑色矩形）旋转了30度，其左上角位于位置（3，3）。现在，我们要计算点P相对于容器的坐标rotateCWBy。

使用：

(x, y)

收益

const image = {
  coords: {x: 3, y: 3}, //lab-frame coordinates
  angle: 30, //lab-frame rotation angle
  width: 4,
  height: 2
};

const container = {
  coords: {x: 2, y: 1}, //lab-frame coordinates
  angle: 15 //lab-frame rotation angle
};

//calculate the coordinates of the image's top-left corner
//with respect to the container
const corner = rotateCCWBy(-container.angle,
  offsetBy(
    -1, container.coords,
    offsetBy(
      +1, image.coords,
      rotateCCWBy(image.angle,
        {x: image.width, y: image.height}
      )
    )
  )
);

console.log(corner);

可以从附图中（近似）通过视觉验证。

EDIT2：

在附加clarification之后，图像的坐标不应该是“实验室框架”（即相对于画布），而是相对于已经旋转的容器。因此，转换需要调整为：

{ x: 4.8296291314453415, y: 4.640160440463835 }

Calculate corners of rotated rectangle in container

1 个答案: