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;
};
相关推荐
萌萌哒草头将军2 小时前
🚀🚀🚀VSCode 发布 1.101 版本,Copilot 更全能!
前端·vue.js·react.js
GIS之路2 小时前
OpenLayers 图层叠加控制
前端·信息可视化
90后的晨仔2 小时前
ArkTS 语言中的number和Number区别是什么?
前端·harmonyos
菜鸡爱上编程3 小时前
React16,17,18,19更新对比
前端·javascript·reactjs·react
陈龙龙的陈龙龙3 小时前
uniapp 金额处理组件
前端·javascript·uni-app
我命由我123453 小时前
VSCode - VSCode 让未被编辑的标签页不被自动关闭
前端·javascript·ide·vscode·编辑器·html·js
Jimmy3 小时前
CSS 中操作移动,缩放和旋转
前端·css·react.js
layman05284 小时前
openeuler 虚拟机:Nginx 日志分析脚本
前端·javascript·nginx
curdcv_po4 小时前
ts 非空 断言, 后缀加感叹号!,有话要说!!!
前端
烛阴4 小时前
快速上手Axios:前端开发者必备技能
前端·javascript