【教你】如现圆形何实文本？😍

珑墨
1,596 阅读4分钟

jym好！我是珑墨

在本文中，我将分享从HTML文本元素生成圆形文本的CSS和JS代码。此技术为每个字母创建一个 span 元素并稍微旋转它。你可以通过调整字体大小和圆半径来生成圆形文本。

圆形文本代码

让我们分解一下使用一点JS和CSS创建弯曲文本或圆形文本的步骤。

圆形文本 HTML 代码

<div>
  <fieldset>
    <label>Text:</label>
<input type="text" class="text" value="CURVED TEXT">
    <label>Radius:</label>
<input class="radius" type="range" min="100" max="1000" value="500">
    </fieldset>
</div>
<div class="curved-text">CURVED TEXT</div>
<br/>
<footer>
Check out MockoFun Online: <a href="https://www.mockofun.com/tutorials/curved-text-generator/">Curved Text Generator</a>
</footer>

HTML代码非常简单。该元素实际上是唯一重要的元素，因为这是我们编写圆形文本的地方。div.curved-text 圆圈文本 另一个元素仅包含曲线文本的配置选项：div

  • 用于输入弯曲文本内容的输入文本
  • 用于调整圆圈文本半径的半径滑块

圆形文本 CSS 代码

:root{
  background:black;
  color:white;
  font-family:monospace;
  overflow:hidden;
}
footer{
  text-align:center;
  position:absolute;
  bottom:0;
  padding:10px;
}
a{
  font-weight:bold;
  color:orange;
}

.curved-text{
  position:relative;
  display:inline-block;
  margin:0 auto;
  font-size:100px;
}

.curved-text span{
  min-width:0.5em;
  text-align:center;
  padding:0;
  margin:0;
}

为了创建圆形文本效果，我们只使用两个 CSS 类：

  • .curved-text：用于弯曲圆文本将驻留的包装器元素的 CSS 类
  • .curved-text span：用于构成圆形文本的每个字母的 CSS 类

圆形文本 js 代码

import jquery from "https://cdn.skypack.dev/jquery@~3.5.1";
let $= jquery
function updateCurvedText($curvedText, radius) {
  $curvedText.css("min-width", "initial");
  $curvedText.css("min-height", "initial");
  let w = $curvedText.width(),
    h = $curvedText.height();
  $curvedText.css("min-width", w + "px");
  $curvedText.css("min-height", h + "px");
  let text = $curvedText.text();
  let html = "";

  Array.from(text).forEach(function (letter) {
    html += `<span>${letter}</span>`;
  });
  $curvedText.html(html);

  let $letters = $curvedText.find("span");
  $letters.css({
    position: "absolute",
    height:`${radius}px`,
    // backgroundColor:"orange",
    transformOrigin:"bottom center"
  });
  
  let circleLength = 2 * Math.PI * radius;
  let angleRad = w/(2*radius);
  let angle = 2 * angleRad * 180/Math.PI/text.length;
  
  $letters.each(function(idx,el){
    $(el).css({
        transform:`translate(${w/2}px,0px) rotate(${idx * angle - text.length*angle/2}deg)`
    })
  });
}

let $curvedText = $(".curved-text");
updateCurvedText($curvedText,500);

function settingsChanged(){
  $curvedText.text($(".text").val());
  updateCurvedText($curvedText,$(".radius").val());
}

$(".radius").on("input change",settingsChanged);
$(".text").on("input change",settingsChanged);

js 是圆圈文本的实际魔力发生的地方。

首先，我们导入 jQuery 库。您可能可以在不使用jQuery的情况下逃脱，但是在这种情况下，我只是发现操作圆形文本设置的HTML元素很方便。

该函数接受两个参数：updateCurvedText()

  • $curvedText，它是对弯曲文本包装器元素的引用
  • radius：曲线/圆形文本的半径

让我们看看这个函数是如何工作的，以及它是如何创建我们的圆形文本的：

  $curvedText.css("min-height", "initial");
  var w = $curvedText.width(),
   h = $curvedText.height();
  $curvedText.css("min-width", w + "px");
  $curvedText.css("min-height", h + "px");
  var text = $curvedText.text();

首先，我们重置包装器的 and 属性。这将使我们能够以正常的直线形式实际测量文本的尺寸。min-width``min-height

我们这样做是因为当我们弯曲文本时，我们最终会得到一个我们不想小于原始文本的元素。否则，元素在调整其半径时会跳到处都是。

我们存储宽度（），高度（）以及供以后使用。w``h``text

var html = "";
  Array.from(text).forEach(function (letter) {
    html += `<span>${letter}</span>`;
  });
  $curvedText.html(html);

接下来，我们需要将要弯曲的文本的每个字母包装成元素。我们只需浏览文本的每个字符并在其周围添加一个元素。然后，我们将包装器的内容替换为新的 HTML 代码。span``span

请注意，这些元素将使用我们之前定义的 CSS 代码。span

再走几步，我们就完成了！

var $letters = $curvedText.find("span");
  $letters.css({
    position: "absolute",
    height:`${radius}px`,
    transformOrigin:"bottom center"
  });

弯曲文本元素

想象一下，弯曲文本的每个字母都变成了一个矩形元素，其高度设置为所需圆形文本的半径值。我们还需要将 设置为 矩形的底部中心，因为我们希望将每个字母旋转一定角度以将字母分布在圆圈上。transformOrigin

上图只是为了让您了解元素是如何转换的。我们添加 CSS 样式，因为我们希望所有字母最初重叠。我们想要这个，因为我们想围绕相同的原点旋转这些矩形。position:absolute

现在，最后一步 — 在圆圈中写入文本的实际旋转：

var circleLength = 2 * Math.PI * radius;
  var angleRad = w/(2*radius);
  var angle = 2 * angleRad * 180/Math.PI/text.length;
6
  $letters.each(function(idx,el){
    $(el).css({
        transform:`translate(${w/2}px,0px) rotate(${idx * angle - text.length*angle/2}deg)`
    })
  });

让我解释一下代码：

该变量实际上并未使用。这只是提醒如何计算圆的长度。circleLength 这有助于我们在拥有切片边缘的长度时确定圆形切片的角度。我们简单地将这个长度除以整个圆半径的两倍。 在我们的例子中，圆形切片的长度是原始文本的宽度。这里的想法是，无论您如何弯曲文本，字母的组合宽度将始终相同。使用提到的公式可以给我们一个弧度角度。CSS喜欢使用学位。angleRad = w/(2*radius)

因此，我们只需要将弧度转换为度数。然后我们将其除以文本中的字母数。这将为我们提供旋转每个字母所需的角度步长。

计算角度后，我们应用 CSS 将每个字母翻译到单词的中心，然后以相同的角度乘以单词中字母的索引旋转每个字母。 当我们旋转每个字母时，因为我们从角度值 0 开始，所以我们最终会得到一个从顶部开始的弯曲文本。 很好，但如果圆圈中的文本居中并向左右平衡，看起来会好得多。因此，我们只需要在每次旋转字母时减去即可。text.length*angle/2

结语

希望jym能通过本文get到干货,有更好的建议欢迎放在评论区😘

感谢jym浏览本文🤞，若有更好的建议，欢迎评论区讨论哈🌹。

如果jym觉得这篇干货很有用，加个关关🥰，点个赞赞🥰，后面我会继续卷，分享更多干货！感谢支持！😍

avatar
文章
阅读
粉丝