Question

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

长话短说：

使用：
- KineticJS（画布）
需要：
- 点击任意位置标记，当我使用键盘或平板电脑键盘输入时会添加字母。
- 点击已有的文字，将标记放在那里，让我编辑该文字。
- 将来，我应该能够将这些功能设置为该文本：
  - 设置颜色
  - 更改字体
  - 添加下标/上标
  - 粗体/下划线/斜体

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

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();
}

CodeHTML：

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

TODO：

将光标添加到您单击的位置，而不是全文。
当您点击文字时，可以编辑文字。

编辑：

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

Answer 1

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

它可以满足您的需求，但不包含其他功能（下标，下划线等）。

看看你可以从自己的工具中获取灵感或按原样使用它：

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

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

1 个答案: