Drag and Drop Collision Detection Demo

How to find overlapping objects on the canvas?

In this demo we will use simple collision detection to highlight intersected objects.
For simplicity we will use just bounding boxes to detect collision.

Red borders are used to show bounding boxes.

Instructions: Drag and drop a shape, see collusion.

Konva Drag and Drop Multiple Shapes Demoview raw

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/[email protected]/konva.min.js"></script>
    <meta charset="utf-8" />
    <title>Konva Drag and Drop Collision Detection 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,
      });

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

      function createShape() {
        var group = new Konva.Group({
          x: Math.random() * width,
          y: Math.random() * height,
          draggable: true,
        });
        var shape = new Konva.Rect({
          width: 30 + Math.random() * 30,
          height: 30 + Math.random() * 30,
          fill: 'grey',
          rotation: 360 * Math.random(),
          name: 'fillShape',
        });
        group.add(shape);

        var boundingBox = shape.getClientRect({ relativeTo: group });

        var box = new Konva.Rect({
          x: boundingBox.x,
          y: boundingBox.y,
          width: boundingBox.width,
          height: boundingBox.height,
          stroke: 'red',
          strokeWidth: 1,
        });
        group.add(box);
        return group;
      }

      for (var i = 0; i < 10; i++) {
        layer.add(createShape());
      }
      layer.on('dragmove', function (e) {
        var target = e.target;
        var targetRect = e.target.getClientRect();
        layer.children.forEach(function (group) {
          // do not check intersection with itself
          if (group === target) {
            return;
          }
          if (haveIntersection(group.getClientRect(), targetRect)) {
            group.findOne('.fillShape').fill('red');
          } else {
            group.findOne('.fillShape').fill('grey');
          }
        });
      });

      function haveIntersection(r1, r2) {
        return !(
          r2.x > r1.x + r1.width ||
          r2.x + r2.width < r1.x ||
          r2.y > r1.y + r1.height ||
          r2.y + r2.height < r1.y
        );
      }
    </script>
  </body>
</html>

Enjoying Konva? Please consider to support the project.