Question

嗨我有两个重叠的形状（在KineticJs中实现）。如果鼠标悬停在它们上面，我想改变这些形状的颜色。如果鼠标悬停在重叠（交叉）区域上方，我希望两个形状都改变颜色。然而，只有最顶部的形状才会改变颜色。

http://jsfiddle.net/sandeepy02/NST8C/处的示例，如果我将鼠标悬停在pverlapped区域上，我希望两个rect的颜色都是黑色。

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

鼠标悬停事件将触发具有更大z-index的元素，因此当鼠标悬停elemOne或elemTwo时（即使鼠标悬停在重叠区域上）并将其z-index设置为10，只有z-索引更大的元素index正在触发mouseover事件。

如何将mouseover委托给'stage'，然后计算mouseover offset是否在重叠区域？

Answer 2

有点通过创建背景元素并观察每个移动的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，性能应该不是问题，但我认为在这个广阔的世界中有人可以提供更好的解决方案吗？

Answer 3

我试图通过在fiddle Here上引入重叠plz find的第三个元素来尝试这样做。

有一些循环漏洞，不能使用笔画，即边框到框。也可能是其他一些。

最好的运气。

这是代码

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

两个重叠形状上的鼠标悬停事件

3 个答案: