路径的圆角

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 263115 87115 87340 311340 311221 327221 327355 73355 73,99 ZM 186323 105238 143195 186,240,351,68 391112ž

希望这张图片有助于解释上述数字: 大纲图片

唯一的补充是将一个FILL属性添加到Path并使用与笔划相同的值(#808080).这样可以获得与原始图像相同的图像.不要担心这些是大数字.作为基于矢量的图形,它们将缩小以适应其容器!

(对于那些好奇我怎么想出这些数字,我把上面的图片到Photoshop,扩大画布,使被平方,然后简单地记下的每个点X,Y在Photoshop和使用这些数字.)

关于曲线......

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

RightAngle解决方案

为此,我们需要使用Q标记.如果你想制作一条完美的曲线,你可以使用两条线相交的点.由于这是90度角,因此很容易理解.这将是曲线被拉到的点.在上面的例子中,这将是0,0点.接下来我们需要知道曲线的起点和终点.从锚点开始,曲线越大.在下图中我使用了50:

CurvedAngle

在简单的语言为100,0 50,0 Q 0,0 0,50大号0,100翻译为:在点100.0凝望,抽奖点50.0,从那里开始的曲线被拉到0,0点和结束在点0,50.现在画一条线到0,100.

希望这能解释如何在路径中制作曲线.一旦掌握了它,它实际上非常容易.有了一点创造力,你真的可以用路径做很多事情.

考虑到上述情况,我认为您正在寻找的标记是(不要忘记添加填充物!):

数据="M 263,99 263115 113115 Q 87115 87139大号87315 Q 87340 113340大号287340 Q 311340 311315大号311221 327221 327315 327355 Q大号287355 113355 Q 73355 73315大号73139 Q 73,99 113,99
ZM 186323 105238 143195 186,240,351,68 391,112 Z"

上面的标记为您提供: CurvedCheckBox

这是标记命令的链接: MarkupCommands

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