Pointer position incorrect of canvas is rotated #7175
Description
Version
- Phaser Version: 3.80, 4.0.0-rc.4
- Operating system: Windows 11
Description
If the canvas is rotated, then the pointer positions will be calculated incorrectly. In the example below, the pointer should change to the hand cursor if and only if the pointer is over the green square, but it is not the case here.
Example Test Code
<!DOCTYPE` html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Phaser Game</title>
<style>
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: #333;
}
#gameHolder {
position: absolute;
top: 100px;
background: red;
width: 600px;
height: 500px;
transform: rotate(90deg);
}
</style>
<script src="https://cdn.jsdelivr.net/npm/phaser@4.0.0-rc.4/dist/phaser.min.js"></script>
<script>
class Example extends Phaser.Scene {
create () {
const rect = this.add.rectangle(50, 50, 300, 300, 0x00FF00, 1).setOrigin(0);
rect.setInteractive({cursor:'pointer'});
rect.on('pointermove', () => console.log('move'));
}
}
const config = {
type: Phaser.AUTO,
parent: 'gameHolder',
width:500,
height:400,
scene: Example
};
const game = new Phaser.Game(config);
</script>
</head>
<body>
<div id="gameHolder" ></div>
</body>
</html>