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

你不能在Canvas标签中放置任何DOM元素，或者嵌入它们以便它们成为位图的一部分。 Canvas就是这样一个位图，你只能在其上下文中使用JavaScript和支持的绘图操作来绘制它。

如果您想要表格，我建议您使用常规HTML。支持画布的浏览器会忽略画布打开和关闭标记之间的任何内容。

有很多方法可以使用SVG作为包装器将DOM元素绘制到canvas元素上，但它带来了一些与安全性相关的限制（即外部引用）。

如果你想要它们，那么忽略它中的画布位。

如果你真的想在画布上绘制HTML表格，可以采取两种方式：

通过手动绘制每一行，标题，文本，单元格等来模拟表格的布局和外观。
使用上面提到的SVG方法将DOM元素转换为SVG图像，然后将其绘制到画布（如果要将表的快照保存为图像）。请在此处查看我之前的回答：render html text to bitmap using javascript without serverSide code

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

1 个答案: