在 react-konva 中更改悬停光标
Change cursor on Hover in react-konva
我正在使用 react-konva 为应用程序创建 UI。我想要它,以便在将鼠标悬停在 Rect 上时光标变为指针。有关于如何使用 konva 执行此操作的文档,但没有关于 react-konva 的文档。有人可以帮忙吗?
您是否尝试过使用合成事件 onMouseOver 和许多其他事件。
检查此线程,
How do you Hover in ReactJS? - onMouseLeave not registered during fast hover over
它的工作原理与 Konva 演示非常相似。
<Rect
width={50}
height={50}
fill="red"
onMouseEnter={e => {
// style stage container:
const container = e.target.getStage().container();
container.style.cursor = "pointer";
}}
onMouseLeave={e => {
const container = e.target.getStage().container();
container.style.cursor = "default";
}}
/>
演示:https://codesandbox.io/s/react-konva-cursor-style-demo-96in7
此外,您可以合并两个事件:
const handleCursor = (e: KonvaEventObject<MouseEvent>) => {
const stage = e.target.getStage();
if (stage) {
if (e.type === "mouseenter") {
stage.container().style.cursor = "pointer";
} else {
stage.container().style.cursor = "default";
}
}
};
我正在使用 react-konva 为应用程序创建 UI。我想要它,以便在将鼠标悬停在 Rect 上时光标变为指针。有关于如何使用 konva 执行此操作的文档,但没有关于 react-konva 的文档。有人可以帮忙吗?
您是否尝试过使用合成事件 onMouseOver 和许多其他事件。
检查此线程, How do you Hover in ReactJS? - onMouseLeave not registered during fast hover over
它的工作原理与 Konva 演示非常相似。
<Rect
width={50}
height={50}
fill="red"
onMouseEnter={e => {
// style stage container:
const container = e.target.getStage().container();
container.style.cursor = "pointer";
}}
onMouseLeave={e => {
const container = e.target.getStage().container();
container.style.cursor = "default";
}}
/>
演示:https://codesandbox.io/s/react-konva-cursor-style-demo-96in7
此外,您可以合并两个事件:
const handleCursor = (e: KonvaEventObject<MouseEvent>) => {
const stage = e.target.getStage();
if (stage) {
if (e.type === "mouseenter") {
stage.container().style.cursor = "pointer";
} else {
stage.container().style.cursor = "default";
}
}
};