实现文字平滑弯曲弧形效果的插件-arctext.js

最新推荐文章于 2024-06-05 21:51:20 发布

caicai1171523597

最新推荐文章于 2024-06-05 21:51:20 发布

阅读量6.1k

点赞数 4

分类专栏： web前端

本文链接：https://blog.csdn.net/caicai1171523597/article/details/86639947

版权

本文介绍了一种使用arctext.js插件实现文字弯曲效果的方法，适用于制作扇形或拱桥状的文字排列，通过简单的HTML和jQuery调用，即可让文字沿弧线分布，适用于网页设计和创意展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

扇形的文字

有时候产品大佬就是很任性，说做一个宣传页，一个类似拱门的效果，每次文字不一样，但是文字得呈现拱形状，类似上图啦。
尝试自己使用canvas画和css3的rotate旋转div，两种方法都是计算旋转角度的时候很麻烦，因为可能5个字10个字，但是得均匀地呈拱形分布，要知道让每个文字都沿着弯曲路径排布相当的复杂，于是便发现了这个好用的插件---arctext.js

它能够自动计算每个文字正确的旋转角度，并且生成对应的CSS ，其实就是基于css3和jquery，使用起来也很方便。
1.创建一个容器装文字

<h3 id="title">文字弯曲效果类似扇形拱桥状</h3>

2.引入jquery和arctext.js

<script type="text/javascript"  src="//code.jquery.com/jquery-1.8.2.min.js" ></script>
<script src="jquery.arctext.js"></script>

3.调用arctext的方法：

$(function(){
        $("#title").show().arctext({
            radius:180
        })
    })

arctext参数说明：

radius:弯曲度数，最小的值是文字长度，如果设置为-1，则显示直线。

rotate:默认true，为false则不旋转文字

dir:默认1 (1：向下弯曲非1（-1,0,2等）：向上弯曲 )

fitText:默认false,如果你想尝试使用fitText插件，设置为true，记住包装的标签需要fluid布局。

效果图完整demo：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
      #title{
            font-size: 20px;
            color: #ffe400;
            text-align: center;
        }
    </style>
</head>
<body>
    <h3 id="title">文字弯曲效果类似扇形拱桥状</h3>
<script type="text/javascript"  src="//code.jquery.com/jquery-1.8.2.min.js" ></script>
<script src="jquery.arctext.js"></script>
<script>
    $(function(){
        $("#title").arctext({
            radius:180
        })
    })
</script>
</body>
</html>

jquery.arctext.js

/**
 * Arctext.js
 * A jQuery plugin for curved text
 * http://www.codrops.com
 *
 * Copyright 2011, Pedro Botelho / Codrops
 * Free to use under the MIT license.
 *
 * Date: Mon Jan 23 2012
 */

(function( $, undefined ) {
    
    /*! 
    * FitText.js 1.0
    *
    * Copyright 2011, Dave Rupert http://daverupert.com
    * Released under the WTFPL license 
    * http://sam.zoy.org/wtfpl/
    *
    * Date: Thu May 05 14:23:00 2011 -0600
    */
    $.fn.fitText = function( kompressor, options ) {

        var settings = {
            'minFontSize' : Number.NEGATIVE_INFINITY,
            'maxFontSize' : Number.POSITIVE_INFINITY
        };

        return this.each(function() {
            var $this = $(this);              // store the object
            var compressor = kompressor || 1; // set the compressor
    
            if ( options ) { 
              $.extend( settings, options );
            }
    
            // Resizer() resizes items based on the object width divided by the compressor * 10
            var resizer = function () {
                $this.css('font-size', Math.max(Math.min($this.width() / (compressor*10), parseFloat(settings.maxFontSize)), parseFlo

最低0.47元/天解锁文章