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;
};
相关推荐
二两锅巴9 分钟前
📺 无需Electron!前端实现多显示器浏览器窗口精准控制与通信
前端
炸土豆13 分钟前
防抖节流里的this传递
前端·javascript
用户40993225021214 分钟前
Vue3中动态样式数组的后项覆盖规则如何与计算属性结合实现复杂状态样式管理?
前端·ai编程·trae
山璞16 分钟前
Flutter3.32 中使用 webview4.13 与 vue3 项目的 h5 页面通信,以及如何调试
前端·flutter
努力早日退休19 分钟前
Antd Image标签父元素会比图片本身高几个像素的原因
前端
林希_Rachel_傻希希19 分钟前
手写Promise--教学版本
前端·javascript·面试
ETA823 分钟前
`console.log([1,2,3].map(parseInt))` 深入理解 JavaScript 中的高阶函数与类型机制
前端·javascript
呼叫694523 分钟前
图片列表滚动掉帧的原因分析与解决方案
前端
狗哥哥26 分钟前
AI 驱动前端自动化测试:一套能落地、能协作、能持续的工程化方案
前端·测试
全栈老石30 分钟前
别再折腾端口转发了:使用 Cloudflare Tunnel 优雅地分享你的 localhost
前端·后端·全栈