событие mouseover для двух перекрывающихся фигур

Событие наведения мыши будет срабатывать для элемента с большим z-индексом, поэтому, когда вы наводите указатель мыши на elemOne или elemTwo (даже когда вы наводите указатель мыши на область перекрытия) и устанавливаете его z-индекс равным 10, срабатывает только элемент с большим z-индексом. событие наведения мыши.

Как насчет того, чтобы делегировать наведение курсора на «стадию», а затем вычислить, находится ли смещение наведения мыши в области перекрытия?

Вроде решил это, создав фоновый элемент и наблюдая mouseposition за каждым ходом. В каждом mousemove я вычисляю, находится ли позиция мыши внутри каждого элемента. Если да, то измените цвет. Демонстрация: http://jsfiddle.net/sandeepy02/NST8C/5/

Источник:

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);

Очевидно, я не горжусь его производительностью, так как для каждого mousemove я проверяю каждый элемент. Производительность не должна быть проблемой, если я буду проверять mousedown или click, но я думаю, что кто-то в этом огромном мире может предложить лучшее решение?

Я попытался сделать это, введя третий элемент, который перекрывается, пожалуйста, найдите на fiddle Here< /а> .

    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,
        globalalpha: 0.5
    });
    elemOne.on('mousemove', function() {
        this.setFill("black");
        elemThree.setFill("black");         
//        this.setZIndex(10);
        layer.draw();
    });
    elemOne.on('mouseout', function() {
        elemThree.setFill("red");
        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,
        globalalpha: 0.5        
    });
    elemTwo.on('mousemove', function() {
        this.setFill("black");
        elemThree.setFill("black");         
//        this.setZIndex(10);
        layer.draw();
    });
    elemTwo.on('mouseout', function() {
        elemThree.setFill("green");
        this.setFill("green");
//        this.setZIndex(1);
        layer.draw();
    });
    elemThree = new Kinetic.Rect({
        x: 150,
        y: 150,
        width: 50,
        height: 50,
//        stroke: 'black',
        strokeWidth: 0,
        draggable: false,
        zindex: 100
    });
    elemThree.on('mousemove', function() {
        elemOne.setFill("black");
        elemTwo.setFill("black");
        elemThree.setFill("black");
//        this.setZIndex(10);
        layer.draw();
    });
    elemThree.on('mouseout', function() {
        elemOne.setFill("red");
        elemTwo.setFill("green");        
        layer.draw();
    });

    layer.add(elemTwo);
    layer.add(elemOne);
    layer.add(elemThree);
    stage.add(layer);
​