【问题标题】:Curve line into circle in iOS在iOS中将曲线变成圆形
【发布时间】:2014-10-21 00:09:44
【问题描述】:

我有这个想法,将直线转换为圆形,但在表格视图中拖动单元格的偏移量。

当我拖动单元格时,我希望线条围绕图像弯曲成圆形。 我在下面添加了一张图片,以帮助演示具有不同拖动偏移的不同状态。

我不确定从哪里开始,正在考虑使用 UIBezierPath 进行绘制,但不确定这是否是最佳解决方案。

【问题讨论】:

  • 我还没有尝试过,但在谷歌搜索后我发现了这个,它可能会有所帮助。可能您可以创建一个正方形,然后更改圆角半径,随着单元格被拖出而增加它。 stackoverflow.com/questions/19142759/ios-7-round-framed-button
  • 感谢@RMK-Jacob 的及时评论!不幸的是,圆角只会改变视图的角,这可以将矩形视图转换为圆形。但是,如果这有任何意义,它就不能将一条线变成一个圆。如果使用cornerRadius,它将是从角落缩小的同一条线。不过再次感谢! :)

标签: ios objective-c core-animation uiviewanimation uibezierpath


【解决方案1】:

如果您希望它具有动画效果,那么您可以为您完成工作。

曲线的核心动画基于 CGPath 对象,它是 UIBezierPath 背后的底层核心基础类。

使曲线从一种形状变为另一种形状的秘诀是使用相同数量和类型的控制点。您将无法使用任何标准的弧形或椭圆形快捷方式(它们会生成看起来像弧形的更复杂的贝塞尔曲线。)

相反,您必须从一系列相互关联的三次贝塞尔曲线中分段构建一个近似圆。您应该能够与 4 条链接的三次贝塞尔曲线相当接近,其端点线位于圆的 N/S/E/W 罗盘点,并且中间控制点在圆外均匀分布。几年前,我在网上查阅了一篇关于使用贝塞尔点近似圆的文章。我建议对此进行一些搜索。

或者,我想您可以使用 CGPath 或 UIBezier 快捷方式之一生成圆形贝塞尔曲线,然后将生成的路径解构为构成它的基元。 Erica Sadun 出色的 iOS 开发者食谱系列包括一个食谱,展示了如何将 UIBezier 路径解构为它的基元。

一旦你有了一组圆的控制点,你就需要将它们重新映射到构成你的线的控制点。 (Bezier 曲线总是经过它的起点和终点,如果将 Cubic Bezier 的内部 2 个控制点放在一条线上,它会将曲线变成一条线。)

现在您有 2 个由相同数量的贝塞尔曲线和相同数量的控制点组成的形状:一个圆和一条线。您可以通过将每个控制点移动到不同的 x/y 坐标来将线转换为圆或将圆转换为线。

然后,您也许可以在控制点的起点和终点坐标之间应用线性插值。使用用户对表格视图的拖动来生成一个从 0 到 1 的值,并将其应用于您的插值控制点值(在 0.0 时,您的控制点将位于其“直线”位置,并且您的曲线将绘制为直线线。在 1.0 时,它们将处于其圆形位置,并且您的曲线将绘制为圆形。在它们之间的点处,它们将是它们的开始位置和结束位置之间的一小部分,并且您会得到一个形状那是在一条线和一个圆之间。

一旦您弄清楚如何生成控制点以创建从直线平滑地移动到圆形的曲线,您就可以使用 Core Animation 和 CAShapeLayer 来处理它了。

如果这有意义,那么您可能会想出如何做到这一点。如果您不知道我在说什么,那么您可能已经不知所措了。

(我是一名高级 Cocoa/iOS 开发人员。我已经完成了很多 Core Animation,一旦我有了圆形贝塞尔控制点,我可能需要 3 或 4 个小时才能得到你想要的东西开始。)

想一想,使用 UIView 关键帧动画可能会简单很多。这使您可以指定所有位于所需曲线上的控制点数组,并从这些点生成平滑曲线。最好的是,它是一个 UIView 动画,它比 CAAnimation 更容易使用。

看看我在 github 上的演示项目RandomBlobs。这应该让您在使用 UIView 关键帧动画方面占得先机。你要的方法叫animateKeyframesWithDuration:delay:options:animations:completion:

基于点的关键帧动画的缺点是,有时您获得的曲线会出现您不期望或不想要的“扭结”或循环。你必须避免急转弯。不过,在绘制草图时,我认为线到圆的过渡可能适用于关键帧视图动画。

【讨论】:

  • 谢谢邓肯!我正在考虑与 UIBezier 路径的线性插值相同的事情,只是想知道是否有更简单的解决方案可以使它更容易,但我不知道。我现在已经开始工作了,稍后将为那些想要做类似事情的人添加我的代码:)
  • @NSDavidObject - 你可以从直线做曲线。如果您可以分享一些代码sn-p,将会很有帮助
  • @npk 是的,我能够做到。我稍后会尝试找到该项目,看看我是否可以分享它:)
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-02-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2017-10-07
相关资源
最近更新 更多