{"id":18340486,"url":"https://github.com/datav-team/beziercurve","last_synced_at":"2025-04-06T05:32:37.044Z","repository":{"id":34572960,"uuid":"178164971","full_name":"DataV-Team/BezierCurve","owner":"DataV-Team","description":"贝塞尔曲线扩展插件，用于计算贝塞尔曲线长度、贝塞尔曲线转折线、折线转贝塞尔曲线（折线转光滑曲线）等需求","archived":false,"fork":false,"pushed_at":"2023-01-06T02:06:42.000Z","size":924,"stargazers_count":11,"open_issues_count":11,"forks_count":10,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-26T01:48:16.985Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/DataV-Team.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-03-28T08:59:12.000Z","updated_at":"2024-11-28T13:47:24.000Z","dependencies_parsed_at":"2023-01-15T07:50:35.102Z","dependency_job_id":null,"html_url":"https://github.com/DataV-Team/BezierCurve","commit_stats":null,"previous_names":["jiaming743/beziercurve"],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DataV-Team%2FBezierCurve","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DataV-Team%2FBezierCurve/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DataV-Team%2FBezierCurve/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DataV-Team%2FBezierCurve/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DataV-Team","download_url":"https://codeload.github.com/DataV-Team/BezierCurve/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247440803,"owners_count":20939223,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-05T20:22:43.161Z","updated_at":"2025-04-06T05:32:35.481Z","avatar_url":"https://github.com/DataV-Team.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[ENGLISH](./README_EN.md)\n\n\u003ch1 align=\"center\"\u003eBezier Curve Extension\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://travis-ci.com/DataV-Team/beziercurve\"\u003e\n      \u003cimg src=\"https://img.shields.io/travis/com/DataV-Team/bezierCurve.svg\" alt=\"Travis CI\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://github.com/DataV-Team/beziercurve/blob/master/LICENSE\"\u003e\n      \u003cimg src=\"https://img.shields.io/github/license/DataV-Team/beziercurve.svg\" alt=\"LICENSE\" /\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://www.npmjs.com/package/@jiaminghi/bezier-curve\"\u003e\n      \u003cimg src=\"https://img.shields.io/npm/v/@jiaminghi/bezier-curve.svg\" alt=\"LICENSE\" /\u003e\n    \u003c/a\u003e\n\u003c/p\u003e\n\n### 这是一个提供如下几个方法的三次贝塞尔曲线插件。\n\n- **[bezierCurveToPolyline](#bezierCurveToPolyline)**\n\n  将贝塞尔曲线抽象成由 N 个点构成的折线\n\n- **[getBezierCurveLength](#getBezierCurveLength)**\n\n  获取贝塞尔曲线的长度\n\n- **[polylineToBezierCurve](#polylineToBezierCurve)**\n\n  将由 N 个点构成的折线抽象成光滑的贝塞尔曲线\n\n### npm 安装\n\n```shell\n$ npm install @jiaminghi/bezier-curve\n```\n\n### 使用\n\n```javascript\nimport bezierCurve from '@jiaminghi/bezier-curve'\n\n// do something\n```\n\n### 快速体验\n\n```html\n\u003c!--调试版--\u003e\n\u003cscript src=\"https://unpkg.com/@jiaminghi/color/dist/index.js\"\u003e\u003c/script\u003e\n\u003c!--压缩版--\u003e\n\u003cscript src=\"https://unpkg.com/@jiaminghi/color/dist/index.min.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n  const { bezierCurveToPolyline, getBezierCurveLength, polylineToBezierCurve } = window.BezierCurve\n  // do something\n\u003c/script\u003e\n```\n\n---\n\n\u003ch3 align=\"center\"\u003e示例\u003c/h3\u003e\n\n#### bezierCurve\n\n```typescript\ntype Point = [number, number]\n\n/**\n * [控制点1，控制点2，结束点]\n */\ntype BezierCurveSegment = [Point, Point, Point]\n\n/**\n * [起始点, 贝塞尔曲线段, ...]\n * 下一段贝塞尔曲线的起始点是上一段的结束点\n */\ntype BezierCurve = [Point, BezierCurveSegment, ...BezierCurveSegment[]]\n\nconst bezierCurve: BezierCurve = [\n  [20, 20],\n  [\n    [100, 20],\n    [100, 80],\n    [180, 80],\n  ],\n]\n```\n\n\u003cp align=\"center\"\u003e\n    \u003cimg width=\"200px\" src=\"./exampleImgs/bezierCurve.png\" /\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\u003ci\u003ebezierCurve\u003c/i\u003e in \u003cb\u003eSVG\u003c/b\u003e\u003c/p\u003e\n\n#### bezierCurveToPolyline\n\n```typescript\n/**\n * @description 将贝塞尔曲线转换为折线\n * @param {BezierCurve} bezierCurve 贝塞尔曲线\n * @param {number} precision        需要的计算精度\n * @param {number} recursiveCount   迭代次数\n * @return {Point[]} 转换的折线\n */\ntype bezierCurveToPolyline = (\n  bezierCurve: BezierCurve,\n  precision = 5,\n  resursiveCount = 0\n) =\u003e Point[]\n\nconst polyline = bezierCurveToPolyline(bezierCurve)\n// polyline = [\n// [[20,20],\n// [25.998752507628243,20.11632023466343],[31.698106846035834,20.457189096242345],\n// [37.11424670004552,21.010468821119716],[42.263355754480024,21.764021645678454],\n// ...]\n```\n\n\u003cp align=\"center\"\u003e\n    \u003cimg width=\"200px\" src=\"./exampleImgs/bezierCurveToPolyline.png\" /\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\u003ci\u003epolyline\u003c/i\u003e in \u003cb\u003eSVG\u003c/b\u003e\u003c/p\u003e\n\n#### Notice\n\n- *bezierCurveToPolyline*的计算结果是由 N 个点构成的折线，N 取决于设置的精度。\n- 理想情况下，计算结果中相邻的两个点的距离等于设置的精度（单位 px）。\n- 建议精度 5-10。\n- 设置的精度通常是达不到的，除非设置较高的迭代次数，计算成本较高。\n\n#### getBezierCurveLength\n\n```typescript\n/**\n * @description 计算贝塞尔曲线的长度\n * @param {BezierCurve} bezierCurve 贝塞尔曲线\n * @param {number} precision        需要的计算精度\n * @param {number} recursiveCount   迭代次数\n * @return {number} 转换的折线\n */\ntype getBezierCurveLength = (bezierCurve: BezierCurve, precision = 5, resursiveCount = 0) =\u003e Point[]\n\n// 通常情况下，默认精度已经能够达到较好的视觉效果。\nconst length = getBezierCurveLength(bezierCurve)\n```\n\n#### polyline\n\n```typescript\nconst polyline: Point[] = [\n  [20, 70],\n  [50, 30],\n  [100, 70],\n  [150, 30],\n  [180, 70],\n]\n```\n\n\u003cp align=\"center\"\u003e\n    \u003cimg width=\"200px\" src=\"./exampleImgs/polyline.png\" /\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\u003ci\u003epolyline\u003c/i\u003e in \u003cb\u003eSVG\u003c/b\u003e\u003c/p\u003e\n\n#### polylineToBezierCurve\n\n```typescript\n/**\n * @description 将折线转换为贝塞尔曲线\n * @param {Point[]} polyline 折线\n * @param {boolean} close    转换的贝塞尔曲线是否需要闭合\n * @param {number} offsetA   光滑程度\n * @param {number} offsetB   光滑程度\n * @return {BezierCurve} 转换的贝塞尔曲线\n */\ntype polylineToBezierCurve = (\n  polyline: Point[],\n  close = false,\n  offsetA = 0.25,\n  offsetB = 0.25\n) =\u003e BezierCurve\n\nconst bezierCurve = polylineToBezierCurve(polyline)\n// bezierCurve = [\n// [\n// \t[20,70],\n// \t[[27.5,60],[30,30],[50,30]],\n// \t[[70,30],[75,70],[100,70]],\n// \t[[125,70],[130,30],[150,30]],\n// \t[[170,30],[172.5,60],[180,70]]]\n//]\n\nconst closedBezierCurve = polylineToBezierCurve(polyline, true)\n// closedBezerCurve = [\n// \t[20,70],\n// \t[[-12.5,60],[30,30],[50,30]],\n// \t[[70,30],[75,70],[100,70]],\n// \t[[125,70],[130,30],[150,30]],\n// \t[[170,30],[212.5,60],[180,70]],\n// \t[[147.5,80],[52.5,80],[20,70]]\n// ]\n```\n\n\u003cp align=\"center\"\u003e\n    \u003cimg width=\"200px\" src=\"./exampleImgs/polylineToBezierCurve.png\" /\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\u003ci\u003ebezierCurve\u003c/i\u003e in \u003cb\u003eSVG\u003c/b\u003e\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n    \u003cimg width=\"200px\" src=\"./exampleImgs/polylineToClosedBezierCurve.png\" /\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\u003ci\u003eclosedBezierCurve\u003c/i\u003e in \u003cb\u003eSVG\u003c/b\u003e\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdatav-team%2Fbeziercurve","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdatav-team%2Fbeziercurve","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdatav-team%2Fbeziercurve/lists"}