讲师中心 微信公众号
AI工具推荐 视频效率加速

如何计算二次贝塞尔曲线的控制点

老明吖_2045

老明吖_2045

发布时间:2026-01-23 16:23:00

|

900人浏览过

|

来源于php中文网

原创

如何计算二次贝塞尔曲线的控制点

已知曲线起点、终点和曲线上某一点(如顶点)及其对应参数 t,可通过解析贝塞尔公式反推唯一控制点坐标,本文提供完整推导、可直接调用的函数及使用注意事项。

在图形渲染与图布局(如力导向图、节点链接图)中,常需用二次贝塞尔曲线实现平滑避让效果——例如当连接线经过某节点区域时,让曲线“拱起”绕开该节点。此时,你已知:

  • 起点 $ P_0 = (s_x, s_y) $(链路起点)
  • 终点 $ P_2 = (e_x, e_y) $(链路终点)
  • 曲线上某一关键点 $ B(t) = (t_x, t_y) $(如你计算出的“顶部避让点”)
  • 对应参数 $ t \in (0,1) $(非端点,通常取 0.5 可得中点,但你已通过距离比例精确计算)

二次贝塞尔曲线的标准参数方程为:
$$ B(t) = (1-t)^2 P_0 + 2t(1-t) P_1 + t^2 P_2 $$
其中 $ P_1 = (x, y) $ 即待求控制点。将上式按坐标分量展开并整理,解出 $ P_1 $:

$$ t_x = (1-t)^2 s_x + 2t(1-t) x + t^2 e_x \ \Rightarrow x = \frac{t_x - (1-t)^2 s_x - t^2 e_x}{2t(1-t)} $$

同理对 y 坐标。因此得到稳定、无歧义的解析解(前提是 $ t \neq 0 $ 且 $ t \neq 1 $):

export function findControlPoint(
  s_x: number, s_y: number,   // 起点
  t_x: number, t_y: number,   // 曲线上已知点(如顶点)
  e_x: number, e_y: number,   // 终点
  t: number                   // 该点对应的参数值,0 < t < 1
): { x: number; y: number } {
  const inv = 1 - t;
  const denominator = 2 * inv * t;

  // 防止除零(t 接近 0 或 1 时数值不稳定)
  if (Math.abs(denominator) < 1e-8) {
    throw new Error(`Invalid t value: ${t}. Must be strictly between 0 and 1.`);
  }

  return {
    x: (t_x - inv * inv * s_x - t * t * e_x) / denominator,
    y: (t_y - inv * inv * s_y - t * t * e_y) / denominator,
  };
}

✅ 使用示例(配合你的避让逻辑):

Blender Geometry Nodes Script Generator
Blender Geometry Nodes Script Generator

生成Blender Python (bpy)脚本,该脚本使用node_groups API和GeometryNodeTree接口程序化地创建几何节点修改器树,用于参数化3D资产生成。

下载
const start = { x: link.from.x, y: link.from.y };
const end   = { x: link.to.x,   y: link.to.y };
const top   = { 
  x: node.x + node.radius * Math.sin(angle) + 10 * Math.sign(Math.sin(angle)),
  y: node.y + node.radius * Math.cos(angle) + 10 * Math.sign(Math.cos(angle))
};
const t = /* 你已计算的距离比值 */;

const control = findControlPoint(
  start.x, start.y,
  top.x, top.y,
  end.x, end.y,
  t
);

// 绘制二次贝塞尔曲线: moveTo(start) → quadraticCurveTo(control, end)

⚠️ 关键注意事项:

  • t 必须严格介于 0 和 1 之间:若 t=0 或 t=1,分母为零,且此时已知点即为端点,无法唯一确定控制点;
  • 几何合理性校验:所得控制点可能使曲线“反向弯曲”,建议在可视化前检查曲率方向(例如通过叉积判断 $ (P_1 - P_0) \times (P_2 - P_1) $ 符号);
  • 性能优化:该函数为纯数学计算,无副作用,可放心用于高频图更新场景(如拖拽节点时实时重算);
  • 扩展性提示:若需更高自由度(如强制水平/垂直切线),可在控制点基础上施加约束投影,但本解已满足绝大多数避让需求。

掌握此方法后,你不仅能精准生成绕开节点的平滑链接,还可将其泛化至动态路径规划、动画轨迹插值等场景——核心思想始终是:从参数化定义出发,逆向求解自由变量。

热门AI工具

更多
创客贴AI

创客贴AI是一款AI图像与设计工具,AI辅助的智能在线设计工具。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

Loomy
Loomy Hot

一款AI工具,主要用于科大讯飞发布的桌面级 AI 助理,比 OpenClaw 更易用、更安全!,适合需要提升相关任务效率的用户。

火山引擎

火山引擎是一款面向企业的云计算与AI服务平台。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

