2

私は、1つのレイヤーを含むステージがあるkineticjsを使用しています。このレイヤーには、マウスオーバーイベントに反応する複数の形状があります (ツールチップが表示されます)。これらの形状に加えて、より高い ZIndex にいくつかのテキストノードもあります (したがって、形状の上にあります)。

これはすべて正常に機能しますが、テキストが図形の上にある場合、図形にツールチップが表示されません。何もバインドしていないにもかかわらず、テキストノードがイベントを「転送」するのではなく使用するためだと思いますテキストノードに。

ZIndex が低いノードにイベントを伝播するにはどうすればよいですか?

4

1 に答える 1

2

個人的には、マウスイベントを登録したくないものを置くために別のレイヤーを作成し、レイヤーを作成するときにそのlisteningプロパティをfalseに設定します。
個々の要素に対して this プロパティを設定することもできます。
レイヤーを使用した例を次に示します... 

var stage = new Kinetic.Stage({
    container: 'container',
    width: 578,
    height: 200
});

var normalLayer = new Kinetic.Layer();
var textLayer = new Kinetic.Layer({listening :false});

var rect = new Kinetic.Rect({
    x: 20,
    y: 20,
    width: 100,
    height: 50,
    fill: 'green',
    stroke: 'black',
    strokeWidth: 4
});

rect.on('click', function(evt) {
    this.setFill('blue');
    normalLayer.draw();
});

normalLayer.add(rect);

var simpleText = new Kinetic.Text({
        x: 40,
        y: 40,
        text: 'Simple Text',
        fontSize: 30,
        fontFamily: 'Calibri',
        textFill: 'yellow'
      });

textLayer.add(simpleText);

stage.add(normalLayer);
stage.add(textLayer);

http://jsfiddle.net/MT435/プロパティは個々の要素にも設定できることに注意し
てください。listening

于 2012-12-17T08:36:14.463 に答える