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;
};
相关推荐
狗哥哥10 小时前
统一下载网关技术方案
前端·架构
三块可乐两块冰11 小时前
rag学习5
linux·前端·python
铁皮饭盒11 小时前
Bun + SQLite 10个实用技巧
前端·javascript·后端
Hooray11 小时前
告别低效循环!AI Agent 编排+编程显示器,让前端开发效率实现断代式跃升
前端·人工智能·ai编程
飞天狗11111 小时前
零基础JavaWeb入门——第4课:表单处理 —— 浏览器怎么把数据发给服务器
java·开发语言·前端·后端·servlet
Hooray11 小时前
前端暗黑模式的适配艺术
前端·vue.js·视觉设计
恋猫de小郭11 小时前
解析华为 DevEco Code 和小米 MiMo Code,都基于 OpenCode ,有什么区别?
android·前端·ios
IT_陈寒11 小时前
Vue的响应式让我原地裂开,你们也有这情况吗
前端·人工智能·后端
问心无愧051312 小时前
ctfshow web入门114
android·前端·笔记
晓得迷路了12 小时前
栗子前端技术周刊第 133 期 - Angular v22、React 编译器 Rust 版、pnpm 11.5...
前端·javascript·css