Question

我正在使用kineticjs，其中我有一个带有一层的舞台。该图层上有多个形状，它们对鼠标悬停事件做出反应（它们显示工具提示）除了这些形状，我还在更高的ZIndex上有一些文本节点（因此它们在形状之上）。

这一切都很好，有一个例外，当一个文本位于一个形状的顶部时，形状没有显示工具提示我认为是因为textnode使用了事件，而不是“向前”它，尽管我还没有' t将任何内容绑定到文本节点。

如何将事件传播到较低ZIndex上的节点？

Answer 1

就个人而言，我会创建一个单独的图层来放置您不希望注册鼠标事件的任何内容，并在创建图层时将其listening属性设置为false。您还可以为各个元素设置此属性以下是使用图层的示例...

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属性。

如何将（鼠标）事件“转发”到kineticjs中较低Z指数上的节点/形状

1 个答案: