wpf - 路径的圆角

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" />

Answer 1

起初，路径标记看起来非常困惑。关于您的问题，您需要关注的主要标记是 M、Q、L 和 Z。

M是新路径的起点。由于您的图像包含 2 个元素(路径)，因此您将使用 2 M 个标记 - 一个用于复选标记，另一个用于框。

Q 表示二次贝塞尔曲线。需要两点。第一个决定将线拉到哪里，第二个决定线的终点。值得注意的是，之前的设定点标志着曲线的开始。

L 代表直线。这在贝塞尔曲线之后至关重要，否则会引发错误。显然，解析器看到 Q，处理前两组数字，然后看到与标记和 BOOM 无关的第三组数字。在你的例子中，因为我们正在画一条线，所以使用了L。但是，我们可以使用另一个 Q 来制作一条波浪线。

Z 将闭合一条路径并将其连接到起点。

查看您的原始图像，唯一需要的标记是 M 和 Z。您的路径数据属性值为:

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

希望这张图片能帮助解释上面的数字: Outline Image

唯一的补充是向路径添加 FILL 属性并使用与笔画相同的值 (#808080)。这将为您提供与原始图像相同的图像。不要担心这些数字很大。作为基于矢量的图形，它们将缩小以适合其容器!

(对于那些好奇我是如何得出这些数字的人，我将上面的图像放入 Photoshop 中，将 Canvas 扩展为正方形，然后在 Photoshop 中简单地记下每个点 X、Y 并使用这些数字。)

关于曲线...

这就是 Q 标记和 L 标记的用武之地。希望以下插图能有所帮助。这里我们有一个简单的 90 度角:

RightAngle

要在其中添加一条曲线，我们需要使用 Q 标记。如果你想制作一条完美的曲线，你可以使用两条线相交的点。因为这是一个 90 度角，所以很容易算出来。这将是曲线被拉到的点。在上面的示例中，这将是点 0,0。接下来我们需要知道曲线在哪里开始和结束。距离 anchor 越远，曲线越大。在下图中我使用了 50:

CurvedAngle

用简单语言来说，M 100,0 50,0 Q 0,0 0,50 L 0,100 翻译为:盯着点 100,0，绘制到点 50,0，从那里开始一条曲线被拉到点 0,0，并在点 0,50 结束。现在画一条线到 0,100。

希望这能解释如何在路径中制作曲线。一旦你掌握了它的窍门，这实际上非常容易。只要发挥一点创造力，您确实可以利用路径做很多事情。

考虑到上述内容，我认为您正在寻找的标记是(不要忘记添加填充属性!):

数据=“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 左 73,139 右 73,99 113,99
Z 米 186,323 105,238 143,195 186,240,351,68 391,112 Z"

上面的标记为您提供: CurvedCheckBox

这是标记命令的链接: MarkupCommands

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