如何在Konva的Path组件中添加贝塞尔曲线？

贝塞尔曲线分二次和三次两种，下面分别说明SVG Path和Canvas Path里的具体用法：

SVG Path 写法 #

二次贝塞尔曲线 #

• 完整指令 Q：Q [控制点X] [控制点Y] [终点X] [终点Y]，需先通过M指令定义起点
• 连续曲线用简写T：T [终点X] [终点Y]，会自动沿用前一段曲线的控制点镜像，无需重复写控制点
  示例代码：

<!-- 单段二次贝塞尔 -->
<path d="M 20 20 Q 60 120 100 20" stroke="#000" fill="none" />
<!-- 连续二次贝塞尔 -->
<path d="M 20 50 Q 60 150 100 50 T 180 50" stroke="#000" fill="none" />

三次贝塞尔曲线 #

• 完整指令 C：C [起点控制点X] [起点控制点Y] [终点控制点X] [终点控制点Y] [终点X] [终点Y]
• 连续曲线用简写S：S [终点控制点X] [终点控制点Y] [终点X] [终点Y]，自动继承前一段的终点控制点镜像作为新的起点控制点
  示例代码：

<!-- 单段三次贝塞尔 -->
<path d="M 20 20 C 40 120 80 120 100 20" stroke="#000" fill="none" />
<!-- 连续三次贝塞尔 -->
<path d="M 20 50 C 40 150 80 150 100 50 S 160 150 180 50" stroke="#000" fill="none" />

Canvas Path 写法 #

通过Canvas绘图上下文调用对应方法实现：

二次贝塞尔 #

使用quadraticCurveTo(cpX, cpY, x, y)，参数依次为控制点坐标、终点坐标，调用前需用moveTo定义起点

三次贝塞尔 #

使用bezierCurveTo(cp1X, cp1Y, cp2X, cp2Y, x, y)，参数为两个控制点坐标、终点坐标
示例代码：

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// 绘制三次贝塞尔曲线
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.bezierCurveTo(40, 120, 80, 120, 100, 20);
ctx.stroke();

// 绘制二次贝塞尔曲线
ctx.beginPath();
ctx.moveTo(20, 50);
ctx.quadraticCurveTo(60, 150, 100, 50);
ctx.stroke();

内容的提问来源于stack exchange，提问作者SandeshPnk