【问题标题】:Rounded corners for path路径的圆角
【发布时间】:2016-10-13 11:15:24
【问题描述】:

我正在创建自己的复选框样式。我在互联网上找到了我喜欢的代码,我对 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" />

【问题讨论】:

  • 使用 Rectangle 代替 Path,或 RectangleGeometry 作为 Path 的数据。
  • 除此之外,使用这些坐标将拉伸设置为填充看起来很奇怪。
  • 路径数据是唯一可以做到这一点的东西。它看起来不像你想要的那样,因为数据没有指示它。
  • 是的,我知道我可以通过路径数据做到这一点,但我写道我对 WPF 绘图没有信心。

标签: wpf wpf-controls


【解决方案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 M 186,323 105,238 143,195 186,240,351,68 391,112 Z

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

唯一的补充是向 Path 添加一个 FILL 属性并使用与您的笔划相同的值 (#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

【讨论】:

  • 很抱歉,因为很久没有问这个问题,所以没有及时回复。但我看到你花时间写这个答案,我很感激。非常感谢!
  • 不用担心。这是一个有趣的练习,希望其他人也能从中受益。
猜你喜欢
  • 2021-12-27
  • 2013-11-23
  • 2013-03-18
  • 1970-01-01
  • 2023-01-12
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多