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

Question

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

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

我该如何在颤抖中画出这个？在此形状的较薄部分下面。

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

Answer 1

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

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

您也可以直接使用画布直接绘制它，而无需先使用SVG。看一下flutter svg plugin和CustomPainter。热重装将为您提供帮助，但是如果您以前没有使用Beziers等，将会有点学习困难（双关语是故意的）。

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