0.0.9 • Published 2 years ago

@kira_wlr/bezier-curve v0.0.9

Weekly downloads
-
License
MIT
Repository
github
Last release
2 years ago

ENGLISH

这是一个提供如下几个方法的三次贝塞尔曲线插件。

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]]
// ]