How to drag a shape even if there is a shape above it?

user_18134106 0
Viewed 34

I'm trying to be able to drag a shape even if there is another shape above it.

  • Is that possible if yes do you have any idea how to do it ?

  • Is there a Konva parameter do resolve that situation ?

Thanks

const stage = new Konva.Stage({
  container: 'container',
  width: 300,
  height: 300
});

const layer = new Konva.Layer();
stage.add(layer);

const shape = new Konva.Rect({
  x: stage.width() / 2,
  y: stage.height() / 2,
  width: 50,
  height: 50,
  fill: 'green',
  draggable: true
});
layer.add(shape);

const shape2 = new Konva.Rect({
  x: stage.width() / 4,
  y: stage.height() / 4,
  width: 50,
  height: 50,
  fill: 'blue',
});
layer.add(shape2);

layer.draw();
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Konva demo">
  <script src="https://unpkg.com/konva@^3/konva.min.js"></script>
  <meta charset="utf-8">
</head>
<body>
  <div class="flex-container" id="container"></div>
</body>
</html>

demo: https://jsbin.com/dihulirepo/edit?html,js,output

konva konvajs
1 Answers

Found a way to do it add listening: false do the shape above.

eg: 

const shape2 = new Konva.Rect({
  x: stage.width() / 4,
  y: stage.height() / 4,
  width: 50,
  height: 50,
  fill: 'blue',
  listening: false // here
});

user_181341060
Related