获取一些路径上的点

获取直线、二阶贝塞尔曲线、三阶贝塞尔曲线、圆、圆弧组成的点

安装

• npm

  npm i -S unit-path

• yarn

  yarn add -S unit-path

• pnpm

  pnpm add -S unit-path

使用

import UnitPath from 'unit-path';

const unitPath = new UnitPath();
// 设置路径
const path = unitPath.setPath('LINE', { x: 50, y: 50 }, { x: 100, y: 100 });
// 获取指定位置上的点
const point = path.getPoint(.5);
// 获取路径上平均分布的点
const points = path.getPoints(50);

参数说明

new UnitPath(options: UnitPathOptions):

type UnitPathOptions = {
  // 保留几位小数，不设置则全保留
  decimalPlaces?: number
  // `getPoints()` 默认获取点的数量
  defaultQuantity?: number
}

setPath()

• 直线

  setPath(
    type: 'LINE',
    // 起点坐标
    startPoint: Point,
    // 终点坐标
    endPoint: Point
  )

• 二次贝塞尔曲线

  setPath(
    type: 'TWO_ORDER_BEZIER',
    // 起点坐标
    startPoint: Point,
    // 控制点坐标
    controlPoint: Point,
    // 终点坐标
    endPoint: Point
  )

• 三次贝塞尔曲线

  setPath(
    type: 'THREE_ORDER_BEZIER',
    // 起点坐标
    startPoint: Point,
    // 控制点 1 的坐标
    controlPoint1: Point,
    // 控制点 2 的坐标
    controlPoint2: Point,
    // 终点坐标
    endPoint: Point
  )

• 圆 / 圆弧

  setPath(
    type: 'ARC',
    // 圆心坐标 x
    x: number,
    // 圆心坐标 y
    y: number,
    // 圆弧半径
    r: number,
    // 起始角弧度
    startAngle: number,
    // 结束角弧度
    endAngle: number,
    // 是否为逆时针方向
    anticlockwise?: boolean
  )

getPoint(t)

t 表示点位于路径的位置，它的取值范围为 [0,1]，默认值为 0。

getPoints(quantity)

quantity 表示获取该路径上点的数量，取值范围为[0,∞]。