如何使用颤振绘制自定义形状的小部件

Question

我想在flutter中画出下面的形状：

如您所见，它以一种带有直边的椭圆形开始，然后通过弯曲使其变窄。然后它进入一个矩形。在它里面，它的线条开始很细，然后逐渐变粗。第一条线弯曲以匹配形状的半径，然后它们变成矩形。

我将如何在颤动中绘制这个？在这个形状较薄的部分下方。

编辑： 抱歉，忘了说我希望能够控制红色形状的颜色。黑色形状将是永久性的，根据状态，红色形状将是不同的颜色。

Answer 1

这看起来像是在 SVG 中最容易完成的事情，使用某种专门用于此目的的工具 - 我个人使用 Inkscape，尽管它在 svg 文件中创建了很多垃圾（我使用 SVGOMG 将其删除） .在 Inkscape 中您必须小心，以确保它不会创建不必要的分组或使用变换，而不是直接设置坐标。但是您应该可以使用flutter svg plugin 在您的应用中呈现它。

但是，如果您想要与对象一起制作任何类型的动画，那么它会变得更加复杂。那么有两个选项 - 第一个是将您的 SVG 路径转换为画布绘制操作（有一些工具可以为 Javascript Canvas 对象执行此操作，它们与颤动的对象足够接近，您可以将路径粘贴到其中，然后运行快速搜索/替换以获得颤动所需的内容）。在制作 svg 插件之前，我已经使用我的应用程序中使用的一些图标来做到这一点。但如果你这样做了，那么你就可以完全控制如何绘制它——你可以随意使用渐变、颜色等。

您也可以直接使用画布绘制它，而无需先使用 SVG。看看CustomPainter 和CustomPaint。热重载会帮助你，但如果你以前没有使用过 Beziers 等，这将是一个学习曲线（有点双关语）。

但是，这将是一个过程，并且可能不值得，因为那里有更简单的解决方案。看看newly re-announced Flare——主要的缺点是除非你想付钱，否则你的作品将是公开的（但你可以阻止人们分叉它）。虽然我还没有广泛使用它，但它似乎是为这类事情量身定做的。