konvajs/konva

pointer-events attribute let rect can’t drag

playerzzz opened this issue · 1 comments

playerzzz commented

hello, i want set a transparent mask which can scroll above the rect, but i find i can't drag the rect。this is my code
code.txt

thank you

heitorlisboa commented

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/konva@9.3.1/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>
  • 👍1