Создание интерактивной сетки в веб-браузере

Question

Я хочу нарисовать сетку 10 х 10 квадратов на холсте HTML5 с числом 1-100, отображаемым на квадратах.Щелчок по квадрату должен вызвать функцию JavaScript с номером квадрата, переданным функции в качестве переменной.

Answer 1

Во-первых, я рекомендую вам прочитать этот ответ на другой вопрос, связанный с HTML5 Canvas.Вы должны понимать, что здесь нет квадратов.Чтобы обнаружить щелчок по «квадрату», вам нужно будет отслеживать отображение каждой координаты холста на квадрат (ы), которые он логически содержит, обрабатывать одно событие щелчка на всем холсте, определять, какой квадрат(s) вы хотите изменить, а затем перерисовать холст с нужными вам изменениями.

Затем, поскольку вы, похоже, не возражаете против использования более подходящей технологии, я призываю вас сделать это в любом HTML(где каждый «квадрат» - это что-то вроде <div>, который абсолютно позиционирован, измерен и окрашен с помощью CSS), или SVG (с использованием <rect>, если вам нужно, чтобы квадраты можно было вращать, или хотите ввестифигур).

HTML и SVG - это системы графического режима «с удержанием», в которых рисование фигуры «сохраняет» концепцию этой фигуры.Вы можете перемещать фигуру, изменять ее цвета, размер и т. Д., И компьютер автоматически перерисовывает ее для вас.Более того, что более важно для вашего случая использования, вы можете (как с HTML, так и с SVG):

function changeColor(evt){
  var clickedOn = evt.target;
  // for HTML
  clickedOn.style.backgroundColor = '#f00';

  // for SVG
  clickedOn.setAttribute('fill','red');
}
mySquare.addEventListener('click',changeColor,false);

---

Редактировать : я создал простую реализацию на JavaScript иHTML: http://jsfiddle.net/6qkdP/2/

Вот основной код на случай, если JSFiddle не работает:

function clickableGrid( rows, cols, callback ){
  var i=0;
  var grid = document.createElement('table');
  grid.className = 'grid';
  for (var r=0;r<rows;++r){
    var tr = grid.appendChild(document.createElement('tr'));
    for (var c=0;c<cols;++c){
      var cell = tr.appendChild(document.createElement('td'));
      cell.innerHTML = ++i;
      cell.addEventListener('click',(function(el,r,c,i){
        return function(){ callback(el,r,c,i); }
       })(cell,r,c,i),false);
    }
  }
  return grid;
}

Answer 2

РЕДАКТИРОВАТЬ: использование элементов HTML вместо рисования этих вещей на холсте или использование SVG - это еще один вариант, который, возможно, предпочтительнее.для реализации SVG:

пример jsfiddle

document.createSvg = function(tagName) {
    var svgNS = "http://www.w3.org/2000/svg";
    return this.createElementNS(svgNS, tagName);
};

var numberPerSide = 20;
var size = 10;
var pixelsPerSide = 400;



var grid = function(numberPerSide, size, pixelsPerSide, colors) {
    var svg = document.createSvg("svg");
    svg.setAttribute("width", pixelsPerSide);
    svg.setAttribute("height", pixelsPerSide);
    svg.setAttribute("viewBox", [0, 0, numberPerSide * size, numberPerSide * size].join(" "));

    for(var i = 0; i < numberPerSide; i++) {
        for(var j = 0; j < numberPerSide; j++) {
          var color1 = colors[(i+j) % colors.length];
          var color2 = colors[(i+j+1) % colors.length];  
          var g = document.createSvg("g");
          g.setAttribute("transform", ["translate(", i*size, ",", j*size, ")"].join(""));
          var number = numberPerSide * i + j;
          var box = document.createSvg("rect");
          box.setAttribute("width", size);
          box.setAttribute("height", size);
          box.setAttribute("fill", color1);
          box.setAttribute("id", "b" + number); 
          g.appendChild(box);
          var text = document.createSvg("text");
          text.appendChild(document.createTextNode(i * numberPerSide + j));
          text.setAttribute("fill", color2);
          text.setAttribute("font-size", 6);
          text.setAttribute("x", 0);
          text.setAttribute("y", size/2);
          text.setAttribute("id", "t" + number);
          g.appendChild(text);
          svg.appendChild(g);
        }  
    }
    svg.addEventListener(
        "click",
        function(e){
            var id = e.target.id;
            if(id)
                alert(id.substring(1));
        },
        false);
    return svg;
};

var container = document.getElementById("container");
container.appendChild(grid(5, 10, 200, ["red", "white"]));
container.appendChild(grid(3, 10, 200, ["white", "black", "yellow"]));
container.appendChild(grid(7, 10, 200, ["blue", "magenta", "cyan", "cornflowerblue"]));
container.appendChild(grid(2, 8, 200, ["turquoise", "gold"]));