Question

我不希望使用提示输入用户。相反，我想创造用于创建或编辑文本的界面，例如在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();

            }
        };

Answer 1

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

我知道它正在重新发明轮子，但是当你有空闲时，为什么不呢？：）

这实际上是markE提到并实施的大部分要点。看看：

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

Answer 2

您可以在按键和按键上收听文档按键。

// 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 textarea。

所以...反对我更好的判断，这里是如何将画布变成文本编辑器......

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

theText（string）：当前文字
tabLength（number）：选项卡中的空格数
cursorIndex（number）：光标的字符位置，带有文本，

在按键处理程序中侦听用户的“可打印”按键：

Event.which有数字键码
如果Event.which＆gt; = 32，则键是可打印的，因此将其添加到文本
如果已将字符添加到文本，请提前cursorIndex ++

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

退格：删除文本中的最后一个字符，
Tab：将空格* tabLength附加到文本，
结束：cursorIndex = theText.length，
主页：cursorIndex = 0，
左：cursorIndex - ，
右：cursorIndex ++，
删除：删除cursorIndex

管理光标：

使用context.measureText获取文本中的cursorIndex处的XY，
推进cursorIndex以响应用户输入可打印字符
重新定位cursorIndex以响应用户输入的命令键
使用requestAnimationFrame

如何使用KineticJS创建动态文本并进行编辑。任何举例说明都会很棒

2 个答案: