用贝塞尔曲线玩出来的花样简直不要太美

最新推荐文章于 2023-08-28 08:10:43 发布

岛上码农

最新推荐文章于 2023-08-28 08:10:43 发布

阅读量691

点赞数 1

分类专栏： Flutter 入门与实战 Flutter 绘图文章标签： flutter android 移动开发 ios 前端

本文链接：https://blog.csdn.net/shuijian00/article/details/125770671

版权

Flutter 入门与实战同时被 2 个专栏收录

131 篇文章 56 订阅 ¥29.90 ¥99.00

订阅专栏

超级会员免费看

Flutter 绘图

21 篇文章 2 订阅 ¥19.90 ¥99.00

订阅专栏

简介

我们在这一篇让你彻底搞懂贝塞尔曲线的原理介绍了贝塞尔曲线的实现原理，也用了二阶贝塞尔曲线来绘制爱心。本篇我们来用三阶贝塞尔曲线玩点好玩的。在开始之前，回顾一下贝塞尔曲线的原理。贝塞尔曲线其实就是用4个点控制曲线的绘制，具体过程如下面的动图所示。
三阶贝塞尔曲线绘制过程

曲线点的位置计算公式如下。

三阶贝塞尔曲线计算公式

相应的实现代码如下所示。

Offset get3OrderBezierPoint(Offset p1, Offset p2, 
                            Offset p3, Offset p4, double t) {
  var x = (1 - t) * (1 - t) * (1 - t) * p1.dx +
      3 * t * (1 - t) * (1 - t) * p2.dx +
      3 * t * t * (1 - t) * p3.dx +
      t * t * t * p4.dx;
  var y = (1 - t) * (1 - t) * (1 - t) * p1.dy +
      3 * t * (1 - t) * (1 - t) * p2.dy +
      3 * t * t * (1 - t) * p3.dy +
      t * t * t * p4.dy;