Create a masked overlay with draggable/resizable underneath

Question

I'm trying to get kineticjs down and worked out a little app which makes my images draggable and resizable. So far so good;

However: I want an overlay with a variable height/width block in the center which should show the image underneath(With the draggable/resizable intact) with a semi-transparent overlay.

I want to be able to still resize/drag behind the overlay while the overlay is still intact(Like this, but with kineticjs: http://envyum.nl/pointer/)

Is there a way to do so? By cutting a block out of an overlaying rectangle perhaps? And can the mouse ignore the overlay such as pointer-events: none can in css3?

Thanks in advance,

can you post some of the code of what you have in a working jsfiddle? that way others (like me) can help you out more by adding some code — SoluableNonagon
it also seems that the simplest way to achieve an 'overlay' is to create a new layer with four semi-transparent rectangles that dont listen for any events so that you can drag the image behind it. — SoluableNonagon

SoluableNonagon SoluableNonagon · Accepted Answer · 2013-03-07T16:16:54

I have a sample of what I was talking about in the comments above: http://jsfiddle.net/KwQBB/

This did not require a new layer, but might be good practice to do so.

You can tailor the logic to be whatever you want, especially to simulate a 'cut-out'

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

  var pentagon = new Kinetic.RegularPolygon({
    x: stage.getWidth() / 2,
    y: stage.getHeight() / 2,
    sides: 5,
    radius: 70,
    fill: 'red',
    stroke: 'black',
    strokeWidth: 4,
    draggable: true,
    dragOnTop: false
  });
  var rect1 = new Kinetic.Rect({  // overlay
    x: 0,
    y: 0, 
    width: stage.getWidth(),
    height: 100,
    fill: 'gray',
    opacity: 0.5,
    listening: false     // <------ Extremely important
  });
  var rect2 = new Kinetic.Rect({ // overlay
    x: 0,
    y: stage.getHeight()/2, 
    width: stage.getWidth(),
    height: 100,
    fill: 'gray',
    opacity: 0.5,
    listening: false     // <------ Extremely important
  });

  // add the shape to the layer
  layer.add(pentagon);
  layer.add(rect1);
  layer.add(rect2);   // add more rectangles to complete overlay

  // add the layer to the stage
  stage.add(layer);

Create a masked overlay with draggable/resizable underneath

1 Answers