How to find relative mouse position?

获取Konva最新的信息

In some cases you may need to find position of a point relative to a node. For purpose we can use mathematical Konva.Transform methods.

In this demo we have deep nesting transformed nodes: moved stage, scaled layer, rotated group.
Now we want to add circles into the group on click. But how to find position of that circles?
We can’t use stage.getPointerPosition() directly because that is position relative to top-left corner of the stage.

The idea is simple. We just need to use inverted absolute transform.

Relative Pointer Position Demoview raw
<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/[email protected]/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);
      layer.draw();

      function getRelativePointerPosition(node) {
        // the function will return pointer position relative to the passed node
        var transform = node.getAbsoluteTransform().copy();
        // to detect relative position we need to invert transform
        transform.invert();

        // get pointer (say mouse or touch) position
        var pos = node.getStage().getPointerPosition();

        // now we find relative point
        return transform.point(pos);
      }

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

        group.add(shape);
        layer.batchDraw();
      });
    </script>
  </body>
</html>
Next