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

扇形的文字

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

尝试自己使用canvas画和css3的rotate旋转div，两种方法都是计算旋转角度的时候很麻烦，因为可能5个字10个字，但是得均匀地呈拱形分布，要知道让每个文字都沿着弯曲路径排布相当的复杂，于是便发现了这个好用的插件---arctext.js

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

1.创建一个容器装文字

文字弯曲效果类似扇形拱桥状

2.引入jquery和arctext.js

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：

#title{

font-size: 20px;

color: #ffe400;

text-align: center;

}

文字弯曲效果类似扇形拱桥状

$(function(){

$("#title").arctext({

radius:180

})

})

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);