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
No comments:
Post a Comment