Как преобразовать координаты мыши холста в пользовательские значения XY и пометить ячейку

Question

У меня есть элемент canvas с overlay-grid и я сохраняю координаты мыши в поле по событию click.

Но теперь мне нужно пользовательское преобразование в пользовательских значениях осей и отметка ячейки, по которой щелкнули.(пример ячейки D4)

HTML:

<canvas id="canvas" width="480" height="400" style="background: url(''); background-size: cover;" onclick="storeGuess(event)"></canvas>

<input id="coords_c" name="coords_c" class="form-control" type="text" placeholder="" value="<?php echo htmlspecialchars($position->coords_c, ENT_QUOTES, 'UTF-8'); ?>">

Javascript:

    var bw = 480;
    var bh = 400;
    var p = 0;
    var cw = bw + (p*2) + 0;
    var ch = bh + (p*2) + 1;

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

    function drawBoard(){
    for (var x = 0; x <= bw; x += 40) {
        context.moveTo(0.5 + x + p, p);
        context.lineTo(0.5 + x + p, bh + p);
    }

    for (var x = 0; x <= bh; x += 20) {
        context.moveTo(p, 0.5 + x + p);
        context.lineTo(bw + p, 0.5 + x + p);
    }

    context.strokeStyle = "black";
    context.stroke();
    }

    drawBoard();

    var canvasSetup = document.getElementById("canvas");
    var ctx = canvasSetup.getContext("2d");
    guessX = 0; 
    guessY = 0; 
    function storeGuess(event) {
        var x = event.offsetX;
        var y = event.offsetY;
        guessX = x;
        guessY = y;

        var tipWidth=35;
            var tipHeight=22;
            var tipRow;
            var tipCol;

        $('#coords_c').val( + guessX + "/" + guessY);
        console.log("x coords: " + guessX + ", y coords: " + guessY);
    }

Answer 1

Вот как я бы это сделал: я сохраняю все ячейки в массиве ячеек.Затем по щелчку я обнаруживаю ячейку, в которой произошло событие щелчка.Я крашу эту клетку в красный цвет.Здесь вы можете решить сохранить индекс ячейки, по которой щелкнули (pos), в другом массиве.

Пожалуйста, прочитайте комментарии в коде.

// the width and the height of the canvas
const cw = canvas.width =  480;
const ch = canvas.height = 400;
// the width and the height of every cell
let rw = 40;
let rh = 20;
// the number of cells per row
let w = cw / rw;
// the number of cells per column
let h = ch / rh;
// the mouse position
let m = {};
// the array of cells
let cells = [];

// the canvas context
const context = canvas.getContext("2d");


// a function to draw a cell
function drawCell(o,fill){
  let fillcolor = fill ? fill : "white";
  context.fillStyle = fillcolor;
  context.beginPath();
  context.moveTo(o.x,o.y);
  context.lineTo(o.x+rw, o.y);
  context.lineTo(o.x+rw, o.y+rh);
  context.lineTo(o.x, o.y+rh);
  context.lineTo(o.x, o.y);
  context.closePath()
  context.fill();
  context.stroke();
}


// a function to draw the board
function drawBoard(){
  for (var y = 0; y < ch; y += rh) {
    for (var x = 0; x < cw; x += rw) {
      let o = {x:x,y:y}
      //draw the cell and pust the coords of the cell onto the cells array
      drawCell(o);
      cells.push(o)
    }
  }
}

drawBoard();


canvas.addEventListener("click",(evt)=>{
  // get the mouse position
  m = oMousePos(canvas, evt);
  // get the index of the clicked cell
  let pos = (~~(m.y / rh))* w + ~~(m.x / rw);
  // fill the clicked cell
  drawCell(cells[pos],"red")
  // here you can store the guess in an aray if this is what you need
})


    
// a function to get the mouse position    
function oMousePos(canvas, evt) {
  var ClientRect = canvas.getBoundingClientRect();
	return { 
	x: Math.round(evt.clientX - ClientRect.left),
	y: Math.round(evt.clientY - ClientRect.top)
}
}

canvas{border:1px solid}

<canvas id="canvas"></canvas>

ОБНОВЛЕНИЕ

ОП комментирует:

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

В этом случае вам необходимо очистить контекст и перерисовать сетку перед заполнением ячейки, по которой щелкнули:

// the width and the height of the canvas
const cw = canvas.width =  480;
const ch = canvas.height = 400;
// the width and the height of every cell
let rw = 40;
let rh = 20;
// the number of cells per row
let w = cw / rw;
// the number of cells per column
let h = ch / rh;
// the mouse position
let m = {};
// the array of cells
let cells = [];

// the canvas context
const context = canvas.getContext("2d");


// a function to draw a cell
function drawCell(o,fill){
  let fillcolor = fill ? fill : "white";
  context.fillStyle = fillcolor;
  context.beginPath();
  context.moveTo(o.x,o.y);
  context.lineTo(o.x+rw, o.y);
  context.lineTo(o.x+rw, o.y+rh);
  context.lineTo(o.x, o.y+rh);
  context.lineTo(o.x, o.y);
  context.closePath()
  context.fill();
  context.stroke();
}


// a function to draw the board
function drawBoard(){
  for (var y = 0; y < ch; y += rh) {
    for (var x = 0; x < cw; x += rw) {
      let o = {x:x,y:y}
      //draw the cell and pust the coords of the cell onto the cells array
      drawCell(o);
      cells.push(o)
    }
  }
}

drawBoard();


canvas.addEventListener("click",(evt)=>{
  // get the mouse position
  m = oMousePos(canvas, evt);
  // get the index of the clicked cell
  let pos = (~~(m.y / rh))* w + ~~(m.x / rw);
  // clear the context
  context.clearRect(0,0,cw,ch);
  // draw the board
  drawBoard()
  // fill the clicked cell
  drawCell(cells[pos],"red")
  // here you can store the guess in an aray if this is what you need
})


    
// a function to get the mouse position    
function oMousePos(canvas, evt) {
  var ClientRect = canvas.getBoundingClientRect();
	return { 
	x: Math.round(evt.clientX - ClientRect.left),
	y: Math.round(evt.clientY - ClientRect.top)
}
}

canvas{border:1px solid}

<canvas id="canvas"></canvas>