WPF教学视频详解｜复现WPF版《英雄联盟》风格的PLAY 按键 (2) 视频内容纠正

控件名称：RiotPlayButton
作者：Vicky&James
源码链接:https://github.com/vickyqu115/riotplaybutton
教学视频（【小李趣味多】https://bit.ly/49L6dXu）

（接上一篇内容）

* 视频内容纠正

关于《英雄联盟》风格的PLAY 按键这期视频，有一位观众指出了我们视频中的一个错误，我在此做出更正和说明。

11:34 贝塞尔曲线里C不是弧线的中点吧，控制点是在线外边的

“贝塞尔曲线中，C点不是曲线的中点。控制点是在曲线外的。”

在11:34的视频里，会看到以下内容（图片与视频说明一致）。

经过重新审视，我发现确实在解释贝塞尔曲线时出现了误解。感谢这位观众的指正，现在我来进行修正。

---

首先，视频中使用的路径如下：

M 0,0 L 103,0 L 118,14 L 103,28 L 0,28 C 10,14 0,0 0,0 Z

Y轴的0,0基准反转对理解没有太大影响，请大家谅解。

通过生成的图表可以看到，C (10, 14) 控制点的位置实际上在曲线的外部，而不是中点。这正是观众指出的问题。

---

接下来，我们详细了解一下三次贝塞尔曲线的机制。

三次贝塞尔曲线需要4个点：P0, P1, P2, P3。根据当前的几何路径数据，分别映射如下：

P0: 0,28 (起点)
P1: 10,14 (控制点1)
P2: 0,0 (控制点2)
P3: 0,0 (终点)

此外，我们绘制了曲线随时间变化的过程。

蓝色线段的起点和终点随着控制点的移动而绘制出曲线。具体的可视化效果请参见这里，该博客中有很好的动画说明。

在这种情况下，使用二次贝塞尔曲线比三次贝塞尔曲线更合适，因为二次贝塞尔曲线需要的控制点更少。

三次贝塞尔曲线 (Cubic Bezier)

M 0,0 L 103,0 L 118,14 L 103,28 L 0,28 C 10,14 0,0 0,0 Z

二次贝塞尔曲线(Quadratic Bezier)

M 0,0 L 103,0 L 118,14 L 103,28 L 0,28 Q 10,14 0,0 Z

综上所述，在这种情况下使用二次贝塞尔曲线更为合适。

沟通与支持

我们随时保持沟通渠道开放。大家可以通过以下方式与我们互动：

• GitHub: 关注、Fork、Stars
• BiliBili: 一键三连
• 邮箱: james@jamesnet.dev