Question

var container = document.getElementById("container");
var c = document.getElementById("mycanvas");
c.width = window.innerWidth * 0.75;
c.height = window.innerHeight * 0.75;
//reference to 2d context
var ctx = c.getContext("2d");

//------------------------------- Text Box -----------------------------------
var btnTxtbox = document.createElement("BUTTON"); 
var tTxtbox = document.createTextNode("Text Box");
btnTxtbox.appendChild(tTxtbox);
document.body.insertBefore(btnTxtbox, c);

font = '14px sans-serif';
hasInput = false;

var imagePaper = new Image();
imagePaper.src = "https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg";

drawbackground(c, ctx);

function drawbackground(c, ctx){
    ctx.drawImage(imagePaper,0, 0, c.width,c.height);
}

btnTxtbox.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 = 130 + 'px';
    input.style.top = 20 + '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.stroke();
    ctx.strokeText(txt, x - 4, y - 4);
}

<canvas id="mycanvas" style="border:1px solid red;"></canvas>

我试图将动态文本框拖放到其中具有背景图像的画布上。我能够创建一个文本框，单击该按钮即可调用它。文本是动态的，即内容是可编辑的。我坚持两件事：

1）如何在画布中拖动文本框，以便可以将其放置在图像上的所需位置。我提到了这个小提琴 http://jsfiddle.net/m1erickson/9xAGa/

但仍然无法使其对我有用。

2）完成书写后，如何将光标移出文本框？我已经编写了用于检查键盘Enter键的代码-if（keyCode === 13），但仍然无法使其正常工作。

3）完全有可能有多个按钮，并且每个按钮都对应于调用不同的拖动山墙形状，例如此文本框？（尚未尝试过，但这是我接下来要针对的目标）

链接到我的小提琴https://jsfiddle.net/hy35gn1u/5/

我真的很困在这一点上，非常感谢您的帮助。

无法在画布内拖放动态文本框

0 个答案: