用户输入时换行答案

【问题标题】：wrap text while user is typing用户输入时换行
【发布时间】：2014-04-12 17:23:57
【问题描述】：

我有一个用户输入的文本区域。当用户在文本区域字段中输入时，该文本呈现在画布上。所以它一个字母一个字母地出现。我无法使文本换行正常工作，因为它应该在用户键入时发生。

我有一个函数 drawtext();每次击键都会调用它。我遇到的问题是在下一行绘制文本时上一行消失了。我知道那是因为我在 for 循环中调用了 clearRect 。但是，如果我不这样做，那么我的文本会一直相互渲染。我该如何解决这个问题？

function drawText () {

var maxWidth = 500;
var textAreaString = $('textarea').val()+' ';
var theCanvas = document.getElementById("myCanvas");
var ctx = theCanvas.getContext('2d');
ctx.fillStyle = colors[currentBackground];
ctx.fillRect(0,0,598,335);
ctx.font = "50px Interstate";
ctx.textAlign = 'center';

var x = 300;
var y = 75;
var lineHeight = 50;
var words = textAreaString.split(' ');
var line = '';

for(var n = 0; n < words.length; n++) {
    var testLine = line + words[n] + ' ';
    var metrics = ctx.measureText(testLine);
    ctx.clearRect(0,0,598,335);

    ctx.fillStyle = '#ffffff';
    var testWidth = metrics.width;

    if (testWidth > maxWidth && n > 0) {
        ctx.fillText(line, x, y);
        line = words[n] + ' ';
        y += lineHeight;
    } else {
        ctx.fillText(line, x, y);
        line = testLine;
    }
}

}

【问题讨论】：

标签： javascript canvas

【解决方案1】：

糟糕——我的答案是重复的！ @Will Anderson 说了什么（当他正确发布时我正在输入我的答案）

在 for 循环之前清除画布，然后重新绘制所有文本行。

示例代码和演示：http://jsfiddle.net/m1erickson/7d5bs/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>
<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    var $text=document.getElementById("sourceText");
    $text.onkeyup=function(e){
        ctx.clearRect(0,0,canvas.width,canvas.height);
        wrapText(ctx,$text.value,20,60,100,24,"verdana");
    }

    function wrapText(context, text, x, y, maxWidth, fontSize, fontFace){
      var words = text.split(' ');
      var line = '';
      var lineHeight=fontSize;

      context.font=fontSize+" "+fontFace;

      for(var n = 0; n < words.length; n++) {
        var testLine = line + words[n] + ' ';
        var metrics = context.measureText(testLine);
        var testWidth = metrics.width;
        if(testWidth > maxWidth) {
          context.fillText(line, x, y);
          line = words[n] + ' ';
          y += lineHeight;
        }
        else {
          line = testLine;
        }
      }
      context.fillText(line, x, y);
      return(y);
    }

}); // end $(function(){});
</script>
</head>
<body>
    <h4>Type text to wrap into canvas.</h4>
    <input id=sourceText type=text><br>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

【讨论】：

接受您的回答，因为我的context.fillText(line, x, y);也放错了。感谢您的代码，我能够修复它。

【解决方案2】：

将此行移出for 循环。您在绘制每一行之前清除画布，因此循环结束时只有最后一行可见。

ctx.clearRect(0,0,598,335);

【讨论】：