Thursday, January 23, 2020

javascript - Click on an isometric plane and obtain normal coordinates


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.


Example of isometric map




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




No comments:

Post a Comment

Simple past, Present perfect Past perfect

Can you tell me which form of the following sentences is the correct one please? Imagine two friends discussing the gym... I was in a good s...