Jump to content

PIXI.JS - 'pointermove' Function moves all the sprites, instead of moving only the selected Sprite / Graphic


mohsinmunir
 Share

Recommended Posts

I am creating a Rectangle and Adding it to the ViewPort with Code: 

	var rectangle = new Graphics();
	rectangle.beginFill(0, 0.001);
		rectangle.lineStyle(1, 0xFF0000);
		rectangle.drawRect(5, 5, 200, 100);

		rectangle.interactive = true;
		rectangle.buttonMode = true;
		rectangle.on('pointerdown', onDragStart)
			.on('pointerup', onDragEnd)
			.on('pointerupoutside', onDragEnd)
			.on('pointermove', onDragMoveRectangle);
		app.viewport.addChild(rectangle);

after that I am creating a Sprite using the code and adding it to the rectangle. ( Its basically a handle to increase the width of Rectangle ) 

	const textureMove = PIXI.Texture.from(horizontalMoveSVG);
	const sprite = new PIXI.Sprite(textureMove);
	sprite.interactive = true;
		sprite.buttonMode = true;
		sprite.width = 25;
		sprite.height = 25;
		sprite.anchor.set(0.5);
		sprite.x = 205;
		sprite.y = 50;
		sprite.on('pointerdown', onDragStart)
			.on('pointerup', onDragEnd)
			.on('pointerupoutside', onDragEnd)
		.on('pointermove', onDragMoveSprite);

		rectangle.addChild(sprite);
		rectangle.endFill();

the two functions are below: 

	function onDragMoveRectangle() {
		if (this.dragging) {
			const newPosition = this.data.getLocalPosition(this.parent);
			// const newPosition = this.data.getLocalPosition(this.parent);
			this.x = newPosition.x;
			this.x = newPosition.y;
		}
	}

	function onDragMoveSprite() {
		if (this.dragging) {
			const newPosition = this.data.getLocalPosition(this.parent);
			// const newPosition = this.data.getLocalPosition(this.parent);
			this.width = newPosition.x;
			this.height = newPosition.y;
		}
	}


Problem I am facing is: If I move Rectangle or a Sprite, both the drag functions got executed, which I don't want. I want to execute only 1 function when rectangle move and other function when the sprite moves. 

- onDragMoveRectangle will move the rectangle ( changing the position )
- onDragMoveSprite will increase the width and height of the rectangle 

Link to comment
Share on other sites

  • 2 weeks later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...