我正在创建自己的复选框样式。我在网上找到了我喜欢的代码,我对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" />
8ftvxx2r1#
一开始路径标记看起来很混乱,你需要关注的关于你的问题的主要标记是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,221 327,221 327,355 73,355希望这张图片能帮助解释上述数字:Outline Image唯一的补充是添加一个填充属性到路径和使用相同的值作为你的中风(#808080)。这给你相同的图像作为你的原始。不要担心这些是大数字。作为矢量图形,他们将缩小,以适应他们的容器!(For那些好奇我是如何得出这些数字的人,我把上面的图像带进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升73 139 Q186 323 105 238 143 195 186 240 351 68 391 112西班牙语上述标记为您提供:CurvedCheckBox以下是指向标记命令的链接:MarkupCommands以下是一些制作形状的示例:MakingShapes
hc8w905p2#
对我来说,将Path的StrokeLineJoin设置为Round很有帮助
Path
StrokeLineJoin
Round
2条答案
按热度按时间8ftvxx2r1#
一开始路径标记看起来很混乱,你需要关注的关于你的问题的主要标记是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,221 327,221 327,355 73,355
希望这张图片能帮助解释上述数字:Outline Image
唯一的补充是添加一个填充属性到路径和使用相同的值作为你的中风(#808080)。这给你相同的图像作为你的原始。不要担心这些是大数字。作为矢量图形,他们将缩小,以适应他们的容器!
(For那些好奇我是如何得出这些数字的人,我把上面的图像带进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升73 139 Q
186 323 105 238 143 195 186 240 351 68 391 112西班牙语
上述标记为您提供:CurvedCheckBox
以下是指向标记命令的链接:MarkupCommands
以下是一些制作形状的示例:MakingShapes
hc8w905p2#
对我来说,将
Path
的StrokeLineJoin
设置为Round
很有帮助