https://github.com/cuixiaorui/beziercurvdraw

基于贝塞尔曲线拟合算法实现绘制平滑曲线
https://github.com/cuixiaorui/beziercurvdraw

Last synced: about 2 months ago
JSON representation

基于贝塞尔曲线拟合算法实现绘制平滑曲线

• Host: GitHub
• URL: https://github.com/cuixiaorui/beziercurvdraw
• Owner: cuixiaorui
• Created: 2018-12-26T11:59:18.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2018-12-27T10:25:48.000Z (over 6 years ago)
• Last Synced: 2025-03-24T05:12:53.759Z (2 months ago)
• Language: JavaScript
• Homepage:
• Size: 775 KB
• Stars: 25
• Watchers: 1
• Forks: 10
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# bezierCurvDraw

基于贝塞尔曲线拟合算法实现绘制平滑曲线

## 算法

   JavaScript implementation of Algorithm for Automatically Fitting Digitized Curves by Philip J. Schneider "Graphics Gems", Academic Press, 1990

## 实现

* 基于拟合算法生成对应的贝塞尔曲线点

* 基于生成的贝塞尔曲线点生成对应的绘制点

* 基于绘制点生成对应的线条

## 演示

### 功能

- 可动态编辑参数

    1. MaxError: 最大错误控制点(越小生成的线条准确点越高) 

    2. Tension: 张力(可控制曲线的样式)

    3. Segments: 精准度(越大线条越平滑,生成的点也更多）

- 可拖拽控制点

- 可在线条空白处生成控制点

- 双击线条可选中（改变颜色）

![](https://user-gold-cdn.xitu.io/2018/12/27/167ef1fbd9e3e251?w=1752&h=1136&f=jpeg&s=77339)

[演示地址](https://cuixiaorui.github.io/bezierCurvDraw/dist/index.html)

### 说明

demo 基于 egret 编写，在 canvas 的基础上实现的。

- 生成贝塞尔曲线点的库为 curve 

- 生成绘制点的逻辑在 DrawCurveCore.ts 内

## 参考

- https://github.com/soswow/fit-curve

- https://github.com/088haizi/cardinal-spline-js