给定一个CGPath，如何使它曲线？ [英] Given a CGPath, how to make it curve?
问题描述
在以下屏幕截图中：
当你拖动字气球的尾部（从气球连接到人的嘴），形状曲线图中两个气球尾的差异）。我想知道，这是怎么做的？我假设你需要从一个CGPath开始做一些事情，有没有人知道这是什么？
更新：所以如果我想曲线以下形状：
我会使用下面的代码：
CGPathAddCurveToPoint（mutablePath， x1，y1，x2，y2 + constant，x5，y5）;
CGPathAddCurveToPoint（mutablePath，NULL，x3，y3，x4，y4 + constant，x5，y5）;
常数重新调整点2和点4的y位置以形成曲线？
您需要利用一个事实，即在数学上，直线段只是一种曲线段。
（比我听起来容易，相信我。）
Bézier路径段有一些叫做order的东西，
- 直线段是一阶曲线，意味着它只有目的地点。
- 二次曲线是二阶曲线（一个控制点加目的地）。
- 立方曲线是三阶曲线（两个控制点）。
- （数学对此没有任何限制， ）
这很重要，因为任何低阶曲线 - 包括直线 - 可以表示为高阶曲线。
那么，秘密？
对于直线尾，使用曲线
。（即，一个三次曲线，因为您希望曲线沿两个不同的方向：一个，或多或少进入尾巴，另一个，或多或少沿着气球的边缘。）
从尾部，你想要一个控制点大约到目的地的一半。
每个控制点的方向提供三个选项：
直接尾巴
注意沿着图像垂直中心蓝线的两个控制点。
注意这两个控制点相对于它连接的基点的方向。
斜尾
这里，尖点不再在两个基点之间水平。
弯曲的尾巴
>
对于弯曲的尾巴，您可以移动尖端，但是将控制点保持在与直尾相同的位置。因此，尾巴开始直出（跟随控制点），但随着它离基点越来越远，它们的影响消失，尾巴开始向尖端弯曲。
这比在代码中更容易描述，所以你可以考虑使用PaintCode或者Opacity来使用笔工具绘制每种尾巴，然后看看它们为它们生成的代码喜欢。
In the following screen shot:
when you drag the tail of the word balloon (the thing that connects from the balloon to the persons mouth), the shape curves (as illustrated by the difference between the two balloon tails in the picture). I'm wondering, how is this done? I'm assuming you need to start with a CGPath and do something to it, does anyone happen to know what this is?
Update: So if I wanted to curve the following shape:
Would I use the following code:
CGPathAddCurveToPoint(mutablePath, NULL, x1, y1, x2, y2 + constant, x5, y5);
CGPathAddCurveToPoint(mutablePath, NULL, x3, y3, x4, y4 + constant, x5, y5);
Where the constant readjusts the y position of point 2 and point 4 to make the curve?
You need to exploit the fact that, mathematically, a straight-line segment is just a kind of curve segment.
(It's easier than it sounds, trust me.)
Bézier path segments have something called "order" that essentially determines how many points there are in the segment, not counting the point you're coming from.
- A straight-line segment is a first-order curve, meaning that it only has the destination point. These "curves" are always straight lines because there are no control points to curve toward.
- Quadratic curves are second-order curves (one control point plus the destination).
- Cubic curves are third-order curves (two control points).
- (The math doesn't put any limit on this, but Quartz stops here. No fourth-order curves for you without rolling your own rasterizer.)
This matters because any lower-order curve—including a straight line—can be expressed as a higher-order curve.
So, the secret?
For even a straight tail, use a curve.
(Namely, a cubic curve, since you want the curve going in two different directions: One, more or less into the tail, and the other, more or less along the edge of the balloon.)
From each of the two points at the base of the tail, you want one of the control points to be about halfway to the destination. This much is unconditional.
The direction of each of the control points gives you three options:
The straight-out tail
Notice the two control points along the blue line at the vertical center of the image.
Notice the direction of these two control points, relative to the base point it's connected to. They are angled inward, toward the tip—indeed, exactly on the straight line to the tip.
The oblique tail
Here, the tip point is no longer horizontally between the two base points. The control points have moved, but only to follow: each one is still halfway along the straight line between the corresponding base point and the tip.
The curved tail
For a curved tail, you move the tip, but you keep the control points at the same position as for a straight tail. Thus, the tail starts out straight out (following the control points), but as it gets farther from the base points, their influence wanes, and the tail begins curving toward the tip.
This is a lot easier to describe visually than to put into code, so you may want to consider using something like PaintCode or Opacity to draw each kind of tail using a pen tool and then see what the code they generate for it looks like.
这篇关于给定一个CGPath，如何使它曲线？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
