react-native - 如何使反应原生 svg 路径更平滑

Question

我正在使用 react native 创建一个带有图像编辑器的移动应用程序。
我使用 react native svg 在图像上绘制线条，但它输出锐边（如图所示），因为我只是使用 LineTo (L) 连接点。
你们对如何使路径更顺畅有任何想法吗？
我已经将 strokeLineCap 和 strokeLineJoin 设置为四舍五入。

标签： react-nativesvgexpo

Answer 1

为了让您的编辑器有机会绘制平滑过渡的线条，您需要为其添加绘制贝塞尔曲线的功能。

例如，正如@Peter Collingridge 的Bezier Curve Generator所做的那样

使用贝塞尔曲线，您的曲线将如下所示

<svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="50%" height="50%" viewBox="0 0 988 1132" preserveAspectRatio="xMinYMin meet">
 
  <path  d="m572.1 38c0 0-31.9-1.7-46 4.6-61.6 27.5-108 83.2-149.6 136.4-38 48.6-66.9 104.9-88.2 162.8-21.7 59.1-35.4 122-39 184.8-2.5 43.1-2 88 11.9 128.9 16.3 48.1 41.6 97.2 81.4 128.9 46.9 37.3 109.8 56.4 169.6 59.4 59.8 3 119.4-19.3 174.7-42.4 23.9-10 46.2-23 66.1-40.7 19.9-17.8 35.6-40.6 47.5-64.4 12.4-24.8 22.1-52 23.7-79.7 1.4-23.5-1.5-48.4-11.9-69.5-7.7-15.8-16.9-30.2-35.6-39-35.4-16.7-80.4-18.6-117-5.1-96.4 35.6-205.4 182.9-225.5 210.3-22.1 30.1-72.2 126.1-93.3 195-8.9 29.2-11.7 60-13.4 90.5-0.6 12.2 1.5 36.7 1.5 36.7" style="fill:none;stroke-width:8;stroke:#e91d1d; stroke-linecap:round"/>
</svg>