路径的圆角化

Question

我正在创建自己的复选框样式。我在网上找到了一段代码，我很喜欢，但我对WPF绘图不是很自信。我需要将这些角落变成圆角。如何使这些角落变得柔和？

<Path Name="InnerPath"
      Data="M31,5 L19.5,5 19.5,19.5 34.5,19.5 34.5,11.75"
      Stretch="Fill"
      Stroke="#808080" />

- Dmitrii Polianskii

---

使用矩形而不是路径，或者使用RectangleGeometry作为路径的数据。 - Clemens

除此之外，使用这些坐标设置Stretch为Fill看起来很奇怪。 - Clemens

路径数据是唯一能够做到这一点的东西。它看起来不符合您的要求，因为数据没有指示它如何做。 - Logan

是的，我知道可以通过路径数据来实现，但我写道我对WPF绘图不太自信。 - Dmitrii Polianskii

可能是XAML路径元素 - 如何制作圆角的重复问题。 - Massimiliano Kraus

Answer 1

一开始路径标记可能会让人感到相当困惑。关于您的问题，您需要关注的主要标记是M、Q、L和Z。

M标记是新路径的起点。由于您的图像包含2个元素（路径），因此您将使用2个M标记-一个用于勾号，另一个用于方框。

Q指定二次贝塞尔曲线。它需要两个点。第一个点确定拉动线的位置，第二个点是它的结束点。重要的是要注意前一个设置点标记曲线的开始。

L用于直线。这在贝塞尔曲线之后非常关键，否则会出错。显然解析器看到Q，处理前两组数字，然后看到第三组数字不与标记相关联，就会出问题。在您的情况下，使用L是因为我们正在制作一条直线。但是，我们也可以使用另一个Q来制作波浪线。

Z会关闭路径并将其连接到起点。

查看您的原始图像，所需的标记只是M和Z。您的路径数据属性值将是：

M 263,99 263,115 87,115 87,340 311,340 311,221 327,221 327,355 73,355 73,99 Z M 186,323 105,238 143,195 186,240,351,68 391,112 Z

希望这张图片能帮助解释上述数字： 轮廓图像

唯一的补充是为路径添加一个FILL属性，并使用与描边相同的值（#808080）。这将使您得到与原始图像相同的图像。不要担心这些是大数。作为基于矢量的图形，它们会缩小以适合其容器！

关于曲线...

这就是使用 Q 标记以及 L 的地方。希望下面的插图能够帮助理解。我们先看一个简单的90度角：

直角

要将它变成曲线，我们需要使用 Q 标记。如果你想画一个完美的曲线，可以使用两条线相交的点作为锚点。由于这个是一个90度角，所以很容易算出相交点的位置，也就是 (0,0)。接下来，我们需要确定曲线的起点和终点。距离锚点越远，曲线就会变得更大。在下面的插图中，我使用了50：

弯曲角度

简单来说，M 100,0 50,0 Q 0,0 0,50 L 0,100 的意思是：从点 (100,0) 开始画线，到达点 (50,0)，然后开始画一条曲线，锚点为 (0,0)，终点为 (0,50)。最后再画一条线到点 (0,100)。

希望这样就能解释如何在路径上制作曲线。一旦掌握了技巧，这实际上非常容易。通过一点创造力，路径可以实现很多事情。

有了以上的知识，我认为你需要的标记是（不要忘记添加填充属性！）：

Data="M 263,99 263,115 113,115 Q 87,115 87,139 L 87,315 Q 87,340 113,340 L 287,340 Q 311,340 311,315 L 311,221 327,221 327,315 Q 327,355 287,355 L 113,355 Q 73,355 73,315 L 73,139 Q 73,99 113,99
以上标记为您提供: CurvedCheckBox

这是一个链接到标记命令的链接: MarkupCommands

以下是一些制作形状的示例: MakingShapes

- VermontCoder

---

很抱歉我没有及时回复，因为自从我提出这个问题以来已经过了很长时间。但是我看到你花时间写这个答案，我很感激。非常感谢！ - Dmitrii Polianskii

没关系，这是一个有趣的练习，希望其他人也觉得很有收获。 - VermontCoder

Answer 2

对我来说，将Path的StrokeLineJoin设置为Round非常有帮助。

- user128440