在以下屏幕截图中:



当您拖动单词气球的尾巴(从气球到人嘴的东西)时,形状就会弯曲(如图中两个气球尾巴之间的差异所示)。我想知道,这是怎么做的?我假设您需要从CGPath开始并做一些事情,有人碰巧知道这是什么吗?

更新:所以,如果我想弯曲以下形状:



我将使用以下代码:

CGPathAddCurveToPoint(mutablePath, NULL, x1, y1, x2, y2 + constant, x5, y5);
CGPathAddCurveToPoint(mutablePath, NULL, x3, y3, x4, y4 + constant, x5, y5);


常数在哪里重新调整点2和点4的y位置以形成曲线?

最佳答案

您需要利用以下事实:从数学上讲,直线段只是一种曲线段。

(比听起来容易,相信我。)

贝塞尔曲线路段具有一种称为``顺序''的东西,它实际上确定了路段中有多少个点,而不计算您来自的点。


直线段是一阶曲线,这意味着它仅具有终点。这些“曲线”始终是直线,因为没有要向其弯曲的控制点。
二次曲线是二阶曲线(一个控制点加上目标位置)。
三次曲线是三阶曲线(两个控制点)。
(数学对此没有任何限制,但Quartz到此为止。如果不滚动自己的光栅化器,则没有四阶曲线。)


这很重要,因为任何低阶曲线(包括直线)都可以表示为高阶曲线。

那么,秘密?

即使是直尾巴,也要使用曲线。

(即,是三次曲线,因为您希望曲线沿两个不同的方向行进:一个或多或少地进入尾巴,而另一个则或多或少地沿着气球边缘。)

从尾巴底部的两个点中的每个点,您希望其中一个控制点位于目标的一半左右。这是无条件的。

每个控制点的方向为您提供三个选择:

直尾



注意沿着图像垂直中心的蓝线的两个控制点。

请注意,这两个控制点的方向相对于其连接的基点。它们实际上是在与笔尖成一直线的方向上朝着笔尖向内倾斜。

斜尾



在此,尖端不再位于两个基点之间的水平位置。控制点已经移动,但只能遵循:每个控制点仍位于相应基点和尖端之间的直线的一半。

弯曲的尾巴



对于弯曲的尾巴,可以移动尖端,但是将控制点保持在与直尾巴相同的位置。因此,尾巴笔直开始(跟随控制点),但是随着它离基点越来越远,它们的影响逐渐减弱,尾巴开始向尖端弯曲。

用视觉上的描述比用代码描述要容易得多,因此您可能要考虑使用PaintCode或Opacity之类的东西使用钢笔工具绘制各种尾巴,然后查看它们为其生成的代码是什么样的。

关于iphone - 给定CGPath,如何使其弯曲?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/16763695/

10-09 02:44