如何通过底部中心旋转图像?
Posted
技术标签:
【中文标题】如何通过底部中心旋转图像?【英文标题】:How to rotate an image by its bottom center? 【发布时间】:2013-08-18 23:10:31 【问题描述】:我尝试通过将视图层的 anchorPoint 属性设置为CGPointMake(0.5, 1)
来旋转图像的底部中心。它确实基于底部中心旋转,但是图像视图底部中心被平移到图像视图 center 位置,因此整个图像被平移了图像高度的一半。如何让图像视图保持其中心但仍然旋转它的底部中心?
以前有人遇到过这个问题吗?
大家好,这里有一个图片演示我希望如何在图像上进行旋转!
这是未转换的原始图像! 如您所见,我在图像的底部中心放置了一个红点。
这是旋转后的图像。图像已经顺时针旋转了几度。这已经被它的中心旋转了,这又不是我想要的!!
应用 Calebs answer 中发布的变换后获得的图像。注意:变换应用于包含上述垂直图像的图像视图!如您所见,旋转中的缺陷底部中心已经上升,甚至旋转不同。它需要旋转 180 度,整个图像向上平移了一段距离。
重申一下,我只希望图像像时钟的指针一样旋转,但围绕其底部中心旋转
谢谢!
【问题讨论】:
您能否发布您希望它如何工作以及实际如何工作的图片? (会更容易让大家理解) 创建一个改变您的旋转角度的滑块可能会有所帮助,从零开始,然后拖动滑块以查看转换是如何偏离目标的。 @PeterHosey 会这样做的! 【参考方案1】:假设您要旋转绘制图像的视图,通常的方法是由三个单独的矩阵组成一个变换矩阵。第一个将图像向左平移其宽度的一半。第二个旋转视图。第三个将图像向右平移其宽度的一半(即,它是第一个的倒数)。当你把这三个放在一起时,你会得到一个矩阵,它围绕它的底部中心旋转图像。
例如,如果您有:
CGFloat x = imageWidth/2.0;
CGFloat r = 1.0; // some value in radians;
您可以像这样设置转换:
CGAffineTransform t1 = CGAffineTransformMakeTranslation(-x, 0);
CGAffineTransform t2 = CGAffineTransformRotate(t1, r);
CGAffineTransform t3 = CGAffineTransformTranslate(t2, x, 0);
t3
是最终的转换,将在一个步骤中进行平移、旋转和平移。如果您将t3
设置为图像视图的变换,您会发现视图围绕底部中心旋转了1.0 弧度(或您设置r
的任何值)。
除了纠正我之前的错误,Peter Hosey 的评论指出另一个选择是旋转图层而不是视图。我认为这不是您要查找的内容,但如果是,您应该知道图层上的转换发生在它的 anchorPoint
上,默认情况下设置为其边界矩形的中心。要围绕边界矩形的底部中心旋转,您可以先将锚点设置为底部中心,然后应用旋转变换。 (请注意,图层的transform
属性是CATransform3D
;如果要使用上述仿射变换,请使用setAffineTransform:
方法。)
【讨论】:
通常情况下,您会通过向左而不是向上平移(然后向右而不是向下,最后进行反向平移)来围绕底部中心旋转。您是否因为 Core Animation 的anchorPoint
而建议垂直翻译?
@PeterHosey——你说得对。称之为暂时的疯狂——将视图的中心视为原点。在这方面,我已经确定了我的答案。我没有考虑旋转图层,但这是一个很好的观点,所以我也添加了这种可能性。感谢您提供非常有用的评论。
不客气。我对 Core Animation 的经验很少,因此我的措辞——据我所知,这可能就是你的意思。但是,既然您提到旋转图层,这让我想起了我不久前看到的一些事情:您可以使用 KVC 旋转图层,而无需进行自己的变换。例如,[layer setValue:@((M_PI*2.0)/6.0) forKey:@"transform.rotation.z"]
(未经测试的代码)应该绕 Z 轴旋转六分之一的圆。 developer.apple.com/library/ios/documentation/Cocoa/Conceptual/…
我认为OP想要围绕底部中心点旋转的事实是他想要旋转整个视图的线索。围绕底部中心旋转图层会很快导致大部分图像旋转到视图的可见部分之外——180° 旋转会完全隐藏它,除非图层中的图像大于视图。不过,这是关于使用 KVC 的一个很好的提示!再次感谢。
@Mr.Anonymous:你在旋转中使用了什么角度?确保不要混淆弧度和度数;你给CGAffineTransformRotate
的角度必须是弧度。以上是关于如何通过底部中心旋转图像?的主要内容,如果未能解决你的问题,请参考以下文章