PixPix
PixPix Hot

PixPix是一款面向电商视觉生产的AI商品图生成工具。

SkildArt
SkildArt Hot

SkildArt是一款AI文本写作工具,一站式 AI 视觉创作平台。

讯飞智文

一款面向学习和办公场景的AI文档创作工具,可辅助生成PPT与Word文档,提高资料整理和内容制作效率。

相关专题

更多
PHP 高并发与性能优化
PHP 高并发与性能优化

本专题聚焦 PHP 在高并发场景下的性能优化与系统调优,内容涵盖 Nginx 与 PHP-FPM 优化、Opcode 缓存、Redis/Memcached 应用、异步任务队列、数据库优化、代码性能分析与瓶颈排查。通过实战案例(如高并发接口优化、缓存系统设计、秒杀活动实现),帮助学习者掌握 构建高性能PHP后端系统的核心能力。

19553

2025.10.16

PHP 数据库操作与性能优化
PHP 数据库操作与性能优化

本专题聚焦于PHP在数据库开发中的核心应用,详细讲解PDO与MySQLi的使用方法、预处理语句、事务控制与安全防注入策略。同时深入分析SQL查询优化、索引设计、慢查询排查等性能提升手段。通过实战案例帮助开发者构建高效、安全、可扩展的PHP数据库应用系统。

453

2025.11.13

JavaScript 性能优化与前端调优
JavaScript 性能优化与前端调优

本专题系统讲解 JavaScript 性能优化的核心技术,涵盖页面加载优化、异步编程、内存管理、事件代理、代码分割、懒加载、浏览器缓存机制等。通过多个实际项目示例,帮助开发者掌握 如何通过前端调优提升网站性能,减少加载时间,提高用户体验与页面响应速度。

348

2025.12.30

JavaScript浏览器渲染机制与前端性能优化实践
JavaScript浏览器渲染机制与前端性能优化实践

本专题围绕 JavaScript 在浏览器中的执行与渲染机制展开,系统讲解 DOM 构建、CSSOM 解析、重排与重绘原理,以及关键渲染路径优化方法。内容涵盖事件循环机制、异步任务调度、资源加载优化、代码拆分与懒加载等性能优化策略。通过真实前端项目案例,帮助开发者理解浏览器底层工作原理,并掌握提升网页加载速度与交互体验的实用技巧。

343

2026.03.06

宝塔面板Nginx性能优化与高并发配置实践
宝塔面板Nginx性能优化与高并发配置实践

本专题围绕宝塔环境下的 Nginx 优化展开,深入讲解缓存策略、连接数调优、Gzip 压缩、静态资源加速及反向代理配置。帮助用户提升网站访问速度与并发处理能力。

1076

2026.03.25

宝塔面板数据库管理与MySQL性能优化实践
宝塔面板数据库管理与MySQL性能优化实践

本专题围绕宝塔面板中的数据库管理功能展开,系统讲解 MySQL 安装配置、数据库创建与权限管理、慢查询分析及性能优化方法。内容涵盖索引优化、连接数调优、缓存机制配置以及数据库备份策略。通过实操讲解,帮助开发者提升数据库运行效率与稳定性。

265

2026.04.07

DBeaver怎么导入数据
DBeaver怎么导入数据

DBeaver数据导入专题,整理Excel、CSV、SQL、TXT等常见文件的数据导入方法,涵盖目标数据库选择、数据表创建、字段映射、数据类型设置及导入参数配置等操作,帮助用户将本地文件中的数据写入数据库,并了解批量导入、重复数据处理和导入失败等常见问题的解决方法。

0

2026.11.05

DBeaver安全防护教程大全
DBeaver安全防护教程大全

DBeaver安全防护专题,围绕数据库连接安全、账号密码保护和访问权限管理展开,整理SSL/TLS加密连接、SSH隧道、数据库凭据保存及证书验证等配置方法,同时介绍敏感信息保护、远程连接风险和高权限账号使用等注意事项,帮助用户提高数据库日常管理的安全性。

0

2026.11.05

DBeaver连接创建与配置教程
DBeaver连接创建与配置教程

本专题聚焦DBeaver数据库连接配置与管理,覆盖从新建连接、选择数据库类型到填写连接参数和验证连接的完整流程。针对MySQL、PostgreSQL、SQL Server等常见数据库,整理相应的连接设置方法,并提供驱动缺失、认证失败和连接异常等问题的排查方向。

0

2026.11.04

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WebSocket手册
WebSocket手册

共0课时 | 0人学习

HTML5/CSS3/JavaScript/ES6入门课程
HTML5/CSS3/JavaScript/ES6入门课程

共102课时 | 11万人学习

前端基础到实战(HTML5+CSS3+ES6+NPM)
前端基础到实战(HTML5+CSS3+ES6+NPM)

共162课时 | 29万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn