Konva 获取鼠标在画布中的位置通用方法

记录一下,参数中的stageRef为konva的stage对象,我使用的是vue-konva,故可以使用vue的ref对象进行获取。

js 复制代码
/**
 * 获取鼠标在画布中的位置
 * @param stageRef
 * @returns
 */
export const getMousePosition = (stageRef: Ref) => {
  const stage = stageRef.value.getStage();
  const pointerPosition = stage.getPointerPosition();

  if (pointerPosition) {
    // 获取画布的缩放比例
    const scale = stage.scaleX(); // 假设x和y方向缩放比例相同

    // 获取画布的拖动位置
    const stagePos = stage.position();

    // 计算鼠标在原始画布坐标系中的位置
    return {
      x: (pointerPosition.x - stagePos.x) / scale,
      y: (pointerPosition.y - stagePos.y) / scale,
    };
  }
  return null;
};
相关推荐
gnip42 分钟前
实现AI对话光标跟随效果
前端·javascript
脑花儿1 小时前
ABAP SMW0下载Excel模板并填充&&剪切板方式粘贴
java·前端·数据库
lumi.2 小时前
Vue.js 从入门到实践1:环境搭建、数据绑定与条件渲染
前端·javascript·vue.js
二十雨辰2 小时前
vue核心原理实现
前端·javascript·vue.js
影子信息3 小时前
[Vue warn]: Error in mounted hook: “ReferenceError: Jessibuca is not defined“
前端·javascript·vue.js
卷Java3 小时前
CSS模板语法修复总结
java·前端·css·数据库·微信小程序·uni-app·springboot
gihigo19984 小时前
在CentOS上配置SVN至Web目录的自动同步
前端·svn·centos
珍宝商店4 小时前
优雅的 async/await 错误处理模式指南
开发语言·前端·javascript
excel4 小时前
楖览:Vue3 源码研究导读
前端
proud12124 小时前
开源的 CSS 动画库
前端·css·开源