#3 Colagem de fotos Slam Dunk usando imagens/texto/emoji/borda/cantos arredondados

Mar 14 2023
Vamos tentar os métodos de escrita de ontem sobre os componentes da interface do usuário de imagem 1. Use addSubview para combinar imagens 2.

Vamos tentar os métodos de escrita de ontem sobre os elementos de imagem da interface do usuário

1. Use addSubview para combinar telas

2. UIImageView que exibe imagens

//叫出底圖圖片
let image = UIImage(named: "底圖.jpeg")          //UI屬性
let posterImageView = UIImageView(image: image) //UIImgaeView(UI屬性)
posterImageView                                 //目前圖是一個變數名稱了

//圖片位置以及尺寸
posterImageView.frame = CGRect(x: 0, y: 0, width: 800, height: 800)
posterImageView.contentMode = .scaleAspectFit   //維持比例,左右留白
posterImageView.contentMode = .scaleToFill      //維持比例,超出部分被切掉
posterImageView.alpha = 0.9                     //透明度

      
                

  • Posição do tamanho: quadro
  • transparência: alfa
  • Texto: texto
  • Cor do texto: textColor
  • Tamanho do texto: fonte
  • //設定文字位置以及尺寸
    let messageLabel = UILabel(frame: CGRect(x: 180, y: 20, width: 540, height: 55))     //位置
    messageLabel.text = "教練!我想打籃球"                                                  //內容
    messageLabel.font = UIFont.systemFont(ofSize: 55)                                    //文字大小
    messageLabel.textColor = .red                                                        //顏色
    posterImageView.addSubview(messageLabel)                                             //底圖加入文字
    
           
                    

  • largura da borda: borderWidth
  • cor da borda: borderColor
  • Fillet: cornerRadius
  • //設定底圖 邊框
    posterImageView.layer.borderWidth = 10                                               //外框厚10
    posterImageView
    posterImageView.layer.borderColor = CGColor(red: 1, green: 0, blue: 0, alpha: 1)     //外框顏色
    posterImageView
    posterImageView.layer.cornerRadius = 50                                              //四邊倒角
    posterImageView
    posterImageView.clipsToBounds = true                                                 //把旁邊消除
    
           
                    

  • rotação:
  • //迴圈加入4個emoji 在最上緣
    for i in 0...3 {
        print(i)
        let ballLabel = UILabel(frame: CGRect(x: (i+2)*100, y: 2, width: 250, height: 250))
        ballLabel.text = "⛹"
        ballLabel.font = UIFont.systemFont(ofSize: 60)
        posterImageView.addSubview(ballLabel)
    }
    
           
                    
    //迴圈加入6個emoji在左側 for i in 0...5 { // 120+ (0*-10)=120 120+0*(105)=120 // 120+ (1*-10)=110 120+1*(105)=225 let ballLabel = UILabel(frame: CGRect(x: 10+i*(-10), y: 120+i*(105), width: 150, height: 40)) //emoji每個位置 ballLabel.text = "⛹‍♂️" //emoji內容 ballLabel.font = UIFont.systemFont(ofSize: 50) //emoji大小 // 180/180 + 0*45 = 0 // 180/180 + 1*45 = 45 // 180/180 + 2*45 = 90 ballLabel.transform = CGAffineTransform(rotationAngle: .pi / 180 + CGFloat(i*45)) //旋轉角度 posterImageView.addSubview(ballLabel) //emoji加入底圖 }
    //迴圈加入6個emoji在右側 (寫函式並用呼叫的) func righSideLabel() { for i in 0...5 { // 120+ (1*-10)=110 let ballLabel = UILabel(frame: CGRect(x: 600+i*(10), y: 120+i*(105), width: 150, height: 40)) ballLabel.text = "" ballLabel.font = UIFont.systemFont(ofSize: 50) ballLabel.transform = CGAffineTransform(rotationAngle: .pi / 180 + CGFloat(i*45)) posterImageView.addSubview(ballLabel) } } righSideLabel() //呼叫函示

    //要加入的 湘北高中球員圖
    let playerImageView = UIImageView(image: UIImage(named: "球員照去背.jpeg")) //一行把照片設成變數
    
           
                    
    playerImageView.backgroundColor = UIColor(red: 247/255, green: 192/255, blue: 74/255, alpha: 1) //櫻木球衣改黃色

    
    playerImageView.frame = CGRect(x: 300, y: 550, width: 200, height: 150)                         //球員圖位置與尺寸
    playerImageView.contentMode = .scaleToFill                                                      //球員圖裁切
    posterImageView.addSubview(playerImageView)                                                     //球員圖加入底圖
    

    import UIKit
    
    //叫出底圖圖片
    let image = UIImage(named: "底圖.jpeg")          //UI屬性
    let posterImageView = UIImageView(image: image) //UIImgaeView(UI屬性)
    posterImageView                                 //目前圖是一個變數名稱了
    
    //圖片位置以及尺寸
    posterImageView.frame = CGRect(x: 0, y: 0, width: 800, height: 800)
    posterImageView.contentMode = .scaleAspectFit   //維持比例,左右留白
    posterImageView.contentMode = .scaleToFill      //維持比例,超出部分被切掉
    posterImageView.alpha = 0.8                     //透明度
    
    //設定文字位置以及尺寸
    let messageLabel = UILabel(frame: CGRect(x: 180, y: 20, width: 540, height: 55))     //位置
    messageLabel.text = "教練!我想打籃球"                                                  //內容
    messageLabel.font = UIFont.systemFont(ofSize: 55)                                    //文字大小
    messageLabel.textColor = .red                                                        //顏色
    posterImageView.addSubview(messageLabel)                                             //底圖加入文字
    
    //設定底圖 邊框
    posterImageView.layer.borderWidth = 10                                               //外框厚10
    posterImageView.layer.borderColor = CGColor(red: 1, green: 0, blue: 0, alpha: 1)     //外框顏色
    posterImageView.layer.cornerRadius = 50                                              //四邊倒角
    posterImageView.clipsToBounds = true                                                 //把旁邊消除
    
    
    //迴圈加入4個emoji 在最上緣
    for i in 0...3 {
        print(i)
        let ballLabel = UILabel(frame: CGRect(x: (i+2)*100, y: 2, width: 250, height: 250))
        ballLabel.text = "⛹"
        ballLabel.font = UIFont.systemFont(ofSize: 60)
        posterImageView.addSubview(ballLabel)
    }
    
    
    //迴圈加入6個emoji在左側
    for i in 0...5 {
        //                                  120+ (0*-10)=120  120+0*(105)=120
        //                                  120+ (1*-10)=110  120+1*(105)=225
        let ballLabel = UILabel(frame: CGRect(x: 10+i*(-10), y: 120+i*(105), width: 150, height: 40))   //emoji每個位置
        ballLabel.text = "⛹‍♂️"                                                                         //emoji內容
        ballLabel.font = UIFont.systemFont(ofSize: 50)                                                  //emoji大小
        //                                                     180/180 + 0*45 = 0
        //                                                     180/180 + 1*45 = 45
        //                                                     180/180 + 2*45 = 90
        ballLabel.transform = CGAffineTransform(rotationAngle: .pi / 180 + CGFloat(i*45))               //旋轉角度
        posterImageView.addSubview(ballLabel)                                                           //emoji加入底圖
    }
    
    //迴圈加入6個emoji在右側 (寫函式並用呼叫的)
    func righSideLabel() {
        
        for i in 0...5 {
            //                                      120+ (1*-10)=110
            let ballLabel = UILabel(frame: CGRect(x: 600+i*(10), y: 120+i*(105), width: 150, height: 40))
            
            ballLabel.text = ""
            ballLabel.font = UIFont.systemFont(ofSize: 50)
            ballLabel.transform = CGAffineTransform(rotationAngle: .pi / 180 + CGFloat(i*45))
            posterImageView.addSubview(ballLabel)
        }
    }
    
    righSideLabel() //呼叫函示
    
    //要加入的 湘北高中球員圖
    let playerImageView = UIImageView(image: UIImage(named: "球員照去背.jpeg"))                       //一行把照片設成變數
    playerImageView.backgroundColor = UIColor(red: 247/255, green: 192/255, blue: 74/255, alpha: 1) //櫻木球衣改黃色
    playerImageView.frame = CGRect(x: 300, y: 550, width: 200, height: 150)                         //球員圖位置與尺寸
    playerImageView.contentMode = .scaleToFill                                                      //球員圖裁切
    posterImageView.addSubview(playerImageView)                                                     //球員圖加入底圖
    

    # 142 Use imagens, texto, emoji, bordas e cantos arredondados para fazer lindos cartões #9 Use fotos / texto / emoji / bordas / cantos arredondados para fazer lindos cartões