Return to Question

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

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); 
}
*/

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=xIMath.cos(45 / 180 * Math.PI)-yIMath.sin(45 / 180 * Math.PI); yI=yIMath.sin(45 / 180 * Math.PI)+yIMath.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.

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.

Regards.

[![enter image description here][1]][1] [1]: https://i.sstatic.net/QAMpk.png

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); 
}
*/