Как можно преобразовать координаты холста в координаты плитки?

Итак, у меня есть холст с нарисованной на нем изометрической тайловой картой, которая выглядит идеально.

В прослушивателе событий в нижней части скрипта я получаю координаты курсора внутри холста. Как я могу узнать, над какой плиткой находится курсор?

var cs = document.getElementById('board');

var c = cs.getContext("2d")
var gridWidth=100
var gridHeight=50
var tilesX = 12, tilesY = 12;
var spriteWidth=gridWidth
var spriteHeight=img.height/img.width*gridWidth
cs.width = window.innerWidth //spriteWidth*10
cs.height = window.innerHeight //spriteHeight*10
var ox = cs.width/2-spriteWidth/2
var oy = (tilesY * gridHeight) / 2

window.onresize=function(){
cs.width = window.innerWidth //spriteWidth*10
cs.height = window.innerHeight //spriteHeight*10
ox = cs.width/2-spriteWidth/2
oy = (tilesY * gridHeight) / 2
draw()
}

draw();


function renderImage(x, y) {
c.drawImage(img, ox + (x - y) * spriteWidth/2, oy + (y + x) * gridHeight/2-(spriteHeight-gridHeight),spriteWidth,spriteHeight)
}

function draw(){
for(var x = 0; x < tilesX; x++) {
    for(var y = 0; y < tilesY; y++) {
        renderImage(x,y)
    }
}
}

cs.addEventListener('mousemove', function(evt) {
var x = evt.clientX,
y = evt.clientY;
console.log('Mouse position: ' + x + ',' + y);
}, false);

Извините за вставку такого длинного кода, но он здесь только для того, чтобы проложить изометрическую сетку.

РЕДАКТИРОВАТЬ: Кроме того, как я могу получить верхние левые координаты изображения плитки, чтобы передать его?


javascript canvas html html5-canvas mouse-coordinates
person ThePixelPony    schedule 14.05.2014    source источник
comment
Это был ответ, который у меня был для кого-то, кто делает обычную сетку 32x32, но, может быть, вы можете получить представление об изометрии? stackoverflow.com/questions/23615605/ -- он использует модуль (%). Я не разбираюсь в изо-сетках, поэтому, к сожалению, ничем помочь не могу.   -  person ndugger    schedule 14.05.2014
comment
В другом месте вы сказали «ничего из этого не работает», поэтому не принимайте ответ и / или не спрашивайте, @markE обладает как знаниями, так и добротой. Возможно, вы захотите внимательно рассмотреть мой пост здесь gamedev.stackexchange.com/questions/73859/, так как результат в порядке, и вы можете легко его настроить. По пути вам, возможно, придется копаться в том, что такое матрица преобразования и другие вещи. Последний (закомментированный) код находится здесь jsfiddle.net/gamealchemist/zF2w8   -  person GameAlchemist    schedule 15.05.2014
comment
Спасибо @GameAlchemist. Извините, что ввел людей в заблуждение.   -  person ThePixelPony    schedule 15.05.2014

Ответы (1)


arrow_upward
0
arrow_downward

Предполагая, что вы разместили свои плитки, где крайний левый столбец и самая верхняя строка равны нулю:

var column = parseInt(mouseX / tileWidth);

var row = parseInt(mouseY / tileHeight);

Кстати, если вы в конечном итоге переместите свой холст за пределы верхнего левого угла страницы, вы должны настроить координаты мыши на смещение холста.

Вот пример того, как вычислить положение мыши:

// references to the canvas element and its context

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");

// get the offset position of the canvas on the web page

var BB=canvas.getBoundingClientRect();
var offsetX=BB.left;
var offsetY=BB.top;

// listen for mousedown events

canvas.onmousedown=handleMousedown;

function handleMousedown(e){

     // tell the browser we will handle this event

     e.preventDefault();
     e.stopPropagation();

     // calculate the mouse position

     var mouseX=e.clientX-offsetX;
     var mouseY=e.clientY-offsetY;

}
person markE    schedule 14.05.2014
comment
Могу ли я просто сделать + oy, чтобы добавить смещение? - person ThePixelPony; 14.05.2014
comment
Я добавил к своему ответу пример того, как рассчитать положение мыши на основе положения холста на веб-странице. - person markE; 14.05.2014