在 svg 或画布中将文本环绕成圆形 [英] Wrap text to a circle shape in svg or canvas

查看：34 发布时间：2021/12/17 18:15:18 svg html5-canvas

本文介绍了在 svg 或画布中将文本环绕成圆形的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

将文本拟合到网站上的圆形，使其随圆形的曲线而不是矩形边界框流动，有什么好的解决方案?

这是我想要实现的目标:页面上有许多黑色圆圈(固定大小)，每个圆圈旁边都有一个文本区域.当文本输入到 textarea 时，它会出现在黑色圆圈中，它以两个轴为中心.如果输入的文本太多，该行变得比圆的半径长，减去指定的边距值，该行将像您期望的常规换行一样中断，文本块仍居中.当然，靠近顶部或底部的线条会比靠近中间的线条短.

文本将具有固定大小，当圆圈被文本填充时，不应显示额外的内容(如溢出隐藏).

带有文字的黑色圆圈实际上是气泡，旨在打印并粘在海报上.

是否有任何出色的 SVG/Canvas 库支持这一点，还是我必须从头开始设计我们的方法?

解决方案

有一个提议的 CSS 功能称为排除"，可以在定义的区域内流动文本:

<html lang="zh-cn"><头><风格>身体{背景颜色:象牙色；填充:20px；}画布{边框:1px纯红色；}</风格><script src="http://code.jquery.com/jquery-1.9.1.js"></script><脚本>$(函数(){var canvas=document.getElementById("canvas");var ctx=canvas.getContext("2d");var text = "'那是圣诞节的前一天晚上，整个房子里，没有一个生物在动，甚至没有一只老鼠.圣诞节那天的故事就这样开始了";var font="12pt verdana";var textHeight=15;var lineHeight=textHeight+5;var 行=[];var cx=150;变量 cy=150;无功r=100；initLines();wrapText();ctx.beginPath();ctx.arc(cx,cy,r,0,Math.PI*2,false);ctx.closePath();ctx.strokeStyle="天蓝色";ctx.lineWidth=2;ctx.stroke();//预先计算圆的每个水平弦的宽度//这是文本允许的最大宽度函数 initLines(){for(var y=r*.90; y>-r; y-=lineHeight){var h=Math.abs(r-y);if(y-lineHeight<0){ h+=20;}var length=2*Math.sqrt(h*(2*r-h));if(长度&&长度>10){线.推({ y:y，maxLength:长度})；}}}//在圆的每一行上绘制文本函数 wrapText(){变量 i=0;var words=text.split(" ");while(i0){线=线[i++]；var lineData=calcAllowableWords(line.maxLength,words);ctx.fillText(lineData.text, cx-lineData.width/2, cy-line.y+textHeight);word.splice(0,lineData.count);};}//计算一行中可以容纳多少个单词函数 calcAllowableWords(maxWidth,words){var wordCount=0;var testLine="";无功间隔="；var fitWidth=0;var fitText="";ctx.font=字体；for(var i=0;i最大宽度){返回({计数:我，宽度:拟合宽度，文本:拟合文本});}适合宽度=宽度；安装文本=测试线；}}});//结束 $(function(){});<身体><p>文本包裹并夹在圆圈内</p><canvas id="canvas" width=300 height=300></canvas>

What would be a good solution for fitting text to a circle on a website, so it flows with the curves of the circle, instead of a rectangular bounding box?

Here's what I'm trying to achieve: There are a number of black circles (of a fixed size) on a page, with a textarea next to each of them. When text is entered into the textarea, it appears in the black circle, where it is centered on both axes. If so much text is entered that line becomes longer than the radius of the circle, minus a specified value for margin, the line will break like you would expect from regular wrapping, with the block of text still being centered. Lines nearer the top or bottom will, of course, be shorter than the ones near the middle.

The text will have a fixed size and when the circle is filled with text, the extra content should not be shown (like overflow hidden).

The black circles with the text are really speech bubbles, which are meant to be printed and glued onto a poster.

Do any of the fantastic SVG/Canvas libraries support this or will I have to figure our a method from scratch?

解决方案

There is a proposed CSS feature call "exclusions" that would make it possible to flow text inside defined areas: http://www.w3.org/TR/css3-exclusions/

This means that SVG and Canvas paths would likely be defined as containers and text would flow/wrap inside the containers.

I did say "proposed" -- it's a ways off from being a reality in browsers.

However...

You can fairly easily wrap text inside a circle using html canvas

The width available to display text on any line changes as you move down the circle.

Here’s how to determine the maximum available width of any horizontal line on a circle

// var r is the radius of the circle
// var h is the distance from the top of the circle to the horizontal line you’ll put text on

var maxWidth=2*Math.sqrt(h*(2*r-h));

You fit text to the line by measuring the width of text—adding one word at a time, until you’ve used up all the available width of that line.

Here’s how to use canvas to measure any text using the current context.font:

var width=ctx.measureText("This is some test text.").width;

The rest is just adding text to each line up to the maximum line width and then starting a new line.

If you prefer SVG, you can do similar in SVG using the element.getComputedTextLength method for text metrics.

Here is code and a Fiddle: http://jsfiddle.net/m1erickson/upq6L/

<!doctype html>
<html lang="en">
<head>

  <style>
      body{ background-color: ivory; padding:20px; }
      canvas{ border:1px solid red;}
  </style>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>

  <script>

  $(function() {

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

      var text = "'Twas the night before Christmas, when all through the house,  Not a creature was stirring, not even a mouse.  And so begins the story of the day of Christmas";
      var font="12pt verdana";
      var textHeight=15;
      var lineHeight=textHeight+5;
      var lines=[];

      var cx=150;
      var cy=150;
      var r=100;

      initLines();

      wrapText();

      ctx.beginPath();
      ctx.arc(cx,cy,r,0,Math.PI*2,false);
      ctx.closePath();
      ctx.strokeStyle="skyblue";
      ctx.lineWidth=2;
      ctx.stroke();


      // pre-calculate width of each horizontal chord of the circle
      // This is the max width allowed for text

      function initLines(){

          for(var y=r*.90; y>-r; y-=lineHeight){

              var h=Math.abs(r-y);

              if(y-lineHeight<0){ h+=20; }

              var length=2*Math.sqrt(h*(2*r-h));

              if(length && length>10){
                  lines.push({ y:y, maxLength:length });
              }

          }
      }


      // draw text on each line of the circle

      function wrapText(){

          var i=0;
          var words=text.split(" ");

          while(i<lines.length && words.length>0){

              line=lines[i++];

              var lineData=calcAllowableWords(line.maxLength,words);

              ctx.fillText(lineData.text, cx-lineData.width/2, cy-line.y+textHeight);

              words.splice(0,lineData.count);
          };

      }


      // calculate how many words will fit on a line

      function calcAllowableWords(maxWidth,words){

          var wordCount=0;
          var testLine="";
          var spacer="";
          var fittedWidth=0;
          var fittedText="";

          ctx.font=font;

          for(var i=0;i<words.length; i++){

              testLine+=spacer+words[i];
              spacer=" ";

              var width=ctx.measureText(testLine).width;

              if(width>maxWidth){ 
                  return({
                      count:i, 
                      width:fittedWidth, 
                      text:fittedText
                  }); 
              }

              fittedWidth=width;
              fittedText=testLine;

          }

      }


  });   // end $(function(){});

  </script>
</head>
<body>
    <p>Text wrapped and clipped inside a circle</p>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

这篇关于在 svg 或画布中将文本环绕成圆形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

在 svg 或画布中将文本环绕成圆形 [英] Wrap text to a circle shape in svg or canvas

问题描述

相关文章

其他开发最新文章

热门教程

热门工具

登录关闭

在 svg 或画布中将文本环绕成圆形 [英] Wrap text to a circle shape in svg or canvas

问题描述

相关文章

其他开发最新文章

热门教程

热门工具

登录 关闭

登录关闭