pixi.js中的事件数据

Question

我刚开始使用Pixi玩耍，并从具有像素坐标的数组中绘制了多个矩形：

var rectangle = [....];
....

var stage = new PIXI.Stage();
var renderer = PIXI.autoDetectRenderer(wrapper.getWidth(), wrapper.getHeight(), { transparent: true });
....

var graphics = new PIXI.Graphics();
graphics.interactive = true;

graphics.on("mouseover", function(e) {
   this.alpha = 0.5;
}).on("mouseout", function() {
   this.alpha = 1;
});

graphics.beginFill(0xFFFFFF);
graphics.lineStyle(2, 0x000000);

for (var i = 0; i < rectangle.length; i++) {
   graphics.drawRect(rectangle[i][0], rectangle[i][1], 10, 10);
}

graphics.endFill();

stage.addChild(graphics);
renderer.render(stage);

事件是触发的，但是我通过" e"或" this"在回调中获得的对象是所有图形的对象。我想在GraphicsData中看到我可以看到的单个"鼠标"矩形对象，但是没有ID或其他任何可以识别的矩形对象。我该怎么做？

性能是本质的，因为我要渲染20k 矩形或圆形。

Answer 1

，没有将每个矩形绘制到其自己的PIXI.Graphics对象上，您将无法获得单个mouseover事件。这是因为就Pixi而言，图形对象是单个位图图像。

我建议在mouseover功能中执行自己的命中测试以检测光标结束的矩形。

如果您使用的是PIXI.Rectangle S，则可以利用内置的Rectangle.Contains功能来检查点（在这种情况下，在这种情况下，鼠标位置）是否在边界内。