调整画布大小以适应容器答案

【问题标题】：Resizing canvas to fit within container调整画布大小以适应容器
【发布时间】：2022-01-03 21:36:07
【问题描述】：

在尝试让我的 Canvas/Stage 调整大小并正确适合父容器时遇到了一些问题。我发现了其他类似的帖子，虽然答案确实帮助我获得了新的屏幕尺寸，但它仍然不想适合容器，而是直接到屏幕的边缘（这是示例中所预期的），用左/右内容遍历父容器。

我尝试了许多不同的方法，但仍然找不到正确的方法，它不会超出父容器，并且 X/Y 比例不会偏离画布内形状的位置。对我来说最明显的方法是通过 CSS 为实际的画布/舞台设置一个约束，但这最终会导致缩放使形状出现在画布之外。

在代码链接中，我包含了我尝试执行的 hacky 方法，虽然它在某些情况下对于较小的设备屏幕看起来是正确的，但画布宽度仍会超出父容器。我不确定我是否想太多，或者是否有更简单的方法来解决我的问题，任何帮助或提示都会很棒。

实时代码沙盒：https://codesandbox.io/s/white-surf-yc2vh

想要的结果图片：https://imgur.com/a/w0oXxG0

【问题讨论】：

1.您希望画布保持固定大小（就像在您的代码中一样），还是要调整画布大小以适应父容器？ 2.您是否希望内容相对于画布调整大小，以便例如如果画布变小，形状会变小，或者如果画布太小，内容是否应该被剪裁？
抱歉回复晚了。 1. 我想调整画布大小以适应父容器。 2. 这是我目前遇到的一个问题，理想情况下，即使画布变小，我也希望内容（在本例中为圆圈）具有相同的外观（宽度/高度等）。在我的 hacky 解决方案中，我注意到即使应用了缩放，当画布小于更大屏幕时，圆圈看起来也不同（这可能是我计算它的问题）。所以我认为当画布太小时内容应该被剪裁。

标签： javascript reactjs canvas konvajs react-konva

【解决方案1】：

我认为您想要/需要的是调整画布的大小以使其适合容器，同时保持您指定的纵横比。

您可以使用此函数调整某个矩形（矩形）的大小，使其适合其他矩形（容器）：

// fit a rect into some container, keeping the aspect ratio of the rect
export const fitRectIntoContainer = (rectWidth, rectHeight, containerWidth, containerHeight) => {

    const widthRatio = containerWidth / rectWidth;    // ration container width to rect width
    const heightRatio = containerHeight / rectHeight; // ration container height to rect height

    const ratio = Math.min( widthRatio, heightRatio ); // take the smaller ratio

    // new rect width and height, scaled by the same ratio
    return {
        width: rectWidth * ratio,
        height: rectHeight * ratio,
    };
};

然后您可以调整画布的大小以使其适合容器：

const canvasSize = fitRectIntoContainer( 700, 600, size.width, size.height );
const canvasWidth = canvasSize.width;
const canvasHeight = canvasSize.height;

那我猜你不再需要任何缩放了（所以 scaleX 和 scaleY 可以同时为 1 或未定义）

【讨论】：

刚刚做了一个快速测试，似乎解决了我遇到的所有问题。您的解决方案非常简单，从未想过这种方法。感谢您的帮助，非常感谢！
感谢您的反馈。一旦你有了解决方案，这类问题总是很简单，但如果你还不知道该走哪条路，就很难把你的脑袋包起来。你并不孤单:-)