单击任意位置并键入文本，然后单击它进行编辑答案

【问题标题】：Click anywhere and type text, and then edit it, by clicking on it单击任意位置并键入文本，然后单击它进行编辑
【发布时间】：2013-12-07 10:56:01
【问题描述】：

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

长话短说：

使用：
- KineticJS(Canvas)
需要：
- 单击任意位置会放置标记，当我使用键盘或平板电脑键盘键入时会添加字母。
- 点击已经存在的文本，将在此处放置标记并让我编辑该文本。
- 将来，我应该能够为该文本设置这些功能：
  - 设置颜色
  - 更改字体
  - 添加下标/上标
  - 粗体/下划线/斜体

可以在这里找到正在进行的工作：http://jsfiddle.net/66UcL/1/

代码JS：

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" />

待办事项：

在您单击的位置添加光标，而不是全文。
让您在单击文本时对其进行编辑。

编辑：

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

【问题讨论】：

你问得太多了，无法期待有用的答案。
我至少需要一些有助于我思考的东西，这样我就可以自己找到/编码答案并与他人分享。
这不是 SO 的工作方式。您应该进行自己的初步研究并尝试解决方案，然后在您尝试的解决方案中发布有关特定问题的具体问题。您的问题仅列出了一组要求。
好的，谢谢，我会编辑我的帖子，很快就会进行研究。
@JuliusR：感谢您的更新。我很想知道 <canvas> 元素是否有可能在 iOS 上接收键盘输入。请继续通知我们！

标签： canvas html5-canvas kineticjs

【解决方案1】：

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

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

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

https://github.com/nktsitas/kineticjs-editable-text

【讨论】：