Question

我正在尝试使用~10,000个单元格创建一个表格并将其转换为用户可以使用鼠标移动绘制的画布。

我希望能够通过突出显示鼠标在按住某些键时移动的单元格的背景（蓝色= ctrl，红色=移位等）在画布上绘制。

我已经生成了我的HTML代码，但我在使用该表时遇到了问题。似乎它试图选择表格单元格而不是在单元格中着色。

以下是我所说的截图：

HTML：

<html>
  <head>
<meta charset="utf-8">
<title>Drawing Program</title>
<h1>Drawing Demonstration</h1>
<link rel = "stylesheet" type = "text/css" href = "style.css">
<script src = "draw.js"></script>
</head>
<body>
<table id = "canvas">
  <caption>Hold Ctrl (or Control) to draw in blue.
    Hold Shift to draw in red.</caption>
    <tbody id = "tablebody"></tbody>
</table>
</body>
</html>

CSS：

table{
width: 400px;
height: 400px;
border-collapse: collapse;
}

td {
width: 4px;
height: 4px;
border-collapse: collapse;
}

JavaScript的：

function createCanvas()
{
    var side = 100;
    var tbody = document.getElementById( "tablebody" );

for( var i = 0; i < side; i++) 
{
    var row = document.createElement( "tr" );

    for( var j = 0; j < side; j++)
    {
        var cell = document.createElement( "td" );
        row.appendChild( cell );
    }
    tbody.appendChild( row );
}
document.getElementById( "canvas" ).addEventListener( "mousemove", processMouseMove, false );
}

function processMouseMove( e )
{
  if( e.target.tagName.toLowerCase() == "td" )
{
    if( e.ctrlKey )
    {
        e.target.setAttribute( "class", "blue" );
    }
    if ( e.shiftKey )
    {
        e.target.setAttribute( "class", "red" );
    }
}
}
window.addEventListener( "load", createCanvas, false );

Answer 1

我建议您制作一个canvas元素并使用与表格单元格相同的像素绘制它，而不是制作一万个表格单元格。您可以使用模运算将鼠标坐标转换为像素位置。

例如，如果鼠标位于（x，y）并且每个像素的大小为4，则鼠标位于像素上方，以便：

row = x - x％4
column = y - y％4

以下代码段演示了这种方法。运行代码段时，您必须在包含画布的框架内单击，以便将鼠标焦点放在框架上。

var Paint = {
  pixel: { size: 4 },
  grid: { numRows: 100, numCols: 100 }
};

window.onload = function () {
  var canvas = document.getElementById('paintCanvas'),
      context = canvas.getContext('2d'),
      offset = getOffset(canvas, document.body),
      pixelSize = Paint.pixel.size,
      numRows = Paint.grid.numRows,
      numCols = Paint.grid.numCols,
      painting = false;
  
  canvas.width = numCols * pixelSize;
  canvas.height = numRows * pixelSize;
  
  window.onkeydown = function (event) {
    var code = event.which;
    if (code == 17 || code == 16) {
      painting = true;
      context.fillStyle = (code == 17 ? '#1b6bb5' : '#b53a31');
    }
  };
  
  window.onkeyup = function (event) {
    var code = event.which;
    if (code == 17 || code == 16) {
      painting = false;
    }
  };
  
  canvas.onmousemove = function (event) {
    if (!painting) {
      return;
    }
    event = event || window.event;
    var mouse = getMousePosition(event),
        x = mouse.x - offset.left,
        y = mouse.y - offset.top;
    x -= x % pixelSize;
    y -= y % pixelSize;
    context.fillRect(x, y, pixelSize, pixelSize);
  };
};
  
function getOffset(element, ancestor) { 
  var left = 0,
      top = 0;
  while (element != ancestor) { 
    left += element.offsetLeft;
    top += element.offsetTop;
    element = element.parentNode;
  } 
  return { left: left, top: top };
} 

function getMousePosition(event) { 
  if (event.pageX !== undefined) { 
    return { x: event.pageX, y: event.pageY };
  } 
  return { 
    x: event.clientX + document.body.scrollLeft + 
        document.documentElement.scrollLeft,
    y: event.clientY + document.body.scrollTop + 
        document.documentElement.scrollTop
  };
}

body {
  font-family: sans-serif;
}

canvas {
  border: 2px solid #ccc;
}

<p> <b>Click here to start.</b> Hold Ctrl to draw in blue, Shift to draw in red. </p>

<canvas id="paintCanvas"></canvas>

Answer 2

我会在表格前面添加一个绝对空白div位置并读取td高度和宽度，以便从鼠标移动中计算表格中的xy位置。然后做桌子魔术。

如何将表用作绘图网格

2 个答案: