在 Web 浏览器中创建可点击的网格 [英] Creating a Clickable Grid in a Web Browser

问题描述

我想在 HTML5 画布上绘制一个 10 x 10 方块的网格，方块上显示数字 1-100.单击一个方块应该会调用一个 JavaScript 函数，并将方块的编号作为变量传递给函数.

I want to draw a grid of 10 x 10 squares on a HTML5 canvas with number 1-100 displayed on the squares. Clicking a square should call a JavaScript function with the square's number passed as a variable to the function.

推荐答案

首先，我鼓励您阅读这个答案另一个涉及 HTML5 Canvas 的问题.你需要明白没有正方形.为了检测对正方形"的点击，您必须跟踪从每个画布坐标到它逻辑包含的正方形的映射，处理整个画布上的单击事件，找出哪个正方形(s) 你想改变，然后用你想要的改变重画画布.

First, I encourage you to read this answer to another question involving the HTML5 Canvas. You need to understand that there are no squares. In order to detect a click on a 'square', you would have to keep track of a mapping from each canvas coordinate to the square(s) that it logically contains, handle a single click event on the entire canvas, work out which square(s) you want to change, and then redraw the canvas with the changes you want.

那么——既然你似乎不反对使用更合适的技术——我鼓励你在任一 HTML 中执行此操作(其中每个方块"类似于 <div>使用 CSS 绝对定位、调整大小和着色)或 SVG(使用 <rect> 如果您需要正方形能够旋转，或者想要引入其他形状).

Then—since you seem to have no objection to using a more appropriate technology—I encourage you to do this in either HTML (where each 'square' is something like a <div> that is absolutely-positioned and sized and colored using CSS), or SVG (using <rect> if you need the squares to be able to be rotated, or want to introduce other shapes).

HTML 和 SVG 都是保留模式"图形模式系统，其中绘制形状保留"了该形状的概念.您可以移动形状，更改其颜色、大小等，计算机会自动为您重新绘制.此外，对于您的用例更重要的是，您可以(使用 HTML 和 SVG):

HTML and SVG are both 'retained-mode' graphics mode systems, where drawing a shape 'retains' the concept of that shape. You can move the shape, change its colors, size, etc. and the computer will automatically redraw it for you. Moreover, and more importantly for your use case, you can (with both HTML and 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/

---

Edit: I've created a simple implementation in JavaScript and HTML: http://jsfiddle.net/6qkdP/2/

这是核心代码，以防 JSFiddle 宕机:

Here's the core code, in case JSFiddle is down:

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;
}

这篇关于在 Web 浏览器中创建可点击的网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！