Click on an isometric plane and obtain normal coordinates

Question

I have photos distributed as cells. When I click, I get the corresponding row and column. console.log("Col:" + X + "Row:" + Y);

When applying an isometric view conversion like this:

ctx.translate(0, 300); ctx.scale(1, 0.5); ctx.rotate(-45 * Math.PI /180);

I do not know what mathematical formula applies to get the coordinates correctly.

---

Based on feedback so far, I've been able to get this far. The x coordinate seems to work fine, but the y coordinate not.

Isometrico();

function Isometrico(){ 
     ctx.translate(0, 300);
     ctx.scale(1, 0.5);
     var radianes= -45 * Math.PI /180; 
     ctx.rotate(radianes); 
}

/*
document.addEventListener("mousedown", function(e) { 
             CorIsometrico( e.offsetX, e.offsetY); 
});
*/

/*
function CorIsometrico(xI,yI){ 
     //RESPUESTA yI=yI-300;
     yI = yI * 2; 
     xI = xI * Math.cos(45) - yI * Math.sin(45); 
     I  = yI * Math.sin(45) + yI * Math.cos(45); 
     console.log("Coor Isometricas:" + xI + "/"+ + yI); 
}
*/

---

Edit:

Each cell is 50x50. Having 10 columns and 50 rows, the information of each cell would look like this:

1: 50/50 2: 100/50 3: 150/50 ... 49: 450/250 50: 500/250

Maximum Y value = 250.

xI=xI*Math.cos(45 / 180 * Math.PI)-yI*Math.sin(45 / 180 * Math.PI); yI=yI*Math.sin(45 / 180 * Math.PI)+yI*Math.cos(45 / 180 * Math.PI); yI=yI*2; yI=yI-300;

Click in X:1 / Y:1 = -138.5929291125633/ 531.5575746753798 Click in X:1 / Y:5= 198.69700551341987/ 90.3229432149742

Y exceeds the maximum value.

---

Edit2:

var xI2=xIMath.cos(45 / 180 * Math.PI)-yIMath.sin(45 / 180 * Math.PI); var yI2=xIMath.sin(45 / 180 * Math.PI)+yIMath.cos(45 / 180 * Math.PI); yI2=yI*2; yI2=yI-300; xI2=xI2+150;

/// console.log("Coor Isometricas:" + xI2 + "/"+ + yI2 );

x coor : 100 to 400 px if x+150; y coor: 0 to -155.

Been thinking that the problem is not necessary on isometry. What I'm looking for can be simplified to get the coordinates of a 2d plane by having it rotated X degrees

Answer 1

How you do this depends on the type of isometric surface you have

A diamond shaped surface is basically just a grid rotated by 45 degress and squashed along the y axis. To calculate the coordinate of the clicked tile, just multiply the y coordinate by 2 (or if your tiles don't have the standard 2:1 ratio, just divide the width by the height and multiply by that value), then subtract the position of top tile and apply a +45° rotation (45° clockwise). You can do the last step by using the formula

$$x'=x\cdot cos(45°)-y\cdot sin(45°)$$ $$y'=x\cdot sin(45°)+y\cdot cos(45°)$$

Where \$(x';y')\$ is the new coordinate. This will give you a position in a coordinate system where the top left tile is the (0; 0). Floor the x and y coordinates if you need the tile coordinates.

A staggered isometric projection looks like this:

If you need to convert the coordinates from this to a cartesian coordinate system, follow this answer