Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Detect wich canvas and sprite is when click event occurs #109

Open
tifDev opened this issue Jun 29, 2018 · 0 comments
Open

Detect wich canvas and sprite is when click event occurs #109

tifDev opened this issue Jun 29, 2018 · 0 comments

Comments

@tifDev
Copy link

tifDev commented Jun 29, 2018

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>

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? (is it possible to add an "id" when declaring a sprite and get his id here?)

} //drawedElementClicked



How can i accomplish what is in canvasOnClickHandler() and drawedElementClicked()?

@tifDev tifDev changed the title Detect canvas and its sprites Detect wich canvas and its sprites when click event occurs Jun 29, 2018
@tifDev tifDev changed the title Detect wich canvas and its sprites when click event occurs Detect wich canvas and sprite is when click event occurs Jun 29, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant