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


Posted in Javascript onMay 13, 2019

本文介绍了实现文字平滑弯曲弧形效果的插件-arctext.js,分享给大家,具体如下:

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

扇形的文字

有时候产品大佬就是很任性,说做一个宣传页,一个类似拱门的效果,每次文字不一样,但是文字得呈现拱形状,类似上图啦。

尝试自己使用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)), parseFloat(settings.minFontSize)));
      };

      // Call once to set.
      resizer();

      // Call on resize. Opera debounces their resize by default. 
      $(window).resize(resizer);
    });

  };

  /*
   * Lettering plugin
   *
   * changed injector function:
   *  add   for empty chars.
   */
  function injector(t, splitter, klass, after) {
    var a = t.text().split(splitter), inject = '', emptyclass;
    if (a.length) {
      $(a).each(function(i, item) {
        emptyclass = '';
        if(item === ' ') {
          emptyclass = ' empty';
          item=' ';
        }  
        inject += '<span class="'+klass+(i+1)+emptyclass+'">'+item+'</span>'+after;
      }); 
      t.empty().append(inject);
    }
  }
  
  var methods       = {
    init : function() {

      return this.each(function() {
        injector($(this), '', 'char', '');
      });

    },

    words : function() {

      return this.each(function() {
        injector($(this), ' ', 'word', ' ');
      });

    },
    
    lines : function() {

      return this.each(function() {
        var r = "eefec303079ad17405c889e092e105b0";
        // Because it's hard to split a <br/> tag consistently across browsers,
        // (*ahem* IE *ahem*), we replaces all <br/> instances with an md5 hash 
        // (of the word "split"). If you're trying to use this plugin on that 
        // md5 hash string, it will fail because you're being ridiculous.
        injector($(this).children("br").replaceWith(r).end(), r, 'line', '');
      });

    }
  };

  $.fn.lettering     = function( method ) {
    // Method calling logic
    if ( method && methods[method] ) {
      return methods[ method ].apply( this, [].slice.call( arguments, 1 ));
    } else if ( method === 'letters' || ! method ) {
      return methods.init.apply( this, [].slice.call( arguments, 0 ) ); // always pass an array
    }
    $.error( 'Method ' + method + ' does not exist on jQuery.lettering' );
    return this;
  };
  
  /*
   * Arctext object.
   */
  $.Arctext        = function( options, element ) {
  
    this.$el  = $( element );
    this._init( options );
    
  };
  
  $.Arctext.defaults   = {
    radius : 0,  // the minimum value allowed is half of the word length. if set to -1, the word will be straight.
    dir   : 1,  // 1: curve is down, -1: curve is up.
    rotate : true, // if true each letter will be rotated.
    fitText : false // if you wanna try out the fitText plugin (http://fittextjs.com/) set this to true. Don't forget the wrapper should be fluid.
  };
  
  $.Arctext.prototype   = {
    _init        : function( options ) {
      
      this.options    = $.extend( true, {}, $.Arctext.defaults, options );
      
      // apply the lettering plugin.
      this._applyLettering();
      
      this.$el.data( 'arctext', true );
      
      // calculate values
      this._calc();
      
      // apply transformation.
      this._rotateWord();
      
      // load the events
      this._loadEvents();
      
    },
    _applyLettering   : function() {
    
      this.$el.lettering();
      
      if( this.options.fitText )
        this.$el.fitText();
      
      this.$letters  = this.$el.find('span').css('display', 'inline-block');
    
    },
    _calc        : function() {
      
      if( this.options.radius === -1 )
        return false;
      
      // calculate word / arc sizes & distances.
      this._calcBase();
      
      // get final values for each letter.
      this._calcLetters();
    
    },
    _calcBase      : function() {
      
      // total word width (sum of letters widths)
      this.dtWord   = 0;
      
      var _self    = this;
      
      this.$letters.each( function(i) {
                
        var $letter     = $(this),
          letterWidth   = $letter.outerWidth( true );
        
        _self.dtWord += letterWidth;
        
        // save the center point of each letter:
        $letter.data( 'center', _self.dtWord - letterWidth / 2 );
        
      });
      
      // the middle point of the word.
      var centerWord = this.dtWord / 2;
      
      // check radius : the minimum value allowed is half of the word length.
      if( this.options.radius < centerWord )
        this.options.radius = centerWord;
      
      // total arc segment length, where the letters will be placed.
      this.dtArcBase = this.dtWord;
      
      // calculate the arc (length) that goes from the beginning of the first letter (x=0) to the end of the last letter (x=this.dtWord).
      // first lets calculate the angle for the triangle with base = this.dtArcBase and the other two sides = radius.
      var angle    = 2 * Math.asin( this.dtArcBase / ( 2 * this.options.radius ) );
      
      // given the formula: L(ength) = R(adius) x A(ngle), we calculate our arc length.
      this.dtArc   = this.options.radius * angle;
      
    },
    _calcLetters    : function() {
      
      var _self    = this,
        iteratorX  = 0;
        
      this.$letters.each( function(i) {
          
        var $letter     = $(this),
          // calculate each letter's semi arc given the percentage of each letter on the original word.
          dtArcLetter   = ( $letter.outerWidth( true ) / _self.dtWord ) * _self.dtArc,
          // angle for the dtArcLetter given our radius.
          beta      = dtArcLetter / _self.options.radius,
          // distance from the middle point of the semi arc's chord to the center of the circle.
          // this is going to be the place where the letter will be positioned.
          h        = _self.options.radius * ( Math.cos( beta / 2 ) ),
          // angle formed by the x-axis and the left most point of the chord.
          alpha      = Math.acos( ( _self.dtWord / 2 - iteratorX ) / _self.options.radius ),
          // angle formed by the x-axis and the right most point of the chord.
          theta      = alpha + beta / 2,
          // distances of the sides of the triangle formed by h and the orthogonal to the x-axis.
          x        = Math.cos( theta ) * h,
          y        = Math.sin( theta ) * h,
          // the value for the coordinate x of the middle point of the chord.
          xpos      = iteratorX + Math.abs( _self.dtWord / 2 - x - iteratorX ),
          // finally, calculate how much to translate each letter, given its center point.
          // also calculate the angle to rotate the letter accordingly.
          xval  = 0| xpos - $letter.data( 'center' ),
          yval  = 0| _self.options.radius - y,
          angle  = ( _self.options.rotate ) ? 0| -Math.asin( x / _self.options.radius ) * ( 180 / Math.PI ) : 0;
        
        // the iteratorX will be positioned on the second point of each semi arc
        iteratorX = 2 * xpos - iteratorX;
        
        // save these values
        $letter.data({
          x  : xval,
          y  : ( _self.options.dir === 1 ) ? yval : -yval,
          a  : ( _self.options.dir === 1 ) ? angle : -angle
        });
          
      });
    
    },
    _rotateWord     : function( animation ) {
      
      if( !this.$el.data('arctext') ) return false;
      
      var _self = this;
      
      this.$letters.each( function(i) {
        
        var $letter     = $(this),
          transformation = ( _self.options.radius === -1 ) ? 'none' : 'translateX(' + $letter.data('x') + 'px) translateY(' + $letter.data('y') + 'px) rotate(' + $letter.data('a') + 'deg)',
          transition   = ( animation ) ? 'all ' + ( animation.speed || 0 ) + 'ms ' + ( animation.easing || 'linear' ) : 'none';
        
        $letter.css({
          '-webkit-transition' : transition,
          '-moz-transition' : transition,
          '-o-transition' : transition,
          '-ms-transition' : transition,
          'transition' : transition
        })
        .css({
          '-webkit-transform' : transformation,
          '-moz-transform' : transformation,
          '-o-transform' : transformation,
          '-ms-transform' : transformation,
          'transform' : transformation
        });
      
      });
      
    },
    _loadEvents     : function() {
      
      if( this.options.fitText ) {
      
        var _self = this;
        
        $(window).on( 'resize.arctext', function() {
          
          _self._calc();
          
          // apply transformation.
          _self._rotateWord();
          
        });
      
      }
    
    },
    set         : function( opts ) {
      
      if( !opts.radius && 
        !opts.dir &&
        opts.rotate === 'undefined' ) {
          return false;
      }
      
      this.options.radius = opts.radius || this.options.radius;
      this.options.dir  = opts.dir || this.options.dir;
      
      if( opts.rotate !== undefined ) {
        this.options.rotate = opts.rotate;
      }  
      
      this._calc();
      
      this._rotateWord( opts.animation );
      
    },
    destroy       : function() {
      
      this.options.radius = -1;
      this._rotateWord();
      this.$letters.removeData('x y a center');
      this.$el.removeData('arctext');
      $(window).off('.arctext');
      
    }
  };
  
  var logError      = function( message ) {
    if ( this.console ) {
      console.error( message );
    }
  };
  
  $.fn.arctext      = function( options ) {
  
    if ( typeof options === 'string' ) {
      
      var args = Array.prototype.slice.call( arguments, 1 );
      
      this.each(function() {
      
        var instance = $.data( this, 'arctext' );
        
        if ( !instance ) {
          logError( "cannot call methods on arctext prior to initialization; " +
          "attempted to call method '" + options + "'" );
          return;
        }
        
        if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ) {
          logError( "no such method '" + options + "' for arctext instance" );
          return;
        }
        
        instance[ options ].apply( instance, args );
      
      });
    
    } 
    else {
    
      this.each(function() {
      
        var instance = $.data( this, 'arctext' );
        if ( !instance ) {
          $.data( this, 'arctext', new $.Arctext( options, this ) );
        }
      });
    
    }
    
    return this;
    
  };
  
})( jQuery );

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
cnblogs中在闪存中屏蔽某人的实现代码
Nov 14 Javascript
javascript动态添加、修改、删除对象的属性与方法详解
Jan 27 Javascript
js封装可使用的构造函数继承用法分析
Jan 28 Javascript
js限制文本框只能输入整数或者带小数点的数字
Apr 27 Javascript
javascript实现10个球随机运动、碰撞实例详解
Jul 08 Javascript
javascript cookie的基本操作(添加和删除)
Jul 24 Javascript
利用ECharts.js画K线图的方法示例
Jan 10 Javascript
详解Vue单元测试Karma+Mocha学习笔记
Jan 31 Javascript
JavaScript中的E-mail 地址格式验证
Mar 28 Javascript
浅谈PDF.js使用心得
Jun 07 Javascript
在 Angular-cli 中使用 simple-mock 实现前端开发 API Mock 接口数据模拟功能的方法
Nov 28 Javascript
vue-cli3配置favicon.ico和title的流程
Oct 27 Javascript
vue项目前端知识点整理【收藏】
May 13 #Javascript
使用jQuery如何写一个含验证码的登录界面
May 13 #jQuery
JQuery特殊效果和链式调用操作示例
May 13 #jQuery
JQuery的加载和选择器用法简单示例
May 13 #jQuery
koa+mongoose实现简单增删改查接口的示例代码
May 13 #Javascript
如何利用vue+vue-router+elementUI实现简易通讯录
May 13 #Javascript
vue百度地图 + 定位的详解
May 13 #Javascript
You might like
PHP 进度条函数的简单实例
2017/09/19 PHP
PHP+ajax实现二级联动菜单功能示例
2018/08/10 PHP
PHP合并两个或多个数组的方法
2019/01/20 PHP
Ajax+PHP实现的模拟进度条功能示例
2019/02/11 PHP
IE与FireFox的兼容性问题分析
2007/04/22 Javascript
js实现幻灯片播放图片示例代码
2013/11/07 Javascript
验证控件与Button的OnClientClick事件详细解析
2013/12/04 Javascript
js脚本获取webform服务器控件的方法
2014/05/16 Javascript
Nodejs学习笔记之Stream模块
2015/01/13 NodeJs
Jquery 实现弹出层插件
2015/01/28 Javascript
js 将图片连接转换成base64格式的简单实例
2016/08/10 Javascript
jquery的checkbox,radio,select等方法小结
2016/08/30 Javascript
jquery判断页面网址是否有效的两种方法
2016/12/11 Javascript
JS构造一个html文本内容成文件流形式发送到后台
2018/07/31 Javascript
Vue一次性简洁明了引入所有公共组件的方法
2018/11/28 Javascript
微信小程序实现商城倒计时
2020/11/01 Javascript
vue v-model的用法解析
2020/10/19 Javascript
[03:07]DOTA2英雄基础教程 冰霜诅咒极寒幽魂
2013/12/06 DOTA
Python爬虫实现爬取京东手机页面的图片(实例代码)
2017/11/30 Python
Python编程把二叉树打印成多行代码
2018/01/04 Python
Python操作MongoDB数据库的方法示例
2018/01/04 Python
Python实现动态图解析、合成与倒放
2018/01/18 Python
python实现数据库跨服务器迁移
2018/04/12 Python
Python hmac模块使用实例解析
2019/12/24 Python
python 已知三条边求三角形的角度案例
2020/04/12 Python
python与idea的集成的实现
2020/11/20 Python
基于CSS3制作立体效果导航菜单
2016/01/12 HTML / CSS
澳洲CFL商城:CHEMIST FOR LESS(中文)
2021/02/28 全球购物
美国购买韩国护肤和美容产品网站:Althea Korea
2020/11/16 全球购物
大型晚会策划方案
2014/02/06 职场文书
《中国的气候》教学反思
2014/02/23 职场文书
中职招生先进个人材料
2014/08/31 职场文书
小学体育组工作总结2015
2015/07/21 职场文书
CSS3通过var()和calc()函数实现动画特效
2021/03/30 HTML / CSS
nginx 反向代理之 proxy_pass的实现
2021/03/31 Servers
MySQL数据库10秒内插入百万条数据的实现
2021/11/01 MySQL