如何创建动态文本并使用 KineticJS 对其进行编辑.任何可以说明的例子都会很棒

How can i create dynamic text and edit it using KineticJS. Any example to illustrate would be great

本文关键字：说明 任何可 编辑 创建 何创建 动态 文本 KineticJS      更新时间：2023-09-26

我不希望在用户输入时使用提示。相反，我希望创建 界面，例如在 MSPAINT 中用于创建或编辑文本。 以下是我目前用于创建文本的代码，它将用户输入通过 JavaScript提示符。

text = function () {
            var mousePos,
                x,
                y,
                inputText;

            ui.stage.on('mousedown', function () {
                onMousedown();
            });

            function onMousedown(event) {
                mousePos = ui.stage.getPointerPosition();
                x = Math.floor(mousePos.x / ui.scale - ui.stage.getAbsolutePosition().x / ui.scale + ui.stage.getOffset().x);
                y = Math.floor(mousePos.y / ui.scale - ui.stage.getAbsolutePosition().y / ui.scale + ui.stage.getOffset().y);
                inputText = prompt('Enter a text');
                if ($.trim(inputText).length === 0) {
                    console.log('input text is empty');
                    return;
                }
                console.log(inputText);
                text = new drc.ui.Shape.Text({
                    x: x,
                    y: y,
                    fontSize: 30,
                    text: inputText,
                    fontFamily: 'Calibri',
                    fill: 'green'
                });
                ui.mainLayer.add(text);
                ui.mainLayer.draw();
            }
        };

我还尝试使用 kineticJS 直接在画布上从头开始创建解决方案编辑。

我知道这是在重新发明轮子，但当你有空闲时间时，为什么不呢？:)

这实际上是markE提到的大多数要点，并实现了。看看：

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

您可以在按键和按下时侦听文档击键。

// handle "printable" keys by listening for keypress
$(document).on('keypress',(function(e){ ...  }));
// handle control keys like backspace by listening for keydown
$(document).on('keydown',(function(e){ ... }));

然后在描边时将每个可打印的键添加到 Kinetic.Text 对象。

您还可以在划退格键时删除最后一个字符。

下面是示例代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Prototype</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.2.min.js"></script>
<style>
body{padding:20px;}
#container{
  border:solid 1px #ccc;
  margin-top: 10px;
  width:350px;
  height:350px;
}
</style>        
<script>
$(function(){
    var stage = new Kinetic.Stage({
        container: 'container',
        width: 350,
        height: 350
    });
    var layer = new Kinetic.Layer();
    stage.add(layer);
    // this variable holds the current text
    var typedText="";
    // create a text object
    var text = new Kinetic.Text({
        x: 20,
        y: 30,
        fontSize: 30,
        text: "",
        fontFamily: 'Calibri',
        fill: 'green'
    });
    layer.add(text);
    layer.draw();

    // listen for keys
    // get the usual "printable" keys
    $(document).on('keypress',(function(e){
        // get the key
        key=e.which;
        // let keydown handle control keys 
        if(key<32){return;}
        // add the typed character
        typedText+=String.fromCharCode(e.charCode);
        text.setText(typedText);;
        layer.drawScene();
    }));

    // handle control keys like backspace
    $(document).on('keydown',(function(e){
        // get the key
        var key=event.which;
        // Let keypress handle displayable characters
        if(key>46){ return; }

        // handle the backspace 
        // (and any other control keys you want to program)
        switch(key){
              case 8: //backspace:
                if(typedText.length>0){
                    typedText=typedText.slice(0,-1);
                    text.setText(typedText);;
                    layer.drawScene();
                }
                break;
            default:
                break;
        }
    }));

}); // end $(function(){});
</script>       
</head>
<body>
    <p>Type...(and use the backspace)!</p>
    <div id="container"></div>
</body>
</html>

[ 这里是如何将基本文本编辑器添加到 html 画布的概述 ]

虽然这有效（我在几个项目中都有它），但我建议在需要基本文本编辑器时在画布上浮动 html 文本区域。

所以。。。与我更好的判断相反，这里是如何将 Canvas 变成文本编辑器的方法......

定义一些与文本相关的变量：

  • 文本（字符串）：当前文本，
  • 标签长度（数字）：制表中空格的 #，
    • 光标
  • 索引（数字）：光标在文本中的字符位置，
在

按键处理程序中侦听用户的"可打印"击键：

  • 具有数字键码的事件
  • 如果 Event.which>= 32，则键是可打印的，因此将其添加到文本中
  • 如果已将字符添加到文本中，请前进光标索引++

在按键中侦听用户的命令击键并做出相应的响应：

  • 退格键：删除文本中的最后一个字符，
    • 制表符
  • ：将空格*制表符长度附加到文本，
  • 结束：cursorIndex=theText.length，
  • 首页： 光标索引=0，
  • 左：光标索引--,
  • 右：光标索引++，
    • 删除
  • ：删除光标索引处的字符

管理游标：

  • 使用 context.measureText 获取 XY at cursorIndex in theText，
  • 前进光标索引以响应用户键入的可打印字符，
  • 重新定位光标索引以响应用户键入的命令键，
  • 使用 requestAnimationFrame 在 cursorIndex 处绘制闪烁的光标，
相关文章：