颤振中的弯曲形状背景标题

Question

我有一个列表视图，左侧带有“英雄”图标。当我单击一个列表项时，它会在下一个屏幕上加载文章文本和Hero图像（它们会很好地/自动地动画到第二个屏幕上的正确位置）。

我本以为那是“艰难”的部分，但是我现在正试图将弯曲形状作为第二个屏幕的顶部背景。我想将其绘制为矢量形状，而不是位图，甚至将其滴落/反弹到页面上，但是此刻...

我只是想找出方法：

1. 绘制矢量形状
2. 将其作为屏幕背景，其他小部件放在顶部（请参见下面第二个屏幕上的紫色曲线）

Answer 1

我根据要旨here

为您的弯曲形状制作了完整的样本

我用CustomPainter在画布上绘画，然后通过一些几何计算，获得了弯曲的形状。

最终结果

我怎么画的？

在编码之前和在白板上，我确定了一些事项：

1. 我的画布区域：
   • 我需要绘制该形状的画布尺寸（等于Flutter小部件的尺寸）。
2. 我的笔刷如何移动以及在哪里移动？
   • 这意味着什么：我需要使用Path类在画布上绘制该形状的API。 例如lineTo()代表直线，quadraticBezierTo()代表曲线。
   • where表示：我需要绘制整体形状的点（坐标）在哪里。 （请参见上图中的黄色和绿色圆点）
3. 点（坐标）计算：
   • 我使用了一些几何方程来计算坐标。例如Point on a circle’s circumference
   • 我所有的计算都取决于画布的尺寸，这给了我一个灵敏的形状。

Full sample here!