-1

我不希望使用提示进行用户输入。相反，我希望创建界面，例如在 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();

            }
        };
4

2 回答 2

2

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

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

实际上，markE 提到的大部分要点都已实施。看一下：

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

于 2014-01-15T08:26:47.150 回答
1

您可以在 keypress 和 keydown 上收听文档击键。

// 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 文本区域。

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

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

  • theText（字符串）：当前文本，
  • tabLength（数字）：标签中的空格数，
  • cursorIndex（数字）：光标在文本中的字符位置，

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

  • Event.which 有数字键码
  • 如果 Event.which >= 32，则 key 是可打印的，所以将它添加到 theText
  • 如果文本已添加字符，则前进 cursorIndex++

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

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

管理游标：

  • 使用 context.measureText 获取 theText 中 cursorIndex 处的 XY，
  • 响应用户输入的可打印字符，推进 cursorIndex，
  • 重新定位 cursorIndex 以响应用户输入的命令键，
  • 使用 requestAnimationFrame 在 cursorIndex 处绘制闪烁的光标，
于 2013-11-08T17:34:14.380 回答