How to create a dropdown menu in kineticjs?

1
2
3
4
5
6
7

var stage = new Kinetic.Stage({
  container: 'container',
  width: 500,
  height: 200
});

var layer = new Kinetic.Layer();

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

var button = new Kinetic.Rect({
  x: 10,
  y: 10,
  width: 100,
  height: 30,
  fill: 'blue'
});

button.on('click', function() {
  // Show dropdown menu
});

layer.add(button);

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

var items = ['Item 1', 'Item 2', 'Item 3'];

items.forEach(function(item, index) {
  var menuItem = new Kinetic.Rect({
    x: 10,
    y: 50 + 30 * index,
    width: 100,
    height: 30,
    fill: 'grey'
  });

  menuItem.on('click', function() {
    console.log(item + ' clicked');
  });

  layer.add(menuItem);
});

stage.add(layer);

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

var menuOpen = false;

button.on('click', function() {
  if (menuOpen) {
    layer.hide();
  } else {
    layer.show();
  }

  menuOpen = !menuOpen;
  
  layer.draw();
});