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

Question

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

如您所见，它以带有直边的椭圆形开始，然后弯曲使其变窄。 然后，它变成一个矩形。 在它的内部，它的线条开始是细的，然后逐渐变粗。 将第一条线弯曲以匹配形状的半径，然后将其转换为矩形。

我将如何在颤抖中画出这个？ 低于此形状的较薄部分。

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

Answer 1

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

但是，如果要与对象一起进行任何形式的动画处理，则动画将变得更加复杂。 然后有两种选择-第一种是将SVG路径费力地转换为画布绘制操作（有一些工具可以对Javascript Canvas对象执行此操作，这些工具与抖动的工具足够接近，可以在其中粘贴路径，然后运行快速搜索/替换以获取所需的信息）。 我已经完成了我的应用中使用的一些图标的工作，这些图标在制作svg插件之前就需要使用。 但是，如果这样做，则可以完全控制其绘制方式-可以根据需要使用渐变色，颜色等。

您也可以直接使用画布直接绘制它，而无需先使用SVG。 看一下CustomPainter和CustomPaint 。 热重装将为您提供帮助，但是如果您以前没有使用过Beziers等，则学习曲线会有些许变化（双关语是故意的）。

但是，这将是一个过程，可能不值得，因为那里有一个更简单的解决方案。 看一下新发布的Flare-主要缺点是，除非您愿意付款，否则艺术品将是公开的（但您可以阻止人们对其进行分叉）。 尽管我还没有广泛使用它，但它似乎确实是为此类事情量身定制的。