javascript - 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 而言，Graphics 对象是单个位图图像。

我建议在 mouseover 函数中执行您自己的 HitTest ，以检测光标位于哪个矩形上。

如果您使用的是 PIXI.Rectangle，您可以利用内置的 Rectangle.Contains 函数来检查一个点(在本例中为鼠标位置)在边界内。