绘制平滑的曲线

CatmulRoom

js 复制代码
function clacCatmulRoom(t: number, p0: number, p1: number, p2: number, p3: number) {
  return 0.5 *
    (
      (2 * p1) +
      (p2 - p0) * t +
      (2 * p0 - 5 * p1 + 4 * p2 - p3) * t * t +
      (3 * p1 - p0 - 3 * p2 + p3) * t * t * t
    );
}

遇到的问题,在一条长直线之后,拐弯的地方很不自然

黑色的是用户输入点,红绿点是细分后的点,感觉应该是这个曲线函数的一个缺陷。

hermite 埃尔米特曲线

在线查看

这个曲线也有缺点,点1点2前后的点,如果距离非常远,就会导致点1和点2之间的驼峰

这个主要是控制点v0、v1没有控制好,但是这个v0、v1我是根据前后点距离,乘以前后线段法向量的角平分线的垂线,如果点的距离非常均匀,这种曲线绘制出来的就发出优美。

相关推荐
旺仔小拳头..1 分钟前
HTML的布局—— DIV 与 SPAN
前端·html
T___T1 分钟前
从原生 CSS 到 Stylus:用弹性布局实现交互式图片面板
前端·css
Zyx20072 分钟前
Stylus 进阶:从“能用”到“精通”,打造企业级 CSS 架构(下篇)
前端·css
黄毛火烧雪下3 分钟前
Angular 入门项目
前端·angular
用户4099322502124 分钟前
快速入门Vue3,插值、动态绑定和避坑技巧你都搞懂了吗?
前端·ai编程·trae
CondorHero5 分钟前
Environment 源码解读
前端
残冬醉离殇7 分钟前
别再傻傻分不清!从axios、ElementPlus深入理解SDK与API的区别
前端
CodeSheep16 分钟前
稚晖君官宣,全球首个0代码机器人创作平台来了!
前端·后端·程序员
向上的车轮20 分钟前
Actix Web 入门与实战
前端·rust·actix web
Mintopia1 小时前
🧬 生物识别 + AIGC:Web端个性化服务的技术协同路径
前端·javascript·aigc