在用户键入时封装文本 | 在用户键入时封装文本

本文介绍了在用户键入时封装文本的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个用户输入的文本区域。当用户在文本区域字段中输入时，该文本将在画布上呈现。所以它逐字母出现。我有麻烦使文本包装工作正常，因为它应该发生在用户输入时。

I have a text area where a user types in. That text is rendered on a canvas while the user is typing in the text area field. so it appears letter by letter. I'm having trouble making the text wrapping work properly since it should happen while the user is typing.

我有一个函数drawtext（）;这是每次击键调用。我遇到的问题是，当在下一行上绘制文本时，上一行消失。我知道这是因为我在我的for循环中调用clearRect。然而，如果我不这样做，那么我的文本保持彼此呈现。我如何解决这个问题？

I have a function drawtext(); that is called on every keystroke. The problem I'm having is that the previous line disappears when the text is drawn on the next line. I know that is because I'm calling a clearRect in my for loop. However if I don't do that then my text keeps rendering over each other. How can I solve this?

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

}

推荐答案

糟糕 - 我的答案是重复的！什么@Will安德森说（我正确地打印了我的答案）

Oops--my answer is a duplicate! What @Will Anderson says (I was typing my answer when he posted correctly)

在你的for循环之前清除画布然后重绘所有

Clear the canvas before your for-loop and then redraw all lines of text again.

示例代码和演示：

<!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>

这篇关于在用户键入时封装文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！