4

こんにちは私は重複している2つの形状を持っています（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);
4

3 に答える 3

2

マウスオーバーイベントは、z-indexが大きい要素に対して発生するため、elemOneまたはelemTwoのいずれかをマウスオーバーして（オーバーラップ領域にマウスオーバーした場合でも）、そのz-indexを10に設定すると、z-indexが大きい要素のみが発生します。マウスオーバーイベント。

マウスオーバーを「ステージ」に委任してから、マウスオーバーオフセットがオーバーラップ領域にあるかどうかを計算するのはどうですか？

于 2013-01-02T06:13:05.890 に答える
1

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、この広い世界の誰かがより良い解決策を提供できると思いますか？

于 2013-01-04T05:00:29.090 に答える
0

私はここでフィドルで見つけたplzと重複している3番目の要素を導入することによってこれをやろうとしました。

ストロークを使用できない、つまりボックスへの境界線のようないくつかの抜け穴があります。他にもあるかもしれません。

幸運を祈ります。

これがコードです

    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 に答える