Playground Code for easy understanding of CGAffineTransform parameters

If you want to specify all the parameters of CGAffineTransform to perform affine transformation as a, b, c, d, tx, ty and convert it, you may not understand how to do it, so I made a Playground Code that you can easily understand how to use it. ..

Explanation of parameters of CGAffineTransform

The parameters of CGAffineTransform are as follows when applied to the affine transformation formula.

** **

For enlargement, specify the amount of enlargement of x in a and the amount of enlargement of y in d. For movement, specify the amount of movement of x in tx and the amount of movement of y in ty. In the case of rotation, the parameter part is as follows.

If you combine enlargement and rotation, you need to multiply them.

Example: When x and y are doubled and rotated by an angle a

Reference: Knowing CGAffineTransform

What you do with Playground Code

I make 5 UILabels and use affine transformations such as doing nothing, enlarging, moving, rotating and combining all of them.

** **

Playground


//: A UIKit based Playground for presenting user interface
  
import UIKit
import PlaygroundSupport

class MyViewController : UIViewController {
    override func loadView() {
        func buildLabel(_ num: Int) -> UILabel {
            let label = UILabel()
            label.frame = CGRect(x: 150, y: num * 100 + 50, width: 100, height: 20)
            label.backgroundColor = .red
            label.textColor = .black
            label.text = "No conversion"

            return label
        }
        func buildView() -> [UILabel]{
            var labels = [UILabel]()
            let view = UIView()
            view.backgroundColor = .white
            for i in 0...4 {
                let label = buildLabel(i)
                view.addSubview(label)
                labels.append(label)
            }
            self.view = view
            return labels
        }

        let labels = buildView()
        
        _ = {
            //Expansion
            let a: CGFloat = 2 //Enlargement amount of x
            let b: CGFloat = 0
            let c: CGFloat = 0
            let d: CGFloat = 2 //Enlargement amount of y
            let tx: CGFloat = 0
            let ty: CGFloat = 0
            
            let transform = CGAffineTransform(
                              a: a,
                              b: b,
                              c: c,
                              d: d,
                              tx: tx,
                              ty: ty
                            )
            labels[1].transform = transform
            labels[1].text = "Expansion"
        }()
        _ = {
            //Move
            let a: CGFloat = 1
            let b: CGFloat = 0
            let c: CGFloat = 0
            let d: CGFloat = 1
            let tx: CGFloat = 30 //Amount of movement of x
            let ty: CGFloat = 30 //Amount of movement of y
            
            let transform = CGAffineTransform(
                              a: a,
                              b: b,
                              c: c,
                              d: d,
                              tx: tx,
                              ty: ty
                            )
            labels[2].transform = transform
            labels[2].text = "Move"
        }()
        _ = {
            //rotation
            let r = -(CGFloat.pi / 4)
            
            let a: CGFloat = cos(r)
            let b: CGFloat = sin(r)
            let c: CGFloat = -sin(r)
            let d: CGFloat = cos(r)
            let tx: CGFloat = 0
            let ty: CGFloat = 0
            
            let transform = CGAffineTransform(
                              a: a,
                              b: b,
                              c: c,
                              d: d,
                              tx: tx,
                              ty: ty
                            )
            labels[3].transform = transform
            labels[3].text = "rotation"
        }()
        _ = {
            //combination
            let r = -(CGFloat.pi / 4)
            
            let a: CGFloat = 2*cos(r)
            let b: CGFloat = 2*sin(r)
            let c: CGFloat = 2*cos(r)
            let d: CGFloat = 2*cos(r)
            let tx: CGFloat = 30 //Amount of movement of x
            let ty: CGFloat = 30 //Amount of movement of y
            
            let transform = CGAffineTransform(
                              a: a,
                              b: b,
                              c: c,
                              d: d,
                              tx: tx,
                              ty: ty
                            )
            labels[4].transform = transform
            labels[4].text = "combination"
        }()

    }
}
// Present the view controller in the Live View window
PlaygroundPage.current.liveView = MyViewController()

Finally

Note regularly publishes iOS development, especially CoreML, ARKit, Metal, etc. https://note.com/tokyoyoshida

It is also posted on Twitter. https://twitter.com/jugemjugemjugem

Recommended Posts

Playground Code for easy understanding of CGAffineTransform parameters
WebMvcConfigurer Memorandum of Understanding for Spring Boot 2.0 (Spring 5)