尝试将旋转的标签居中放置在背景图像内。

huangapple go评论66阅读模式
英文:

Trying to center a rotated label inside a background image

问题

我有以下的代码:

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        // 创建背景图像视图
        let backgroundImage = UIImageView(image: UIImage(named: "cardStock1"))
        backgroundImage.translatesAutoresizingMaskIntoConstraints = false
        backgroundImage.layer.borderWidth = 2
        backgroundImage.layer.borderColor = UIColor.darkGray.cgColor
        backgroundImage.layer.shadowColor = UIColor.darkGray.cgColor
        backgroundImage.layer.shadowOffset = CGSize(width: 4, height: 4)
        view.addSubview(backgroundImage)

        NSLayoutConstraint.activate([
            backgroundImage.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            backgroundImage.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            backgroundImage.topAnchor.constraint(equalTo: view.topAnchor),
            backgroundImage.bottomAnchor.constraint(equalTo: view.bottomAnchor)
        ])

        let label1 = UILabel()
        label1.translatesAutoresizingMaskIntoConstraints = false
        label1.text = "Hello World"
        label1.font = UIFont.init(name: "HelveticaNeue-Light", size: 55)
        label1.textColor = .gray
        label1.rotate(degrees: -7)
        view.addSubview(label1)

        NSLayoutConstraint.activate([
            label1.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            label1.centerYAnchor.constraint(equalTo: view.centerYAnchor),
            label1.widthAnchor.constraint(equalToConstant: 300),
            label1.heightAnchor.constraint(equalToConstant: 160)
        ])
    }
}

extension UIView {
    func rotate(degrees: CGFloat) {
        rotate(radians: CGFloat.pi * degrees / 180.0)
    }

    func rotate(radians: CGFloat) {
        self.transform = CGAffineTransform(rotationAngle: radians)
        self.layoutIfNeeded() // 旋转后更新布局
    }
}

运行这段代码后,标签没有居中在图像内部。您可以如何适当地调整代码。

感谢回复。这个代码更改导致了这个图像:尝试将旋转的标签居中放置在背景图像内。

英文:

I have the following code:

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
    
        // Create the background image view
        let backgroundImage = UIImageView(image: UIImage(named: "cardStock1"))
        backgroundImage.translatesAutoresizingMaskIntoConstraints = false
        backgroundImage.layer.borderWidth = 2
        backgroundImage.layer.borderColor = UIColor.darkGray.cgColor
        backgroundImage.layer.shadowColor = UIColor.darkGray.cgColor
        backgroundImage.layer.shadowOffset = CGSize(width: 4, height: 4)
        view.addSubview(backgroundImage)
    
        NSLayoutConstraint.activate([
            backgroundImage.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            backgroundImage.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            backgroundImage.topAnchor.constraint(equalTo: view.topAnchor),
            backgroundImage.bottomAnchor.constraint(equalTo: view.bottomAnchor)
        ])
    
        let label1 = UILabel()
        label1.translatesAutoresizingMaskIntoConstraints = false
        label1.text = "Hello World"
        label1.font = UIFont.init(name: "HelveticaNeue-Light", size: 55)
        label1.textColor = .gray
        label1.rotate(degrees: -7)
        view.addSubview(label1)
    
        NSLayoutConstraint.activate([
            label1.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            label1.centerYAnchor.constraint(equalTo: view.centerYAnchor),
            label1.widthAnchor.constraint(equalToConstant: 300),
            label1.heightAnchor.constraint(equalToConstant: 160)
        ])
    }
}

extension UIView {
    func rotate(degrees: CGFloat) {
        rotate(radians: CGFloat.pi * degrees / 180.0)
    }

    func rotate(radians: CGFloat) {
        self.transform = CGAffineTransform(rotationAngle: radians)
        self.layoutIfNeeded() // Update layout after rotation
    }
}

Running this code, the label is not centered within the image. How can i adjust the code appropriately.

Thanks for the reply. This code change results in this image:

尝试将旋转的标签居中放置在背景图像内。

答案1

得分: 1

为了使标签居中,您需要更新标签的约束,目前您设置的约束将标签的中心设置为视图的中心。要在图像内居中标签,您可以按如下方式更新约束:

NSLayoutConstraint.activate([
    label1.centerXAnchor.constraint(equalTo: backgroundImage.centerXAnchor),
    label1.centerYAnchor.constraint(equalTo: backgroundImage.centerYAnchor),
    label1.widthAnchor.constraint(equalToConstant: 300),
    label1.heightAnchor.constraint(equalToConstant: 160)
])
英文:

To centre the label you need to update the constraints for the label, currently you set the constraints set the centre of the label to the centre of the view. To centre the label within the image, you can update the constraints as follows,

NSLayoutConstraint.activate([
    label1.centerXAnchor.constraint(equalTo: backgroundImage.centerXAnchor),
    label1.centerYAnchor.constraint(equalTo: backgroundImage.centerYAnchor),
    label1.widthAnchor.constraint(equalToConstant: 300),
    label1.heightAnchor.constraint(equalToConstant: 160)
])

huangapple
  • 本文由 发表于 2023年6月1日 16:01:27
  • 转载请务必保留本文链接:https://go.coder-hub.com/76379827.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定