Sign in to follow this  
JosPixi

Coordinates/Mouse events are not rotated when the canvas is rotated in PIXI

Recommended Posts

Iam doing a game where i want to rotate the whole canvas to 90degrees for portrait version.

When i want to rotate the canvas, (app.renderer.view, this is how Pixi names canvas), I used the below code

app.renderer.view.style.transform = "rotate(90deg) translate(-190px,335px)"

Good thing is i can see the app rotated successfully. But the mouse or corordinate system still follows the landscape mouse coordinates.

I tried with many CSS and Pixi tricks. Nothing works. I tried with style.transformOrigin etc., in CSS. Does it anything involves that relate to PIXI code.

 

Share this post


Link to post
Share on other sites

 But the mouse or corordinate system still follows the landscape mouse coordinates.

It was mentioned in article for v4: https://github.com/pixijs/pixi.js/wiki/v4-Gotchas#css-transforms-on-canvas

I recommend to go through all our wiki just to be aware of common hacks.

> tried with many CSS and Pixi tricks. Nothing works.

Open pixijs sources in separate IDE window. (btw if you use "idea" you should exclude files "node_modules;lib"). Search for class every time you use a new feature you dont know about.

Share this post


Link to post
Share on other sites

Ok,

I read the article and i checked the pixi v5 version and found the below code.

I understood that i should override the mapPositionToPoint. But what should i override it. Completely blank.

InteractionManager.prototype.mapPositionToPoint = function mapPositionToPoint (point, x, y)
        {
            var rect;

            // IE 11 fix
            if (!this.interactionDOMElement.parentElement)
            {
                rect = { x: 0, y: 0, width: 0, height: 0 };
            }
            else
            {
                rect = this.interactionDOMElement.getBoundingClientRect();
            }
 
            var resolutionMultiplier = 1.0 / this.resolution;
 
            point.x = ((x - rect.left) * (this.interactionDOMElement.width / rect.width)) * resolutionMultiplier;
            point.y = ((y - rect.top) * (this.interactionDOMElement.height / rect.height)) * resolutionMultiplier;
        };

Edited by JosPixi
wrong code was placed.

Share this post


Link to post
Share on other sites
InteractionManager.prototype.mapPositionToPoint = function mapPositionToPoint(point, x, y) {
	var rect;

	// IE 11 fix
	if (!this.interactionDOMElement.parentElement) {
		rect = { x: 0, y: 0, width: 0, height: 0 };
	}
	else {
		rect = this.interactionDOMElement.getBoundingClientRect();
	}

	var resolutionMultiplier = 1.0 / this.resolution;

	// added an extra if, so we don't break normal behaviour
	if (this.interactionDOMElement.style.transform.includes("rotate(90deg)")) {
		// flipped rect.width and rect.height. Ez moneyz
		point.x = ((x - rect.left) * (this.interactionDOMElement.width / rect.height)) * resolutionMultiplier;
		point.y = ((y - rect.top) * (this.interactionDOMElement.height / rect.width)) * resolutionMultiplier;
	}
	else {
		// original code
		point.x = ((x - rect.left) * (this.interactionDOMElement.width / rect.width)) * resolutionMultiplier;
		point.y = ((y - rect.top) * (this.interactionDOMElement.height / rect.height)) * resolutionMultiplier;
	}
};

I just flipped values until it worked.
I want a bazilion dollars in non secuential bills... nah, jk, hope it helps ❤️

 

EDIT: Added an extra IF to check if the canvas was actually flipped or not

Edited by elementalcode

Share this post


Link to post
Share on other sites

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...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.