问题描述
我正在用 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
为舞台调整内容。