实现文字平滑弯曲弧形效果的插件-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 objectvar compressor = kompressor || 1; // set the compressorif ( options ) { $.extend( settings, options );}// Resizer() resizes items based on the object width divided by the compressor * 10var 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 &nbsp; 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='&nbsp;';}   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 logicif ( 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 valuesthis._calc();// apply transformation.this._rotateWord();// load the eventsthis._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 arciteratorX = 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 );

原文作者技术博客：https://www.jianshu.com/u/ac4daaeecdfe
95后前端妹子一枚，爱阅读，爱交友，将工作中遇到的问题记录在这里，希望给每一个看到的你能带来一点帮助。
欢迎留言交流。

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

js特效在服务器显示变形,使一行文字变形产生弯曲弧度特效的jQuery插件 - Arctext.js...
CSS3可以帮助我们旋转字体,但是如果想让一行字体产生弧度曲线的效果,稍微有点儿费劲.今天分享一个jQuery插件:Arctext.js ,可以有效的帮助我们生成一行带有弧度的文字效果.它能够自动计算 ...
html5文字飞入插件,jquery使用CSS3实现文字动画效果插件Textillate.js
jquery使用CSS3实现文字动画效果插件Textillate.js Textillate是一款基于CSS3动画效果的 JavaScript 库,您可非常轻轻松地把这些动画效果应该于网页中的任何文字 ...
Beautiful Wipe Title Mac(文字标题擦除效果fcpx插件)
Beautiful Wipe Title Mac是一套包含了从左到右擦拭标题和从右到左擦拭两种效果的文字标题擦除效果fcpx插件,这套fcpx擦除效果标题插件是一套时尚而美丽的标题,用手绘斜线擦进和擦 ...
TypeMonkey for Mac(AE文字排列效果脚本插件)
TypeMonkey for Mac是一款安装After Effects中使用的AE文字排列效果脚本插件,AE文本复杂排列动画脚本 TypeMonkey适用于各类视频,ae脚本typemonkey主要 ...
JS配合css实现slide文字框缩放伸展效果
<!DOCTYPE html> <html> <head> <meta http-equiv="content" content=&quo ...
Arctext.js - 基于 CSS3 jQuery 的文本弯曲效果
Arctext.js 是基于 Lettering.js 的文本旋转插件,根据设置的旋转半径准确计算每个字母的旋转弧度并均匀分布.虽然 CSS3 也能够实现字符旋转效果,但是要让安排每个字母都沿着弯曲路 ...
html正方形对话框素材,10种展示效果的弹出层对话框插件method.js
一款10种展示效果的弹出层对话框插件method.js,可以点击演示页面的10个按钮分别查看不同的弹窗效果,基本上该有的弹窗特效都有了,喜欢的童鞋请收下吧. 查看演示下载资源: 68 次下载资源 ...
php加波浪线不解析,给文字加波浪线效果
这次给大家带来给文字加波浪线效果,给文字加波浪线效果的注意事项有哪些,下面就是实战案例,一起来看一下. 前言 css的设计之巧妙,实现之精妙,细细寻味,其妙非凡,妙不可言.这波浪线,取巧的运用了lin ...
html让字按弧度排列,PPT文字怎么设置弧形排列?
PPT文字怎么设置弧形排列? 2020-05-11 09:07 作者:网友投稿导读 / 因为一些需要想把PPT里的文字设置成弧形,比如用PPT制作印章时,有些印章的文字是弧形的,如何把文字弄成弧形状 ...

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

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

最新文章

热门文章