添加多个曲线标签以及可旋转的圆轮

问题描述 投票:0回答:1

我正在做一个ios项目,我想使用Swift语言添加一个圆形文本标签和圆形轮子。轮子也可以旋转,带有弯曲文本的标签将旋转到360度。我正在寻找任何第三方或任何支持文件,以便我可以模拟相同的行为..提前致谢

我想将以上功能与swift语言集成

更多参考请查看附图:

ios swift iphone trigonometry uibezierpath
1个回答
0
投票
class CircularWheelView: UIView {
    
    private let imageLayer = CALayer()
    
    var image: UIImage? {
        didSet {
            setNeedsLayout()
        }
    }
    
    var labelTexts: [String] = [""] {
           didSet {
               drawTextLabels()
           }
       }
    override func layoutSubviews() {
        super.layoutSubviews()
        
        // Update the image layer when the image changes or the view's bounds change
        if let image = image {
            let imageSize = CGSize(width: bounds.width / 2, height: bounds.height / 2)
            imageLayer.frame = CGRect(x: (bounds.width - imageSize.width) / 2, y: (bounds.height - imageSize.height) / 2, width: imageSize.width, height: imageSize.height)
            imageLayer.contents = image.cgImage
        }
    }
    
    override func draw(_ rect: CGRect) {
        // Draw the circular ring
        let ringPath = UIBezierPath(ovalIn: bounds.insetBy(dx: 20, dy: 20))
        UIColor.lightGray.setStroke()
        ringPath.lineWidth = 40
        ringPath.stroke()
        
        // Draw the text labels along the circumference
        drawTextLabels()
    }
    
    private func drawTextLabels() {
        let center = CGPoint(x: bounds.midX, y: bounds.midY)
        let radius = min(bounds.width, bounds.height) / 2.3
        let labelCount = labelTexts.count // Number of text labels
        let labelAngle = CGFloat.pi * 2.0 / CGFloat(labelCount)
        
        for i in 0..<labelCount {
            let label = UILabel()
            label.text = labelTexts[i]
            label.sizeToFit()
            
            // Calculate label position
            let angle = CGFloat(i) * labelAngle
            let x = center.x + radius * cos(angle)
            let y = center.y + radius * sin(angle)
            
            // Adjust label position to make it circular
            label.center = CGPoint(x: x, y: y)
            label.transform = CGAffineTransform(rotationAngle: angle + CGFloat.pi / 2)
            
            addSubview(label)
        }
    }
    


    func rotateWheel() {
        let rotationAnimation = CABasicAnimation(keyPath: "transform.rotation")
        rotationAnimation.fromValue = 0.0
        rotationAnimation.toValue = CGFloat.pi * 2.0
        rotationAnimation.duration = 2.0
        rotationAnimation.repeatCount = .infinity
        layer.add(rotationAnimation, forKey: "rotate")
    }
}

使用

let circularWheelView = CircularWheelView(frame: CGRect(x: 50, y: 100, width: 300, height: 300))
        circularWheelView.labelTexts = ["Settings 1", "Setting 2", "Setting 3", "Setting 4", "Setting 5"]
        circularWheelView.image = UIImage(resource: .letter)
        circularWheelView.backgroundColor = .clear
        view.addSubview(circularWheelView)
        
        // Start rotating the wheel
        circularWheelView.rotateWheel()

请查看视频以供参考

© www.soinside.com 2019 - 2024. All rights reserved.