Konva / Canvas 上未缩放的交互层

如何解决Konva / Canvas 上未缩放的交互层

我正在用 React Konva 编写一个简单的图像编辑器。我生成了 <Stage width={500} height={500}>，但在较小的视口中，我尝试通过 CSS 缩放画布表。

例如：

const Component = () => (
    <Div>
        <Stage {...size}> ... </Stage>
    </Div>
)

const Div = styled.div`
  canvas {
    max-width: 100% !important;
    height: auto !important;
  }
  .konvajs-content {
    width: initial !important;
    height: initial !important;
  }
`;

我注意到整个工作表缩放正确，但交互层不正确。结果，如果我在移动设备上缩放画布，我无法拖放元素并精确点击元素。

示例：https://youtu.be/ulu_ot5f9Xg

我无法通过视口缩放画布。其他功能使用此画布，并期待大分辨率。

解决方法

您不应使用 CSS 缩放 Konva 舞台，也不应更改其内部样式。它可能会破坏命中检测算法，也可能会大大降低您的应用程序的性能。

相反，您应该只读取容器 DOM 元素的大小并将该大小应用于舞台。如果需要，您可以使用 scaleX 和 scaleY 为舞台调整内容。

有关演示，请查看此处：https://konvajs.org/docs/sandbox/Responsive_Canvas.html#Do-you-need-responsive-adaptive-canvas-for-you-desktop-and-mobile-applications