我正在尝试创建一个可以调整大小和移动的表

Question

我正在尝试创建一个可以在画布上进行编辑，调整大小和移动的表格。 我使用以下代码在画布上创建表：

var canvas = document.getElementById("drawingCanvas");
var context = canvas.getContext("2d"),
    setColumn = document.getElementById("column"),
    setRow = document.getElementById("row"),
    btnGen = document.getElementById("btnGen"),
    copy = document.getElementById("copy"),
    nOfColumns = -1,
    nOfRows = -1;

function generateTable(e) {
    var a = e.pageX - canvas.offsetLeft;
    var b = e.pageY - canvas.offsetRight;
    var newTable = document.getElementById("mytable");
    tBody = newTable.createTBody();
    nOfColumns = parseInt(setColumn.value, 10);
    nOfRows = parseInt(setRow.value, 10);
    context.fillText(appendRows(tBody), canMouseX, canMouseY);
}

function createTable() {
    canvas.onmousedown = generateTable;
}

function appendColumns(tElement, count) {
    var cell = null,
        indexOfRow = [].indexOf.call(tElement.parentNode.rows, tElement) + 1,
        indexOfColumn = -1;
    count = count || nOfColumns;
    for (var i = 0; i < count; i++) {
        cell = tElement.insertCell(i);
        indexOfColumn = [].indexOf.call(tElement.cells, cell) + 1;
        var element = document.createElement("input");
        element.type = "text";
        cell.appendChild(element);
    }
}

function appendRows(tElement, count) {
    var row = null;
    count = count || nOfRows;
    for (var i = 0; i < count; i++) {
        row = tElement.insertRow(i);
        appendColumns(row);
        var element = document.createElement("input");
        element.type = "text";
        row.appendChild(element);
    }
}

当我在画布上单击时，将在画布下而不是画布上生成表，并且将创建一个额外的行和列。 甚至我也想调整大小并将上面生成的表格移动到画布上。 是否有可能这样做。

我该如何实现？

Answer 1

您不能将任何DOM元素放置在Canvas标签内，也不能为此嵌入它们，以便它们成为位图的一部分。 Canvas只是一个位图，您只能使用JavaScript及其上下文支持的绘制操作来绘制该位图。

如果需要表，建议您使用常规HTML。 支持canvas的浏览器会忽略canvas的open和close标签之间的任何内容。

有一些方法可以使用SVG作为包装器将DOM元素绘制到画布元素上，但是它具有与安全性相关的某些限制（例如，外部引用）。

如果只使用table，那么他们可以忽略其中的canvas位。

如果您真的想在画布上绘制HTML表格，则可以通过两种方式进行：

1. 通过手动绘制每行，标题，文本，单元格等来模拟表的布局和外观。
2. 使用上述SVG方法将DOM元素转换为SVG图像，然后将其绘制到画布上（以防您要将表的快照保存为图像）。 请在此处查看有关此问题的较早答案： 使用javascript将html文本渲染为位图，而无需使用服务器端代码