Предварительно отформатированный текст на элементе Canvas

Question

У меня проблемы с отражением новой строки и нескольких пробелов, введенных пользователем в текстовой области на элемент canvas. Я не могу найти, чтобы конвертировать текст в предварительно отформатированный.

По сути, мой сайт работает так, что у меня есть текстовое поле, в которое пользователь вводит текст в текстовой области. Этот текст затем передается элементу canvas.

Я предоставил образец моего кода. По существу, когда пользователь вводит текстовую область, он передается функции с именем inputtextgo1. Вводимый текст 1 берет текст из текстовой области и воспроизводит текст на элементе canvas (Section1 canvas).

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

Если вы также хотите позаботиться о новых строках и так далее, вы должны конвертировать их вручную.

Холст изначально не примет их. Я обновил код 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>