данных о событиях в 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); 

события срабатывают, но объект я получаю от «е» или «this» внутри обратного вызова является объектом для всей графики. Я хочу получить этот единственный объект «наложенных на ящик» прямоугольников, который я вижу в графических файлах, но нет идентификатора или чего-то другого, чтобы идентифицировать его. Как я могу это сделать?

Производительность по существу, поскольку я собираюсь отображать 20k + прямоугольники или круги.

Answer 1

Без чертежа каждый прямоугольник на свой собственный PIXI.Graphics объект вы не сможете получить индивидуальные mouseover события. Это связано с тем, что в отношении PIXI объект Graphics представляет собой одно растровое изображение.

Я бы предложил выполнить собственные тесты попадания внутри функции mouseover, чтобы определить, какой прямоугольник находится над курсором.

Если вы используете PIXI.Rectangle s, вы можете воспользоваться встроенной функцией Rectangle.Contains, чтобы проверить, находится ли точка (в данном случае позиция мыши) внутри границ.