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;
};
相关推荐
小李子呢021115 分钟前
前端八股Vue(6)---v-if和v-for
前端·javascript·vue.js
程序员buddha18 分钟前
ES6 迭代器与生成器
前端·javascript·es6
周周记笔记30 分钟前
初识HTML和CSS(一)
前端·css·html
chxii1 小时前
在 IIS 中实现 SSL 证书的自动续期
前端
周星星日记1 小时前
vue3中静态提升和patchflag实现
前端·vue.js·面试
橘子编程1 小时前
React 19 全栈开发实战指南
前端·react.js·前端框架
DanCheOo1 小时前
AI Streaming 架构:从浏览器到服务端的全链路流式设计
前端·agent
我是小趴菜1 小时前
前端如何让图片、视频、pdf等文件在浏览器直接下载而非预览
前端
cg332 小时前
开源项目自动化:用 GitHub Actions 让每个 Issue 都被温柔以待
前端
haierccc2 小时前
Win7、2008R2、Win10、Win11使用FLASH的方法
前端·javascript·html