在颤振的弯曲的形状背景倒栽跳水

Question

我有一个列表视图,左侧是"Hero"图标.当我单击一个列表项时,它会加载下一个屏幕,其中包含文章文本和Hero图像(可以很好地/自动地动画到第二个屏幕上的正确位置).

我原本以为这是"艰难"的部分,但我现在正试图将弯曲的形状作为第二个屏幕的顶部背景.我想把它变成一个绘制的矢量形状,而不是位图,甚至让它滴到/弹回到页面上,但此刻......

我只想弄清楚如何:

1. 画一个矢量形状
2. 将它作为屏幕的背景与其他小部件在上面(见下面第二个屏幕上的紫色曲线)

Answer 1

我在这里给你的曲线形状做了一个完整的样本

我使用CustomPainter在画布上绘制,然后通过一些几何计算,我实现了弯曲的形状.

最后结果

我是怎么画的？

在编码之前和在白板上我确定了一些事情:

1. 我的画布区:
   • 我需要绘制该形状的画布尺寸(等于Flutter小部件的尺寸).
2. 我的刷子移动的方式和位置？
   • 方法:使用Path类在画布上绘制该形状所需的API是什么.例如,lineTo()表示直线,quadraticBezierTo()表示曲线.
   • 其中的意思是:我需要绘制整个形状的点(坐标)在哪里.(见上图中的黄色和绿色圆点)
3. 点(坐标)计算:
   • 我使用了一些几何方程来计算坐标.例如指向圆周长
   • 我的所有计算都取决于画布大小,这使我有一个响应的形状.

这里有完整样品!