konvajs - react-konva 中舞台组件的鼠标进入和鼠标离开事件侦听器不起作用
问题描述
react-konva 中的舞台组件是否有鼠标进入和鼠标离开事件侦听器?当用户鼠标进入、移动和离开画布时,我需要实现类似于 Figma 的协作指针。尝试在 Stage 组件上使用 onMouseEnter 和 onMouseLeave,以某种方式它会在光标触摸 Rect、Circle 和 Arrow 组件时进行侦听。
解决方案
您可以只在舞台本身或其 DOM 包装器上使用onMouseEnter
和事件。onMouseLeave
const App = () => {
const [entered, setIntered] = React.useState(false);
return (
<Stage
width={window.innerWidth / 2}
height={window.innerHeight / 2}
onMouseEnter={() => {
setIntered(true);
}}
onMouseLeave={() => {
setIntered(false);
}}
style={{
border: "1px solid red",
margin: "5px",
display: "inline-block"
}}
>
<Layer>
<Text
text={`Mouse is ${entered ? "inside" : "outside"} of canvas.`}
fontSize={15}
/>
</Layer>
</Stage>
);
};
演示:https ://codesandbox.io/s/react-konva-mouseevent-event-us0w8?file=/src/index.js
推荐阅读
- mongodb - java.lang.IllegalArgumentException- 属性不能为空
- python - 使用单个函数更改 tkinter 中多个 Checkbutton 的值
- html - 想要将按钮放在垂直居中的 DIV 下方
- k6 - 我需要一些示例,我们正在捕获动态值并将其传递给后续请求
- python - 谷歌云语音识别权限被拒绝错误
- java - 为什么spring boot webflow验证失败?
- python - 当每大约 1 秒添加新 div 时,如何使用 Python 从 Selenium 中的 div 中提取文本?
- php - 如何解决 PHP 中的“未定义变量”问题?
- ios - 我没有得到服务器的任何响应,我该如何解决这个问题?
- python - 在 django 1.11 中找不到静态文件