Konva 上未缩放的交互层 / Canvas

Question

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

例如：

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;
  }
`;

我注意到整个 sheet 缩放正确，但交互层不正确。因此，如果我在移动设备上缩放 canvas，我无法拖放元素并精确点击元素。

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

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

Answer 1

您不应使用 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

Konva 上未缩放的交互层 / Canvas

Not scaled interaction layer on Konva / Canvas

javascript

css

canvas

konvajs