I am trying to create a table with ~10,000 cells and turn this into a canvas on which the user can draw with mouse movements.
我正在尝试创建一个包含~10,000个单元格的表格并将其转换为画布,用户可以使用鼠标移动绘制该画布。
I would like to be able to draw on the canvas by highlighting the background of cells the mouse moves over when holding certain keys (blue = ctrl, red = shift, etc).
我希望能够通过突出显示鼠标在按住某些键时移动的单元格的背景(蓝色= ctrl,红色=移位等)在画布上绘制。
I have generated my HTML code but I am having trouble with the table. It seems that it is trying to select table cells instead of coloring in the cells.
我已经生成了我的HTML代码,但我在使用该表时遇到了问题。似乎它试图选择表格单元格而不是在单元格中着色。
Here is a screenshot of what I am talking about:
这是我正在谈论的截图:
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 );
2 个解决方案
#1
2
Instead of making ten thousand table cells, I recommend that you make a canvas element and paint it with pixels that are the size of table cells. You can convert the mouse coordinates into pixel positions with modulo arithmetic.
我建议您制作一个canvas元素,并使用与表格单元格相同的像素绘制它,而不是制作一万个表格单元格。您可以使用模运算将鼠标坐标转换为像素位置。
For example, if the mouse is at (x, y) and each pixel has size 4, the mouse is over the pixel such that:
例如,如果鼠标位于(x,y)且每个像素的大小为4,则鼠标位于像素上方,以便:
-
row = x - x % 4
row = x - x%4
-
column = y - y % 4
column = y - y%4
The following snippet demonstrates this approach. When you run the snippet, you'll have to click inside the frame containing the canvas in order to give mouse focus to the frame.
以下代码段演示了这种方法。运行代码段时,您必须在包含画布的框架内单击,以便将鼠标焦点置于框架上。
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>#2
0
I would add a blank div position absolute in front of the table and read the td height and width to calculate the xy position in the table from the mouse move. and then do the table magic.
我会在表格前面添加一个绝对空白div位置并读取td高度和宽度,以便从鼠标移动中计算表格中的xy位置。然后做桌子魔术。
#1
2
Instead of making ten thousand table cells, I recommend that you make a canvas element and paint it with pixels that are the size of table cells. You can convert the mouse coordinates into pixel positions with modulo arithmetic.
我建议您制作一个canvas元素,并使用与表格单元格相同的像素绘制它,而不是制作一万个表格单元格。您可以使用模运算将鼠标坐标转换为像素位置。
For example, if the mouse is at (x, y) and each pixel has size 4, the mouse is over the pixel such that:
例如,如果鼠标位于(x,y)且每个像素的大小为4,则鼠标位于像素上方,以便:
-
row = x - x % 4
row = x - x%4
-
column = y - y % 4
column = y - y%4
The following snippet demonstrates this approach. When you run the snippet, you'll have to click inside the frame containing the canvas in order to give mouse focus to the frame.
以下代码段演示了这种方法。运行代码段时,您必须在包含画布的框架内单击,以便将鼠标焦点置于框架上。
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>#2
0
I would add a blank div position absolute in front of the table and read the td height and width to calculate the xy position in the table from the mouse move. and then do the table magic.
我会在表格前面添加一个绝对空白div位置并读取td高度和宽度,以便从鼠标移动中计算表格中的xy位置。然后做桌子魔术。