调整画布大小以适应容器

Question

我试图让我的Canvas/舞台在父容器内正确缩放和适配，但是遇到了一些问题。我找到了其他类似的帖子，虽然答案帮助我获得了新的屏幕尺寸，但它仍然无法适应容器，而是直接到达屏幕边缘（这是从示例中预期的），左/右内容会超过父容器。

我已经尝试了很多不同的方法，但仍然找不到正确的方法，使其既不超出父容器，又不扭曲画布中形状的位置。对我来说最明显的方法是通过CSS对实际的canvas/stage设置限制，但这最终会使比例失调，使形状出现在画布外部。

在代码链接中，我包含了我试图做的hacky方法，虽然在某些情况下看起来正确，可以适应更小的设备屏幕，但canvas宽度仍将超出父容器。我不确定是否过于思考或者是否有一个更简单的方法来解决我的问题，请提供任何帮助或提示。

Live CodeSandbox: https://codesandbox.io/s/white-surf-yc2vh

期望结果图像：https://imgur.com/a/w0oXxG0

- Jastreb

---

1. 你想让画布保持固定大小（就像在代码中一样），还是要调整画布大小以适应父容器？2. 你想让内容相对于画布进行调整大小，例如，如果画布变小，则形状变小，或者如果画布太小，则内容被裁剪吗？

- kca

抱歉回复晚了。1.我希望画布可以调整大小以适应父容器内。2.这是我目前遇到的一个问题，理想情况下，即使画布变小，内容（在这种情况下是圆形）也应该具有相同的外观（宽度/高度等）。在我的hacky解决方案中，我注意到，即使应用了缩放，当画布变得较小时，圆形的外观也会与在较大屏幕上不同（这可能与我的计算方式有关）。因此，我认为当画布变得太小时，内容应该被裁剪。 - Jastreb

Answer 1

我认为你想要/需要的是调整画布的大小，使其适应容器，同时保持你指定的宽高比。

你可以使用这个函数来调整某个矩形（rect）的大小，使其适应另一个矩形（container）：

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

    const widthRatio = containerWidth / rectWidth;    // ratio container width to rect width
    const heightRatio = containerHeight / rectHeight; // ratio 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，或者未定义）。

- kca

---

刚刚进行了快速测试，似乎解决了我所有的问题。你的解决方案很棒而且简单，我从未想过那种方法。感谢你的帮助，非常感激！ - Jastreb

感谢您的好评。这种问题一旦有了解决方案，就总是很简单，但如果您还不知道该走哪条路，它会让您难以理解。您并不孤单 :-) - kca