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

Question

我想在颤动中绘制以下形状：

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

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

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

标签： flutterdrawingpaintclip

Answer 1

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

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

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

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