在写这个问题之前,我已经
但是,我仍然难以理解如何在 图层 上进行基本转换。寻找用于平移,旋转和缩放的解释和简单示例非常困难。
今天,我终于决定坐下来,进行测试项目,然后找出答案。我的答案如下。
笔记:
您可以在图层上进行多种不同的转换,但是基本的转换是
要对进行转换CALayer,您可以将图层的transform属性设置为CATransform3D类型。例如,要翻译图层,您可以执行以下操作:
CALayer
transform
CATransform3D
myLayer.transform = CATransform3DMakeTranslation(20, 30, 0)
这个词Make是在名称中使用创建初始转换:CATransform3D 做 翻译。随后应用的转换会忽略Make。例如,参见此轮换后跟翻译:
Make
let rotation = CATransform3DMakeRotation(CGFloat.pi * 30.0 / 180.0, 20, 20, 0) myLayer.transform = CATransform3DTranslate(rotation, 20, 30, 0)
现在我们已经有了进行转换的基础,让我们看一下如何进行转换的一些示例。不过,首先,我将展示如何设置项目,以防您也想玩这个项目。
对于以下示例,我设置了SingleViewApplication,并UIView在情节提要中添加了具有浅蓝色背景的。我使用以下代码将视图连接到视图控制器:
UIView
import UIKit class ViewController: UIViewController { var myLayer = CATextLayer() @IBOutlet weak var myView: UIView! override func viewDidLoad() { super.viewDidLoad() // setup the sublayer addSubLayer() // do the transform transformExample() } func addSubLayer() { myLayer.frame = CGRect(x: 0, y: 0, width: 100, height: 40) myLayer.backgroundColor = UIColor.blue.cgColor myLayer.string = "Hello" myView.layer.addSublayer(myLayer) } //******** Replace this function with the examples below ******** func transformExample() { // add transform code here ... } }
有很多不同的类型CALayer,但我选择使用,CATextLayer以便使变换在视觉上更加清晰。
CATextLayer
平移变换将移动图层。基本语法是
CATransform3DMakeTranslation(tx: CGFloat, ty: CGFloat, tz: CGFloat)
其中txx坐标ty的变化是y tz的变化是z的变化。
tx
ty
tz
例
在iOS中,坐标系的原点位于左上角,因此,如果我们想将图层向右移动90点,向下移动50点,则可以执行以下操作:
myLayer.transform = CATransform3DMakeTranslation(90, 50, 0)
笔记
transformExample()
0
比例转换会拉伸或压缩图层。基本语法是
CATransform3DMakeScale(sx: CGFloat, sy: CGFloat, sz: CGFloat)
其中sx,sy和sz是分别用来缩放(乘以x,y和z坐标)的数字。
sx
sy
sz
如果我们想将宽度减半并将高度加倍,我们将执行以下操作
myLayer.transform = CATransform3DMakeScale(0.5, 3.0, 1.0)
旋转变换使图层围绕锚点(默认情况下为图层的中心)旋转。基本语法是
CATransform3DMakeRotation(angle: CGFloat, x: CGFloat, y: CGFloat, z: CGFloat)
其中angle是在弧度的角度,该层应该旋转和x,y和z是的轴围绕其旋转。将轴设置为0会取消围绕该特定轴的旋转。
angle
x
y
z
如果我们想将图层顺时针旋转30度,则可以执行以下操作:
let degrees = 30.0 let radians = CGFloat(degrees * Double.pi / 180) myLayer.transform = CATransform3DMakeRotation(radians, 0.0, 0.0, 1.0)
0.0
1.0
-1.0
为了组合多个变换,我们可以使用像这样的隐含
CATransform3DConcat(a: CATransform3D, b: CATransform3D)
但是,我们只会一个接一个地做。第一个转换将使用Make其名称。以下转换将不使用Make,但它们会将先前的转换作为参数。
这次,我们结合了之前的所有三个变换。
let degrees = 30.0 let radians = CGFloat(degrees * Double.pi / 180) // translate var transform = CATransform3DMakeTranslation(90, 50, 0) // rotate transform = CATransform3DRotate(transform, radians, 0.0, 0.0, 1.0) // scale transform = CATransform3DScale(transform, 0.5, 3.0, 1.0) // apply the transforms myLayer.transform = transform
我们在不更改锚点的情况下完成了所有上面的转换。但是,有时有必要进行更改,例如,要围绕中心以外的其他点旋转。但是,这可能会有些棘手。
锚点和位置都在同一位置。锚点表示为图层坐标系的单位(默认为0.5, 0.5),位置表示为上层坐标系。可以这样设置
0.5, 0.5
myLayer.anchorPoint = CGPoint(x: 0.0, y: 1.0) myLayer.position = CGPoint(x: 50, y: 50)
如果仅设置锚点而不更改位置,则框架会更改,因此位置将在正确的位置。或更准确地说,将根据新的锚点和旧位置重新计算框架。这通常会产生意外的结果。以下两篇文章对此进行了精彩的讨论。