路径的圆角 [英] Rounded corners for path
问题描述
我正在创建自己的复选框样式.我在互联网上找到了我喜欢的代码，但我对 WPF 绘图不太有信心.我需要使这些角变圆.如何使这些角落变软?
I'm creating my own checkbox style. I have found the code on the internet I like and I'm not so confident in WPF drawing. I need to make these corners rounded. How to make these corners soft?
<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" />
推荐答案
起初，路径标记看起来很混乱.关于您的问题，您需要关注的主要标记是 M、Q、L 和 Z.
At first the path markups can seem pretty confusing. The main markups you need to be concerned with regarding your question is M,Q,L, and Z.
M 是新路径的起点.由于您的图像包含 2 个元素(路径)，您将使用 2 M 个标记 - 一个用于复选标记，另一个用于框.
M is the starting point for a new path. As your image contains 2 elements (paths), you will be using 2 M markups - One for the check mark, the other for the box.
Q 表示二次贝塞尔曲线.它需要两点.第一个确定将线拉到哪里，第二个是它的终点.需要注意的是，之前的设定点标志着曲线的开始.
Q designates a Quadratic bezier curve. It needs two points. The first determines where to pull the line to and the second is it's end point. It is important to note that the previous set point marks the beginning of the curve.
L 表示直线.这在贝塞尔曲线之后至关重要，否则会引发错误.显然，解析器看到 Q，处理前两组数字，然后看到第三组与标记和 BOOM 无关.在您的情况下，由于我们正在制作一条线，因此使用了 L.但是，我们可以使用另一个 Q 来制作波浪线.
L is for a straight line. This is critical after the bezier curve otherwise it will throw an error. Evidently the parser sees the Q, handles the first two set of numbers, then sees a third that isn't tied to a markup and BOOM. In your case, the L is used since we are making a line. We could, however, use another Q to make a wavy line.
Z 将关闭一条路径并将其连接到起点.
Z will close a path and connect it to the starting point.
查看您的原始图像，唯一需要的标记是 M 和 Z.您的路径数据属性值为:
Looking at your original image, The only markups needed are M and Z. Your path data property value would be:
M 263,99 263,115 87,115 87,340 311,340 311,221327,221 327,355 73,355 73,99 ZM 186,323 105,238 143,195 186,240,351,68 391,112 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
希望这张图片有助于解释上述数字:轮廓图
Hopefully this image will help explain the above numbers: Outline Image
唯一的添加是将 FILL 属性添加到 Path 并使用与您的笔划相同的值 (#808080).这为您提供与原始图像相同的图像.不要担心这些是大数字.作为基于矢量图的图形，它们将缩小以适合其容器！
The only addition would be to add a FILL property to the Path and use the same value as your stroke (#808080). This gives you the same image as your original. Don't be concerned that these are large numbers. As vector based graphics they will scale down to fit their container!
(对于那些对我如何得出这些数字感到好奇的人，我将上面的图像放入 photoshop，将画布扩展为正方形，然后在 photoshop 中简单地记下每个点 X、Y 并使用这些数字.)
(For those curious about how I came up with these numbers, I took the above image into photoshop, expanded the canvas to make is square, then simply noted each points X,Y in photoshop and used those numbers.)
关于曲线...
这是 Q 标记和 L 标记的用武之地.希望以下插图能有所帮助.这里我们有一个简单的 90 度角:
This is where the Q markup comes in as well as the L. Hopefully the following illustrations will help. Here we have a simple 90 degree angle:
要将曲线插入其中，我们需要使用 Q 标记.如果要制作完美的曲线，可以使用两条线相交的点.因为这是一个 90 度角，所以很容易弄清楚.那将是曲线被拉到的点.在我们上面的例子中，这将是点 0,0.接下来我们需要知道曲线的起点和终点.离锚点越远，曲线越大.在下图中，我使用了 50:
To throw a curve into this, we need to use the Q markup. If you want to make a perfect curve, you would use the point where the 2 lines would intersect. As this is a 90 degree angle, that is pretty easy to figure out. That will be the point the curve is pulled to. In our example above, this would be point 0,0. We next need to know where we want the curve to start and end.The further from the anchor point, the bigger the curve. In the following illustration I used 50:
用简单的语言 M 100,0 50,0 Q 0,0 0,50 L 0,100 翻译为:从点 100,0 开始，绘制到点 50,0，从那里开始一条曲线被拉到点 0,0，并在点 0,50 结束.现在画一条线到 0,100.
In plain language M 100,0 50,0 Q 0,0 0,50 L 0,100 translates to: Staring at point 100,0, draw to point 50,0, from there begin a curve being pulled to point 0,0 and ending at point 0,50. Now draw a line to 0,100.
希望这能解释如何在路径中制作曲线.一旦你掌握了它，它实际上很容易.只需一点点创造力，你就可以用路径做很多事情.
Hopefully this explains how to make curves in a path. It's actually pretty easy once you get the hang of it. With a little creativity, you really can do a lot with paths.
考虑到上述情况，我认为您正在寻找的标记是(不要忘记添加填充属性！):
With the above in mind, the markup I think you are looking for is (DON'T FORGET TO ADD THE FILL PROPERTY!):
Data="M 263,99 263,115 113,115 Q 87,115 87,139 L 87,315Q 87,340 113,340 L 287,340 Q 311,340 311,315 L 311,221327,221 327,315 Q 327,355 287,355 L 113,355 Q 73,35573,315 L 73,139 Q 73,99 113,99
Z M 186,323 105,238 143,195 186,240,351,68 391,112 Z"
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
Z M 186,323 105,238 143,195 186,240,351,68 391,112 Z"
以上标记为您提供:CurvedCheckBox
这是标记命令的链接:MarkupCommands
以下是一些制作形状的示例:制作形状
Here are some examples of making shapes: MakingShapes
这篇关于路径的圆角的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
