一开始路径标记可能会让人感到相当困惑。关于您的问题,您需要关注的主要标记是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
对我来说,将Path
的StrokeLineJoin
设置为Round
非常有帮助。