调整大小 canvas 以适应容器

Question

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

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

之外

在代码 link 中，我包含了我尝试做的 hacky 方法，虽然在某些情况下设备屏幕较小，但 hacky =30=] 宽度仍然会超出父容器。我不确定是我想太多了，还是有更简单的方法来解决我的问题，任何帮助或提示都会很棒。

实时 CodeSandbox：https://codesandbox.io/s/white-surf-yc2vh

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

Answer 1

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

您可以使用此函数调整一些矩形 (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;    // 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,
    };
};

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

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

那么我猜你不再需要任何缩放（所以 scaleX 和 scaleY 可以都是 1，或者未定义）

调整大小 canvas 以适应容器

Resizing canvas to fit within container

javascript

canvas

reactjs

konvajs

react-konva