路径

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.您的路径数据属性值为：

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

希望这张图片有助于解释上述数字： Outline Image

唯一的补充是将FILL属性添加到Path并使用与笔划相同的值（＃808080）。这样可以获得与原始图像相同的图像。不要担心这些是大数字。作为基于矢量的图形，它们将缩小以适合其容器！

（对于那些对我如何想出这些数字感到好奇的人，我把上面的图片放到了photoshop中，将画布扩展为正方形，然后简单地在photoshop中注意每个点X，Y并使用这些数字。）

关于曲线......

这是Q标记和L一起出现的地方。希望以下插图有所帮助。这里我们有一个简单的90度角：

RightAngle

要为此抛出曲线，我们需要使用Q标记。如果你想制作一条完美的曲线，你可以使用两条线相交的点。由于这是90度角，因此很容易理解。这将是曲线被拉到的点。在上面的例子中，这将是0,0点。接下来我们需要知道曲线的起点和终点。从锚点开始，曲线越大。在下图中，我使用了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 L 73,139 Q 73,99 113,99
      Z M 186,323 105,238 143,195 186,240,351,68 391,112 Z“

以上标记为您提供： CurvedCheckBox

这是标记命令的链接： MarkupCommands

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