如何找到相对鼠标位置？

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

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

这个想法很简单。我们只需使用反转的绝对变换。

相对指针位置演示view raw

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/konva@9.3.18/konva.min.js"></script>
    <meta charset="utf-8" />
    <title>Konva Relative Pointer Position Demo</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #f0f0f0;
      }
    </style>
  </head>

  <body>
    <div id="container"></div>
    <script>
      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: 'Click on the canvas to draw a circle',
        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);
      });
    </script>
  </body>
</html>