如何找到相对鼠标位置？

在某些情况下，您可能需要找到相对于某个节点的点的位置。为此，我们可以使用数学 Konva.Transform 方法。

在这个演示中，我们有深度嵌套的变换节点：移动过的舞台、缩放过的层、旋转过的组。 现在我们想在点击时将圆圈添加到组中。但是如何找到这些圆圈的位置呢？ 我们不能直接使用 stage.getPointerPosition()，因为那是相对于舞台左上角的位置。

想法很简单。我们只需要使用逆变换。

Vanilla

import Konva from 'konva';

var width = window.innerWidth;
var height = window.innerHeight;

var stage = new Konva.Stage({
container: 'container',
width: width,
height: height,
x: 20,
y: 50,
});

var layer = new Konva.Layer({
scaleX: 1.2,
scaleY: 0.8,
rotation: 5,
});
stage.add(layer);

var group = new Konva.Group({
x: 30,
rotation: 10,
scaleX: 1.5,
});
layer.add(group);

var text = new Konva.Text({
text: '点击画布绘制圆形',
fontSize: 20,
});
group.add(text);

stage.on('click', function () {
var pos = group.getRelativePointerPosition();
var shape = new Konva.Circle({
  x: pos.x,
  y: pos.y,
  fill: 'red',
  radius: 20,
});

group.add(shape);
});

Open Sandbox

React

import { useState } from 'react';
import { Stage, Layer, Group, Text, Circle } from 'react-konva';

const App = () => {
const [circles, setCircles] = useState([]);

const handleStageClick = (e) => {
  // 从 konva 树中获取 group 引用
  const group = e.target.getStage().findOne('Group');
  if (!group) return;
  
  // 获取相对于 group 的位置
  const pos = group.getRelativePointerPosition();
  
  // 添加新圆形
  setCircles([
    ...circles,
    {
      x: pos.x,
      y: pos.y,
      radius: 20,
      fill: 'red',
      id: Date.now().toString()
    }
  ]);
};

return (
  <Stage 
    width={window.innerWidth} 
    height={window.innerHeight}
    x={20}
    y={50}
    onClick={handleStageClick}
  >
    <Layer
      scaleX={1.2}
      scaleY={0.8}
      rotation={5}
    >
      <Group
        x={30}
        rotation={10}
        scaleX={1.5}
      >
        <Text 
          text="点击画布绘制圆形" 
          fontSize={20}
        />
        {circles.map((circle) => (
          <Circle
            key={circle.id}
            x={circle.x}
            y={circle.y}
            radius={circle.radius}
            fill={circle.fill}
          />
        ))}
      </Group>
    </Layer>
  </Stage>
);
};

export default App;

Open Sandbox

Vue

<template>
<v-stage 
  :config="stageConfig"
  @click="handleStageClick"
>
  <v-layer :config="layerConfig">
    <v-group :config="groupConfig">
      <v-text :config="textConfig" />
      <v-circle 
        v-for="circle in circles"
        :key="circle.id"
        :config="circle"
      />
    </v-group>
  </v-layer>
</v-stage>
</template>

<script setup>
import { ref } from 'vue';

const stageConfig = {
width: window.innerWidth,
height: window.innerHeight,
x: 20,
y: 50
};

const layerConfig = {
scaleX: 1.2,
scaleY: 0.8,
rotation: 5
};

const groupConfig = {
x: 30,
rotation: 10,
scaleX: 1.5
};

const textConfig = {
text: '点击画布绘制圆形',
fontSize: 20
};

const circles = ref([]);

const handleStageClick = (e) => {
// 从 konva 树中获取 group 引用
const group = e.target.getStage().findOne('Group');
if (!group) return;

// 获取相对于 group 的位置
const pos = group.getRelativePointerPosition();

// 添加新圆形
circles.value.push({
  x: pos.x,
  y: pos.y,
  radius: 20,
  fill: 'red',
  id: Date.now().toString()
});
};
</script>

Open Sandbox