Question

将文本拟合到网站上的圆圈会有什么好处，因此它会与圆形曲线一起流动，而不是矩形边界框？

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

文本将具有固定大小，当圆圈填充文本时，不应显示额外内容（如隐藏溢出）。

带有文字的黑色圆圈实际上是气泡，用于打印并粘贴在海报上。

任何出色的SVG / Canvas库都支持这个吗？还是我必须从头开始计算我们的方法？

Answer 1

建议的CSS功能调用“排除”可以使文本在定义的区域内流动：http://www.w3.org/TR/css3-exclusions/

这意味着SVG和Canvas路径可能被定义为容器，文本将在容器内流动/包装。

我确实说过“提议” - 这是在浏览器中实现的一种方式。

...然而

您可以使用html canvas

轻松地将文字包装在圆圈内

enter image description here

当您沿着圆圈向下移动时，任何行上显示文字的宽度都会发生变化。

以下是如何确定圆上任何水平线的最大可用宽度

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

通过测量文本的宽度（一次添加一个单词，直到您已用完该行的所有可用宽度），使文本适合该行。

以下是如何使用canvas来使用当前context.font：

来测量任何文本

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

其余的只是在每行上添加文本，直到最大线宽，然后开始换行。

如果你更喜欢SVG，你可以使用element.getComputedTextLength方法在SVG中做类似的文本度量。

这是代码和小提琴：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或canvas中将文本换行为圆形

1 个答案: