Question

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

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

我提供了我的代码示例。实质上，当用户在文本区域内键入时，它将被传递给名为inputtextgo1的函数。输入文本1从文本区域获取文本并将文本再现到canvas元素（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是用户选择的字体颜色。

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

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

非常感谢你的帮助。

Answer 1

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

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/

Answer 2

以下是在画布上绘制包装文字的方法。

代码的重点是使用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>

Canvas元素上的预先格式化文本

2 个答案: