4

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

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

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

3 回答 3

2

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

您如何将鼠标悬停委托给“舞台”，然后计算鼠标悬停偏移量是否在重叠区域？

于 2013-01-02T06:13:05.890 回答
1

Kinda 通过创建背景元素并观察mouseposition每个动作来解决它。在 eachmousemove中，我计算鼠标位置是否在每个元素内。如果是，则更改颜色。演示：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如果我要检查or ，性能应该不是问题click，但我认为在这个广阔的世界中有人可以提供更好的解决方案？

于 2013-01-04T05:00:29.090 回答
0

我试图通过引入重叠的第三个元素来做到这一点，请在fiddle Here上找到。

有一些循环孔，例如，不能使用 Stroke 即边框到框。也可能是其他一些。

祝你好运。

这是代码

    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);
​
于 2013-01-02T07:30:58.927 回答