在透视模式下如何计算旋转角度以使宽度适合所需尺寸？

Question

我试图想出一种通过 CSS 围绕 Y 轴透视图像旋转图像的方法，以便最终的可见宽度等于所需的像素数。

例如，我可能想要旋转300px图像，以便在应用旋转和透视后，图像的宽度现在为240px（原始宽度的 80%）。通过反复试验，我知道我可以设置transform: perspective(300) rotateY(-12.68)并将左上角的点放在-240px（这是使用图像的右侧作为原点）

我不太清楚如何对其进行逆向工程，以便对于任何给定的图像宽度、透视和所需宽度，我可以计算必要的旋转。

例如。对于同一张300px图像，我现在希望它的旋转后宽度为150px- 获得必要角度所需的计算是什么？

这是一个游乐场，可以让您了解我正在寻找的内容，我复制了透视和旋转变换完成的数学来计算最左边点的最终位置，但我无法弄清楚给出如何在给定矩阵数学和涉及的多个步骤的情况下求解角度。

https://repl.it/@BenSlinger/PerspectiveWidthDemo

const calculateLeftTopPointAfterTransforms = (perspective, rotation, width) => {

  // convert degrees to radians
  const rRad = rotation * (Math.PI / 180);

  // place the camera
  const cameraMatrix = math.matrix([0, 0, -perspective]);

  // get the upper left point of the image based on middle right transform origin
  const leftMostPoint = math.matrix([-width, -width / 2, 0]);

  const rotateYMatrix = math.matrix([
    [Math.cos(-rRad), 0, -Math.sin(-rRad)],
    [0, 1, 0],
    [Math.sin(-rRad), 0, Math.cos(-rRad)],
  ]);

  // apply rotation to point
  const rotatedPoint = math.multiply(rotateYMatrix, leftMostPoint);

  const cameraProjection = math.subtract(rotatedPoint, cameraMatrix);

  const pointInHomogenizedCoords = math.multiply(math.matrix([
    [1, 0, 0 / perspective, 0],
    [0, 1, 0 / perspective, 0],
    [0, 0, 1, 0],
    [0, 0, 1 / perspective, 0],
  ]), cameraProjection.resize([4], 1));

  const finalPoint = [
    math.subset(pointInHomogenizedCoords, math.index(0))
    / math.subset(pointInHomogenizedCoords, math.index(3)),
    math.subset(pointInHomogenizedCoords, math.index(1))
    / math.subset(pointInHomogenizedCoords, math.index(3)),
  ];

  return finalPoint;
}

<div id="app"></div>


	<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.js"></script>
 
 	<script type="text/babel" data-plugins="transform-class-properties" >
  // GOAL: Given the percentage defined in desiredWidth, calculate the rotation required for the transformed image to fill that space (shown by red background)

// eg: With desiredWidth 80 at perspective 300 and image size 300, rotation needs to be 12.68, putting the left point at 300 * .8 = 240.
// How do I calculate that rotation for any desired width, perspective and image size?


// factor out some styles
const inputStyles = { width: 50 };

const PerspDemo = () => {

  const [desiredWidth, setDesiredWidth] = React.useState(80);
  const [rotation, setRotation] = React.useState(25);
  const [perspective, setPerspective] = React.useState(300);
  const [imageSize, setImageSize] = React.useState(300);
  const [transformedPointPosition, setTPP] = React.useState([0, 0]);

  const boxStyles = { outline: '1px solid red', width: imageSize + 'px', height: imageSize + 'px', margin: '10px', position: 'relative' };

  React.useEffect(() => {
    setTPP(calculateLeftTopPointAfterTransforms(perspective, rotation, imageSize))
  }, [rotation, perspective]);


  return <div>
    <div>
      <label>Image size</label>
      <input
        style={inputStyles}
        type="number"
        onChange={(e) => setImageSize(e.target.value)}
        value={imageSize}
      />
    </div>
    <div>
      <label>Desired width after transforms (% of size)</label>
      <input
        style={inputStyles}
        type="number"
        onChange={(e) => setDesiredWidth(e.target.value)}
        value={desiredWidth}
      />
    </div>

    <div>
      <label>Rotation (deg)</label>
      <input
        style={inputStyles}
        type="number"
        onChange={(e) => setRotation(e.target.value)}
        value={rotation}
      />
    </div>

    <div>
      <label>Perspective</label>
      <input
        style={inputStyles}
        type="number"
        onChange={(e) => setPerspective(e.target.value)}
        value={perspective}
      />
    </div>



    <div>No transforms:</div>
    <div style={boxStyles}>
      <div>
        <img src={`https://picsum.photos/${imageSize}/${imageSize}`} />
      </div>
    </div>

    <div>With rotation and perspective:</div>
    <div style={boxStyles}>
      <div style={{ display: 'flex', position: 'absolute', height: '100%', width: '100%' }}>
        <div style={{ backgroundColor: 'white', flexBasis: 100 - desiredWidth + '%' }} />
        <div style={{ backgroundColor: 'red', flexGrow: 1 }} />

      </div>
      <div style={{
        transform: `perspective(${perspective}px) rotateY(-${rotation}deg)`,
        transformOrigin: '100% 50% 0'
      }}>
        <img src={`https://picsum.photos/${imageSize}/${imageSize}`} />
      </div>
    </div>
    <div>{transformedPointPosition.toString()}</div>
  </div>;
};

ReactDOM.render(<PerspDemo />, document.getElementById('app'));

  </script>
  
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/6.0.4/math.min.js"></script>

任何帮助深表感谢！

Answer 1

我会考虑一种不同的方法来找到没有矩阵计算的公式¹以获得以下结果：

\n\n

R = (p * cos(angle) * D)/(p - (sin(angle) * D))\n

\n\n

其中p是透视图，angle是角度旋转，D是元素宽度，R是我们正在搜索的新宽度。

\n\n

如果我们的角度-45deg和视角等于100px初始宽度，200px那么新宽度将是：58.58px

\n\n

\r\n

\r\n

R = (p * cos(angle) * D)/(p - (sin(angle) * D))\n

\r\n

.box {\r\n  width: 200px;\r\n  height: 200px;\r\n  border: 1px solid;\r\n  background:\r\n    linear-gradient(red,red) right/58.58px 100% no-repeat;\r\n  position:relative;\r\n}\r\n\r\nimg {\r\n transform-origin:right;\r\n}

\r\n

\r\n

\r\n

\n\n

如果我们的角度-30deg和视角等于200px初始宽度，200px那么新宽度将是115.46px

\n\n

\r\n

\r\n

<div class="box">\r\n  <img src="https://picsum.photos/id/1/200/200" style="transform:perspective(100px) rotateY(-45deg)">\r\n</div>

\r\n

.box {\r\n  width: 200px;\r\n  height: 200px;\r\n  border: 1px solid;\r\n  background:\r\n    linear-gradient(red,red) right/115.46px 100% no-repeat;\r\n  position:relative;\r\n}\r\n\r\nimg {\r\n transform-origin:right;\r\n}

\r\n

\r\n

\r\n

\n\n

¹为了更好地理解该公式，让我们考虑下图：

\n\n

\n\n

想象一下，我们从顶部看一切。红线是我们的旋转元素。大黑点是我们的视角，距离p场景等于（这是我们的视角）。由于transform-origin是正确的，因此该点位于右侧是合乎逻辑的。否则，它应该在中心。

\n\n

现在，我们看到的是由设计的宽度，R并且W是我们在没有透视的情况下看到的宽度。很明显，用大视角我们看到的几乎是一样的没有视角

\n\n

\r\n

\r\n

<div class="box">\r\n  <img src="https://picsum.photos/id/1/200/200" style="transform:perspective(200px) rotateY(-30deg)">\r\n</div>

\r\n

.box {\r\n  width: 200px;\r\n  height: 200px;\r\n  border: 1px solid;\r\n}\r\n\r\nimg {\r\n transform-origin:right;\r\n}

\r\n

\r\n

\r\n

\n\n

从小角度来看，我们看到的宽度很小

\n\n

\r\n

\r\n

<div class="box">\r\n  <img src="https://picsum.photos/id/1/200/200" style="transform: rotateY(-30deg)">\r\n</div>\r\n<div class="box">\r\n  <img src="https://picsum.photos/id/1/200/200" style="transform:perspective(9999px) rotateY(-30deg)">\r\n</div>

\r\n

.box {\r\n  width: 200px;\r\n  height: 200px;\r\n  border: 1px solid;\r\n}\r\n\r\nimg {\r\n transform-origin:right;\r\n}

\r\n

\r\n

\r\n

\n\n

O如果我们考虑图中标注的角度，我们可以写出以下公式：

\n\n

tan(O) = R/p\n

\n\n

和

\n\n

tan(O) = W/(L + p)\n

\n\n

所以我们将得到R = p*W /(L + p)和W = cos(-angle)*D = cos(angle)*D，L = sin(-angle)*D = -sin(angle)*D这将为我们提供：

\n\n

R = (p * cos(angle) * D)/(p - (sin(angle) * D))\n

\n\n\n\n

为了找到角度，我们可以将公式转换为：

\n\n

R*p - R*D*sin(angle) = p*D*cos(angle)\nR*p = D*(p*cos(angle) + R*sin(angle))\n

\n\n

然后像这里¹所描述的那样，我们可以得到以下方程：

\n\n

angle = sin-1((R*p)/(D*sqrt(p\xc2\xb2+R\xc2\xb2))) - tan-1(p/R)\n

\n\n

如果你想要一个透视等于 且190pxR 等于150px且D等于200px你需要一个等于-15.635deg

\n\n

\r\n

\r\n

<div class="box">\r\n  <img src="https://picsum.photos/id/1/200/200" style="transform: rotateY(-30deg)">\r\n</div>\r\n<div class="box">\r\n  <img src="https://picsum.photos/id/1/200/200" style="transform:perspective(15px) rotateY(-30deg)">\r\n</div>

\r\n

tan(O) = R/p\n

\r\n

\r\n

\r\n

\n\n

\n\n

^{1 感谢https://math.stackexchange.com社区帮助我确定了正确的公式}

\n