我正在尝试在画布上编辑文本

Question

我想通过在其中显示任何输入框或textarea来编辑画布上的文本.我已经尝试了,我得到的是当我们在输入框中键入任何文本时,在单击画布后,输入中的文本将显示出来.但我不想这样.我希望输入bor或textarea嵌入到画布上,以便我们可以在画布上编辑文本.让我开心.

Answer 1

你不能.Canvas是一个简单的位图,不支持嵌入DOM元素(例如输入).

您需要通过键入来"伪造"输入并使用fillText上下文在画布上的文本中绘制.

例如,您可以在需要输入时将输入元素放在画布顶部.完成后,提取输入值并将其绘制到画布上.

这是一个在线示例.

单击画布上的任意位置

点击输入:

var canvas = document.getElementById('myCanvas'),
    ctx = canvas.getContext('2d'),
    font = '14px sans-serif',
    hasInput = false;

canvas.onclick = function(e) {
    if (hasInput) return;
    addInput(e.clientX, e.clientY);
}

动态添加输入框的功能:

function addInput(x, y) {

    var input = document.createElement('input');

    input.type = 'text';
    input.style.position = 'fixed';
    input.style.left = (x - 4) + 'px';
    input.style.top = (y - 4) + 'px';

    input.onkeydown = handleEnter;

    document.body.appendChild(input);

    input.focus();

    hasInput = true;
}

输入框的键处理程序:

function handleEnter(e) {
    var keyCode = e.keyCode;
    if (keyCode === 13) {
        drawText(this.value, parseInt(this.style.left, 10), parseInt(this.style.top, 10));
        document.body.removeChild(this);
        hasInput = false;
    }
}

将文本绘制到画布上:

function drawText(txt, x, y) {
    ctx.textBaseline = 'top';
    ctx.textAlign = 'left';
    ctx.font = font;
    ctx.fillText(txt, x - 4, y - 4);
}

设置输入框的样式,使其更好地融合.您可以使用textarea等等.

注意:如果您想稍后编辑文本,则需要在内部跟踪文本/位置.

希望这可以帮助.