检测画布及其精灵 - pixijs [英] Detect canvas and its sprites - pixijs

问题描述

我正试图检测画布和精灵是否发生点击事件。



我尝试过：



在我的HTML中：

I'm trying to detect wich canvas and sprite is when click event occurs.

What I have tried:

In my html:

<div class="pixiTestBox">
  <!-- here i will append one app view (canvas)  -->
</div>


<div class="pixiTestBox2">
   <!-- here i will append another app view (canvas)  -->
</div>

在我的js：

In my js:

//NOTE: When document is loaded, calls automatically `pixiSetup()` and `pixiSetup2()`
pixiSetup()
{
	//creates and append the "app.view" to div.pixiTestBox

	var ctx = document.querySelector(".pixiTestBox");
	var app = new PIXI.Application(800, 600,
	{
		backgroundColor: 0x1099bb
	});
	ctx.appendChild(app.view);

	// create a new Sprite from an image path
	var bunny = PIXI.Sprite.fromImage('images/user.png');

	// center the sprite's anchor point
	bunny.anchor.set(0.5);

	app.stage.addChild(bunny);


	// Pointers normalize touch and mouse
	app.renderer.plugins.interaction.on('pointerup', canvasOnClickHandler);

	//Set element react on click
	bunny.interactive = true;
	bunny.on('pointerdown', drawedElementClicked);
}

pixiSetup2()
{
	//creates and append the "app.view" to div.pixiTestBox2

	var ctx = document.querySelector(".pixiTestBox2");
	var app = new PIXI.Application(800, 600,
	{
		backgroundColor: 0x1099bb
	});
	ctx.appendChild(app.view);

	// create a new Sprite from an image path
	var bunny = PIXI.Sprite.fromImage('images/user.png');

	// center the sprite's anchor point
	bunny.anchor.set(0.5);

	app.stage.addChild(bunny);

	// Pointers normalize touch and mouse
	app.renderer.plugins.interaction.on('pointerup', canvasOnClickHandler);

	//Set element react on click
	bunny.interactive = true;
	bunny.on('pointerdown', drawedElementClicked);
}



function canvasOnClickHandler(event)
{

	//How can i get here if the canvas that was clicked was the one inside of div class="pixiTestBox" or div class="pixiTestBox2"?

} //canvasOnClickHandler


function drawedElementClicked(event)
{

	//How can i get here wich sprite was clicked? 

} //drawedElementClicked

如何完成canvasOnClickHandler（）和drawedElementClicked中的内容（）？

推荐答案

事件的目标（currentTarget）是您要查找的元素...

The target (currentTarget) of the event is the element you are looking for...

这篇关于检测画布及其精灵 - pixijs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！