0

我在将用户在文本区域中输入的新行和多个空格反映到画布元素上时遇到问题。我似乎找不到将文本转换为预格式化的方法。

基本上我的网站的工作方式是我有一个文本框，用户可以在其中输入文本区域内的文本。然后将此文本传递给 canvas 元素。

我提供了我的代码示例。本质上，当用户在文本区域内键入时，它会传递给一个名为 inputtextgo1 的函数。输入文本 1 从文本区域获取文本并将文本复制到画布元素（Section1 画布）上。

HTML： 

        <canvas id="Section1Canvas" width="500" height="95" >Your browser does not support the HTML5 canvas tag.</canvas>
    <textarea class="bags"  id="bag1areatext" onkeyup="inputtextgo1()" name="Text">Sample Text</textarea> <br/>

Javascript：

var canvas = document.getElementById('Section1Canvas'),
context = canvas.getContext('2d');

section1backgroundimage.onload = function(){
    context.drawImage(section1backgroundimage, 0, 0);
    context.fillText("Sample Text",250,50);
    }

section1backgroundimage.src = 'images/Selection/Bag/Section1/LightBlue.jpg';

context.font="34px " + selfonttype;
context.textAlign="center";
context.fillStyle = seltextcolor;


    function inputtextgo1() {
    var y = document.getElementById("bag1areatext").value;
    context.clearRect(0, 0, 500, 95)
    context.font="34px " + selfonttype;
    context.fillStyle = seltextcolor;
    context.fillText(y,250,50);

}

selfontype 是用户选择的字体，section1backgroundimage 是用于画布背景的图像文件，seltextcolor 是用户选择的字体颜色。

我希望我创建的画布元素能够反映用户在文本区域中输入的新行和空格。此外，我希望将文本换行（如果文本接触画布边缘以进入下一行）。

这只是我用来更新函数的代码片段。如果您需要其他代码来帮助解决问题，请告诉我。

非常感谢您的帮助。

4

2 回答 2

3

如果您还想处理新行等，则必须手动转换它们。

Canvas 本身不会接受它们。我更新了 MarkE 的代码来管理它们：

function wrapText(context, text, x, y, maxWidth, lineHeight) {
    //manage carriage return
    text = text.replace(/(\r\n|\n\r|\r|\n)/g, "\n");
    //manage tabulation
    text = text.replace(/(\t)/g, "    "); // I use 4 spaces for tabulation, but you can use anything you want
    //array of lines
    var sections = text.split("\n"); 

     for (s = 0, len = sections.length; s < len; s++) {
          var words = sections[s].split(' ');
          var line = '';

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

         //new line for new section of the text
         y += lineHeight;
      }
}

      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var maxWidth = 350;
      var lineHeight = 25;
      var x = (canvas.width - maxWidth) / 2;
      var y = 60;
      var text = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. \nLorem Ipsum has been the industry's standard dummy text ever since the 1500s.";

      context.font = '14pt Verdana';
      context.fillStyle = '#000';

      wrapText(context, text, x, y, maxWidth, lineHeight);

我已经更新了小提琴：http: //jsfiddle.net/PFBXM/4/

于 2013-03-12T10:24:35.723 回答
0

这是在画布上绘制环绕文本的方法。

代码的重点是使用 context.measureText() 来测试每个新词是否会超出画布的右边框。

如果要直接绘制到边框，可以将 maxWidth 设置为画布宽度。

这是代码和小提琴：http: //jsfiddle.net/m1erickson/PFBXM/

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      #myCanvas {
        border: 1px solid #9C9898;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      function wrapText(context, text, x, y, maxWidth, lineHeight) {
        var words = text.split(' ');
        var line = '';

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

      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var maxWidth = 400;
      var lineHeight = 25;
      var x = (canvas.width - maxWidth) / 2;
      var y = 60;
      var text = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.";

      context.font = '14pt Verdana';
      context.fillStyle = '#000';

      wrapText(context, text, x, y, maxWidth, lineHeight);
    </script>
  </body>
</html>
于 2013-03-12T03:32:39.097 回答