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;
};
相关推荐
答案answer几秒前
一个非常实用的Three.js3D模型爆破💥和切割开源插件
前端·github·three.js
掘金安东尼14 分钟前
Fun with TypeScript Generics:玩转 TS 泛型
前端·javascript·面试
掘金安东尼15 分钟前
Next.js 企业级落地
前端·javascript·面试
掘金安东尼20 分钟前
React 性能优化完全指南 2026
前端·javascript·面试
Moment29 分钟前
OpenClaw 从能聊到能干差的是这 50 个 Skills 😍😍😍
前端·后端·开源
小霖家的混江龙37 分钟前
从 0 到 1 实现一个 useState
前端·javascript·react.js
晓得迷路了42 分钟前
栗子前端技术周刊第 118 期 - Oxfmt Beta、Angular GitHub stars、React 基金会...
前端·javascript·react.js
亿元程序员1 小时前
小伙伴说我的拼图游戏用Mask不能合批...
前端
恋猫de小郭1 小时前
AI 正在造就你的「认知卸载」,但是时代如此
前端·人工智能·ai编程
摸鱼的春哥2 小时前
Agent教程14:记忆才是Agent开发的核心
前端·javascript·后端