Canvas 单击任意位置并键入文本，然后通过单击对其进行编辑

我正在使用kineticJS框架，我想制作一个工具，它可以让你点击任何地方并键入文本，如果你点击已经存在的文本，它会让你实时编辑文本。（与word、TextBox中的功能相同）。此外，我还需要使该文本下标/上标等，在未来。我不知道如何使用键盘实时编辑文本。我知道kineticjs中有文本元素，但这对我没有帮助，因为据我所知，您无法实时编辑它（当单击键盘按钮时）。这也适用于平板电脑设备。任何帮助都将不胜感激

长话短说：

• 使用：
  • KineticJS（帆布）
• 需要：
  • 单击任意位置放置标记，当我使用键盘或平板电脑键盘打字时，该标记会添加字母
  • 单击已经存在的文本，将在那里放置标记，让我编辑该文本
  • 将来，我应该能够为该文本设置以下功能：
    • 定色
    • 更改字体
    • 添加下标/上标
    • 粗体/下划线/斜体

可在此处找到正在进行的工作：

CodeJS：

console.clear();
var containerID = "kiCanvas";
var stage = new Kinetic.Stage({
    container: containerID,
    width: 600,
    height: 500,
});
var layer = new Kinetic.Layer();
stage.add(layer);
$('#drawText').on('click', function () {
    $('canvas').on('click', drawText);
});

function drawText(e) {
    var newText = new Kinetic.Text({
        text: "Text",
        x: e.clientX,
        y: e.clientY,
        fill: 'red',
    });
    layer.add(newText);
    layer.draw();
}

代码HTML：

<button id="drawText">AddTextToCanvas</button>
<div id="kiCanvas" />

AddTextToCanvas

待办事项：

• 在单击的位置添加光标，而不是全文
• 允许您在单击文本时编辑文本

编辑：

---

我已经找到了一种方法，通过输入，不透明度为0，并且具有event onKeyUp，可以更新画布中的文本对象，我将上传示例，当它准备好公开时。

我制作了一个类似的kineticJS工具插件，允许直接在画布上编辑文本

它可以满足您的要求，但不包括附加功能（下标、下划线等）

看一看，这样您就可以从自己的工具中获得灵感或按原样使用它：

---

你问得太多了，希望得到一个有用的答案。我至少需要一些有助于我思考的东西，这样我就可以自己找到/编写答案并与其他人分享。这是不可行的。您需要自己进行初步研究并尝试解决方案，然后在您尝试的解决方案中发布有关特定问题的特定问题。你的问题只列出了一组要求。好的，谢谢。我会很快编辑我的帖子，并进行研究。@JuliusR:谢谢你的更新。我很想知道

元素是否有可能在iOS上接收键盘输入。请继续通知我们！