hello, i want set a transparent mask which can scroll above the rect, but i find i ca

pointer-events attribute let rect can’t drag about konva HOT 1 CLOSED

playerzzz commented on June 9, 2024

pointer-events attribute let rect can’t drag

from konva.

Comments (1)

heitorlisboa commented on June 9, 2024 1

The problem is that you're setting the pointer events as auto in the .transparent_content container. If any element that's over the canvas can catch the pointer events, the canvas will not be able to catch those events, therefore you'll not be able to drag the rect.

Here's the code for anyone who wants to check it without needing to download the .txt:

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/[email protected]/konva.min.js"></script>
    <meta charset="utf-8" />
    <title>Konva Rect Demo</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #f0f0f0;
      }
      #container {
        position: absolute;
        width: 500px;
        height: 500px;
        margin-top: 100px;
      }

      .transparent_container {
        position: absolute;
        height: 600px;
        width: 600px;
        z-index: 3;
        pointer-events: none;
        overflow: auto;
        background-color: transparent;
      }

      .transparent_container .transparent_content {
        height: 100000px;
        background-color: transparent;
        width: 100%;
        overflow: auto;
        pointer-events: auto;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>

    <div class="transparent_container">
      <div class="transparent_content"></div>
    </div>
    <script>
      var width = window.innerWidth;
      var height = window.innerHeight;

      var stage = new Konva.Stage({
        container: "container",
        width: width,
        height: height,
      });

      var layer = new Konva.Layer();

      var rect1 = new Konva.Rect({
        x: 20,
        y: 20,
        width: 100,
        height: 50,
        fill: "green",
        stroke: "black",
        strokeWidth: 4,
        draggable: true,
      });
      // add the shape to the layer
      layer.add(rect1);

      // add the layer to the stage
      stage.add(layer);
    </script>
  </body>
</html>