0.0.9 • Published 2 years ago
@kira_wlr/bezier-curve v0.0.9
这是一个提供如下几个方法的三次贝塞尔曲线插件。
将贝塞尔曲线抽象成由N个均匀分布的点构成的折线
获取贝塞尔曲线的长度
将由N个点构成的折线抽象成光滑的贝塞尔曲线
npm安装
$ npm install @kira_wlr/bezier-curve
使用
import bezierCurve from '@kira_wlr/bezier-curve'
// do something
快速体验
<!--资源位于个人服务器仅供体验和测试,请勿在生产环境使用-->
<!--调试版-->
<script src="http://lib.jiaminghi.com/bezierCurve/bezierCurve.map.js"></script>
<!--压缩版-->
<script src="http://lib.jiaminghi.com/bezierCurve/bezierCurve.min.js"></script>
<script>
const { bezierCurveToPolyline, getBezierCurveLength, polylineToBezierCurve } = window.bezierCurve
// do something
</script>
bezierCurve
// 贝塞尔曲线数据结构
const bezierCurve = [
// 起始点
[20, 20],
// 多段贝塞尔曲线
[
// 控制点1,控制点2,结束点
[100, 20],[100, 80],[180,80]
],
// 下一段贝塞尔曲线的起始点是上一段的结束点
// [...],[...]
]
bezierCurveToPolyline
/**
* @description 通过贝塞尔曲线获取折线
* @param {Array} bezierCurve 贝塞尔曲线数据
* @param {Number} precision 计算精度 建议5-10 默认为5
* @return {Array|Boolean} 构成折线的点集 (无效输入将返回false)
*/
function bezierCurveToPolyline (bezierCurve, precision = 5) {
// ...
}
const precision = 5
const polyline = bezierCurveToPolyline(bezierCurve, precision)
// polyline = [
// [[20,20],
// [25.998752507628243,20.11632023466343],[31.698106846035834,20.457189096242345],
// [37.11424670004552,21.010468821119716],[42.263355754480024,21.764021645678454],
// ...]
Notice
- bezierCurveToPolyline的计算结果是由N个点构成的折线,N取决于设置的精度。
- 理想情况下,计算结果中相邻的两个点的距离等于设置的精度(单位px)。
- 建议精度5-10。
- 如果设置的精度过小或过大(小于1或大于10),可能导致计算异常。
- 设置的精度并不是每次都能达到。
getBezierCurveLength
/**
* @description 获取贝塞尔曲线长度
* @param {Array} bezierCurve 贝塞尔曲线数据
* @param {Number} precision 计算精度 建议5-10 默认为5
* @return {Number|Boolean} 贝塞尔曲线长度 (无效输入将返回false)
*/
export function getBezierCurveLength (bezierCurve, precision = 5) {
// ...
}
// 通常情况下,默认精度已经能够达到较好的视觉效果。
const length = bezierCurveToPolyline(bezierCurve)
polyline
// 折线数据结构
const polyline = [
[20, 70],
[50, 30],
[100, 70],
[150, 30],
[180, 70]
]
polylineToBezierCurve
/**
* @description 将由N个点构成的折线抽象为光滑的贝塞尔曲线
* @param {Array} polyline 由N个点构成的折线数据
* @param {Boolean} close 是否闭合
* @param {Number} offsetA 光滑程度
* @param {Number} offsetB 光滑程度
* @return {Array|Boolean} 贝塞尔曲线数据 (无效输入将返回false)
*/
function polylineToBezierCurve (polyline, close = false, offsetA = 0.25, offsetB = 0.25) {
// ...
}
const bezierCurve = polylineToBezierCurve(polyline)
// bezierCurve = [
// [
// [20,70],
// [[27.5,60],[30,30],[50,30]],
// [[70,30],[75,70],[100,70]],
// [[125,70],[130,30],[150,30]],
// [[170,30],[172.5,60],[180,70]]]
//]
const closedBezierCurve = polylineToBezierCurve(polyline, true)
// closedBezerCurve = [
// [20,70],
// [[-12.5,60],[30,30],[50,30]],
// [[70,30],[75,70],[100,70]],
// [[125,70],[130,30],[150,30]],
// [[170,30],[212.5,60],[180,70]],
// [[147.5,80],[52.5,80],[20,70]]
// ]
0.0.9
2 years ago