type
status
date
slug
summary
tags
category
icon
password
前言：
不使用插件实现滑块控制弧形文本
📝 主旨内容
1.要求
具体配合视频的文字版本需求是这样的：往上卷曲是以这行字体上边缘线来做卷曲，左右往上卷曲。卷曲角度是拖拉杆参数决定，卷曲最大是360.和-360。简单说就是文字的弧长不变，往上往下弯曲
2.拆解
- 滑块控制-100到100，为0时水平，为100或-100时是向上或向下的圆形，当一条直线逐渐卷曲成一个圆形时可以视作一条弧，这个弧所对应的圆心角不断的增大，从无穷接近于0增大到360°。
- 滑块控制圆心角，把360°拆分成100份，这样控制才平滑；
- 弧长就是文字总长，弧长不变，弧长=圆心角*半径，可以计算出半径，随后由半径推出每个字体的偏转角度；
2.实现
1.将输入的滑块值进行转换
2.将元素拆分成span元素，计算文字总长
3.计算计算圆半径,计算偏移和旋转角度
计算偏移和旋转角度这里我是参考的circletype.js这个库，但是里面有坑，此处不表，后来我自己写了一个，可能兼容性不是好，只适用于所有文字大小相等的情况，如出现中英文混杂请修改rotations这个数组，逻辑就是以所有文字这条线的中点，向左向右去增加或者减少单个文字的旋转角度。
4.遍历span元素，去进行效果渲染
这里也是借鉴的circletype,根据自身情况进行调整。
🤗 实现效果和总结
贴一个所有代码合并起来的效果，点击传送门跳转codepen进行调试摸索学习 → 传送门
📎 参考文章
- 滑弯曲弧形效果的插件-arctext.js改造 （有一说一，这篇文章对我启发挺大的，我是先看过这篇文章后去git上看了源码调试了arctext后不是很满意，于是才去看的circletype源码）