绘制区域 点击添加点, 拖动调整位置
预设曲线
控制面板
控制点设置
曲线设置
曲线信息
控制点坐标
| 点 | X坐标 | Y坐标 | 操作 |
|---|---|---|---|
| 添加控制点后,坐标将显示在这里 | |||
曲线代码
导出图片
工具说明
使用说明:
- 点击"添加控制点"按钮或在画布上点击添加控制点
- 拖动控制点调整曲线形状
- 在坐标表格中可以复制单个或全部坐标
- 使用预设曲线快速创建常见形状
- 可以复制生成的SVG代码用于其他项目
- 可以下载SVG文件或者导出PNG图片用于展示或打印
贝塞尔曲线教学指南
贝塞尔曲线原理
贝塞尔曲线是计算机图形学中的参数曲线,由控制点定义。在向量图形中广泛应用,
如字体设计和3D建模。n阶贝塞尔曲线由n+1个控制点定义,通过递归插值生成平滑曲线。
应用场景
- UI设计中的动画过渡
- 字体设计与矢量图形
- 游戏开发中的运动轨迹
- CAD/CAM系统中的曲线建模
- 数据可视化中的平滑曲线
基础概念
控制点 (Control Points)
定义曲线形状的关键点,拖动控制点可以实时调整曲线形状。
t值参数 (Parameter t)
从0到1的参数,表示点在曲线上的位置。t=0在起点,t=1在终点。
曲线阶数 (Curve Order)
由控制点数量决定,n个控制点对应n-1阶贝塞尔曲线。
曲率 (Curvature)
描述曲线弯曲程度的量,曲率越大弯曲越明显。
t值深度解析
t值是贝塞尔曲线的核心参数,它采用德卡斯特里奥算法进行递归插值计算:
// 递归计算贝塞尔曲线点
function bezier(t, points) {
if (points.length == 1) return points[0];
const newPoints = [];
for (let i = 0; i < points.length - 1; i++) {
newPoints.push(lerp(points[i], points[i+1], t));
}
return bezier(t, newPoints);
}
/**
* 线性插值函数
* @param {number|Object} a - 起始值或点
* @param {number|Object} b - 结束值或点
* @param {number} t - 插值参数 [0,1]
* @returns {number|Object} 插值结果
*/
function lerp(a, b, t) {
if (typeof a === 'number') {
return a + (b - a) * t;
}
else if (typeof a === 'object' && a.x !== undefined) {
return {
x: a.x + (b.x - a.x) * t,
y: a.y + (b.y - a.y) * t
};
}
else if (Array.isArray(a)) {
return [
a[0] + (b[0] - a[0]) * t,
a[1] + (b[1] - a[1]) * t
];
}
}
- 线性插值: t值在每对控制点之间进行线性插值
- 递归过程: 不断生成新的插值点,直到只剩一个点
- 几何意义: t值对应曲线生成过程中的中间状态
曲率与连续性
C0 连续性
位置连续,曲线段端点相连但可能有尖角。
G1 连续性
切线方向连续,视觉上平滑但曲率可能突变。
C1 连续性
一阶导数连续,曲率平滑过渡。
曲率计算公式
其中B'(t)是一阶导数(切线),B''(t)是二阶导数。
实践教程
观察t值移动
拖动t值滑块,观察红点在曲线上的移动轨迹,理解参数化曲线的概念。
分析曲率变化
开启曲率梳,观察不同区域的曲率变化,理解控制点对曲线弯曲程度的影响。
切线方向分析
开启切线显示,观察不同t值点的切线方向,理解曲线局部性质。
隐私政策
欢迎使用贝塞尔曲线在线绘制工具(以下简称"本工具")。我们高度重视您的隐私保护,本政策旨在说明我们如何收集、使用、存储和保护您的信息。
1. 信息收集
本工具设计时以隐私保护为核心原则,我们尽可能减少对用户数据的收集:
- 我们不收集任何个人身份信息,如姓名、地址、电话号码或电子邮件地址
- 我们不要求用户创建账户或提供任何登录凭据
- 本工具在浏览器本地运行,您创建的贝塞尔曲线设计和相关数据仅存储在您的设备上
- 我们使用基本 analytics 分析工具收集匿名使用数据,如访问量、使用时长和功能使用情况,这些数据无法关联到具体用户
2. Cookie 和本地存储
为了提供更好的用户体验,本工具使用有限的浏览器存储技术:
- 我们使用本地存储(localStorage)保存您的工具设置和曲线设计,这些数据仅存在于您的设备上
- 我们可能使用必要的Cookie来保存您的偏好设置(如亮/暗模式选择)
- 我们使用Google Analytics等分析工具收集匿名使用统计信息,这些工具使用Cookie来区分不同用户会话
- 您可以通过浏览器设置随时清除本地存储的数据和管理Cookie偏好
3. 数据安全
我们重视您的数据安全并采取合理措施保护信息:
- 所有数据传输均使用HTTPS加密协议
- 您的曲线设计数据仅存储在本地浏览器中,不会自动上传到我们的服务器
- 我们定期审查和更新安全实践,以保护我们的系统和您可能提供的任何信息
- 虽然我们采取合理措施保护数据,但请注意互联网上的数据传输无法保证100%安全
4. 数据共享与披露
我们尊重您的隐私,不会出售、交易或转让您的信息:
- 我们不会与第三方共享任何个人身份信息,因为我们不收集此类信息
- 我们可能使用第三方服务提供商(如Google Analytics)帮助我们分析工具使用情况,这些服务提供商只能访问匿名聚合数据
- 我们可能在法律要求、强制执行网站政策或保护我们或他人权利、财产和安全的情况下披露信息
5. 隐私政策的更改
我们可能会不时更新本隐私政策:
- 对本政策的任何更改将在本页发布更新版本后生效
- 我们将通过更新本页顶部的"最后更新"日期来通知您任何更改
- 我们鼓励您定期查看本隐私政策以了解任何变更
- 继续使用本工具即表示您接受更新后的隐私政策
6. 联系我们
如果您对本隐私政策有任何疑问或建议,请通过以下方式联系我们:
- 电子邮件: privacy#beziercurve.net
- 我们将尽快回复您的询问,通常不超过5个工作日
重要提示
使用本工具即表示您同意本隐私政策的条款。如果您不同意这些条款,请停止使用本工具。
本隐私政策最后更新于2025年09月03日。