arctext.js实现文字平滑弯曲弧形效果的插件
程序员文章站
2023-12-03 13:09:58
本文介绍了实现文字平滑弯曲弧形效果的插件-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 );
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
上一篇： 自己怎么优化网站关键词，不请团队自己优化
下一篇： Android实现跑马灯效果的方法