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;
};
相关推荐
Hi_kenyon8 小时前
VUE3套用组件库快速开发(以Element Plus为例)二
开发语言·前端·javascript·vue.js
起名时在学Aiifox8 小时前
Vue 3 响应式缓存策略:从页面状态追踪到智能数据管理
前端·vue.js·缓存
李剑一9 小时前
uni-app实现本地MQTT连接
前端·trae
EndingCoder9 小时前
Any、Unknown 和 Void:特殊类型的用法
前端·javascript·typescript
oden9 小时前
代码高亮、数学公式、流程图... Astro 博客进阶全指南
前端
GIS之路9 小时前
GDAL 实现空间分析
前端
JosieBook9 小时前
【Vue】09 Vue技术——JavaScript 数据代理的实现与应用
前端·javascript·vue.js
pusheng20259 小时前
算力时代的隐形防线:数据中心氢气安全挑战与技术突破
前端·安全
起名时在学Aiifox10 小时前
前端文件下载功能深度解析:从基础实现到企业级方案
前端·vue.js·typescript