Ninety-nine Pitchers of Malt
Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

@jiaminghi/bezier-curve

0.0.9 • Public • Published

ENGLISH

Bezier Curve Extension

Travis CI LICENSE LICENSE

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

npm安装

$ npm install @jiaminghi/bezier-curve

使用

import bezierCurve from '@jiaminghi/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]
    ],
    // 下一段贝塞尔曲线的起始点是上一段的结束点
    // [...],[...]
]

bezierCurve in SVG

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

polyline in SVG

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

polyline in SVG

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

bezierCurve in SVG

closedBezierCurve in SVG

Install

npm i @jiaminghi/bezier-curve

DownloadsWeekly Downloads

1,189

Version

0.0.9

License

MIT

Unpacked Size

137 kB

Total Files

30

Last publish

Collaborators

  • avatar
  • avatar