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

[JosPixi]

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.

 

[ivan.popelyshev]

>  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.

[ivan.popelyshev]

Btw, in latest v5 there's no "interaction" namespace , so mapping function is somewhere in "PIXI.InteractionManager.prototype"

[JosPixi]

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 September 2, 2020 by JosPixi
wrong code was placed.

[ivan.popelyshev]

> But what should i override it. Completely blank.

try rotate coords. then debug. then fix. then debug. then fix again. You'll get it in the end, its a good exercise

[JosPixi]

Hi,

I tried and i couldn't do it. Can u do it for a price. Can u plz share ur mail ID. Is that possible, Even i dont know whether to ask here or not.

[elementalcode]

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 September 5, 2020 by elementalcode

[JosPixi]

@elementalcode

Awesome, it works cool, thank u so much. God Bless!

[josprachi]

it is not working for me

Please help!

I don't understand where i am going wrong! 

to fit all my contents in the game, i scaled the stage by 1/2048* resolution. visually looking very nice but not taking input on some parts of screen