Question

Hi I have two shapes that are overlapping (implementation in KineticJs). I want to change the color of these shapes if the mouse hovers above them. In case the mouse hovers above the overlapped(intersection) area, I want both the shapes to change color. However only the top most shape is changing color.

Example at http://jsfiddle.net/sandeepy02/NST8C/ where I want the colour of both rect to be black if I hover mouse over the pverlapped area.

stage = new Kinetic.Stage({
    container: "container",
    width: 320,
    height: 320
});
layer = new Kinetic.Layer();
elemOne = new Kinetic.Rect({
    x: 100,
    y: 100,
    width: 100,
    height: 100,
    fill: 'red',
    stroke: 'black',
    strokeWidth: 0,
    draggable: false
});
elemOne.on('mousemove', function() {
    this.setFill("black");
    this.setZIndex(10);
    layer.draw();
});
elemOne.on('mouseout', function() {
    this.setFill("red");
    this.setZIndex(1);
            layer.draw();
});
elemTwo = new Kinetic.Rect({
    x: 150,
    y: 150,
    width: 100,
    height: 100,
    fill: 'green',
    stroke: 'black',
    strokeWidth: 0,
    draggable: false
});
elemTwo.on('mousemove', function() {
    this.setFill("black");
    this.setZIndex(10);
            layer.draw();
});
elemTwo.on('mouseout', function() {
    this.setFill("green");
    this.setZIndex(1);
             layer.draw();
});
layer.add(elemOne);
layer.add(elemTwo);
stage.add(layer);

Answer 1

Kinda solved it by creating a background element and observing mouseposition for each move. In each mousemove, I calculate if the mouse position is within every element. If yes, then change color.
Demo:
http://jsfiddle.net/sandeepy02/NST8C/5/

Source:

stage = new Kinetic.Stage({
    container: "container",
    width: 500,
    height: 500
});
background = new Kinetic.Rect({
    x: 0,
    y: 0,
    width: 500,
    height: 500,
    fill: 'white',
    stroke: 'white',
    strokeWidth: 0,
    draggable: false,
});
layer = new Kinetic.Layer();
elemOne = new Kinetic.Rect({
    x: 100,
    y: 100,
    width: 100,
    height: 100,
    fill: 'red',
    stroke: 'black',
    strokeWidth: 0,
    draggable: false,
    name: 'elem',
    id: 1,
    col: 'red'
});

elemTwo = new Kinetic.Rect({
    x: 150,
    y: 150,
    width: 100,
    height: 100,
    fill: 'green',
    stroke: 'black',
    strokeWidth: 0,
    draggable: false,
    name: 'elem',
    id: 2,
    col: 'green'
});

stage.on('mousemove', function() {
    //alert("a");
    var mousePos = stage.getMousePosition();
    var shapes = stage.get('.elem');
    var i;
    for (i = 0; i < shapes.length; i++) {
        if (shapes[i].intersects(mousePos.x, mousePos.y)) {
            shapes[i].setFill("black");
        }
        else {
            if (shapes[i].getId() == 1) {
                shapes[i].setFill("red");
            }
            else shapes[i].setFill("green");
        }
    }
    layer.draw();
});
layer.add(background);
layer.add(elemOne);
layer.add(elemTwo);
stage.add(layer);

Obviously I am not proud of its performance as for each mousemove I am checking each element. Performance should not be an issue if I were to check for mousedown or click, but I think someone out there in this wide world can provide a better solution?