如何使 CAGradientLayer 中的渐变跟随滑块上的某个值？

Posted 2023-02-23

【中文标题】如何使 CAGradientLayer 中的渐变跟随滑块上的某个值？

【英文标题】：How to make a Gradient in CAGradientLayer follow a certain value on a slider?

【发布时间】：2018-02-19 12:11:10

【问题描述】：

如何更改 CAGradient 图层中的渐变图层，以便能够仅通过查看放置在滑块上的 CAGradient 图层的颜色来查看滑块上某个值的开始位置？这是我到目前为止的代码...

func sliderValueDidChange(slider:[UISlider]) 
    for index in 0...slider.count - 1 
        let tgl = CAGradientLayer()
        let frame = CGRect(x: 0, y: 0, width: Double(slider[index].bounds.width), height: 5)
        tgl.frame = frame


        tgl.colors = [UIColor.yellow.cgColor, UIColor.green.cgColor, UIColor.yellow.cgColor]


        tgl.borderWidth = 0.5
        tgl.borderColor = UIColor.gray.cgColor
        tgl.cornerRadius = 2.5




        tgl.endPoint = CGPoint(x: 1.0, y:1.0)
        tgl.startPoint = CGPoint(x: 0.0, y:1.0)



        UIGraphicsBeginImageContextWithOptions(tgl.frame.size, false, 0.0)
        tgl.render(in: UIGraphicsGetCurrentContext()!)
        let backgroundImage = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()


        slider[index].setMaximumTrackImage(backgroundImage?.resizableImage(withCapInsets: .init(top: 0.5, left: 1.0, bottom: 1.0, right: 1.0)), for:.normal)
        slider[index].setMinimumTrackImage(backgroundImage?.resizableImage(withCapInsets: .zero), for:.normal)
    

【参考方案1】：

您可以通过获取特定值并将其与滑块的最大值分开来解决此问题，这样您就可以获得滑块的百分比。然后你像这样使用它作为gradientLayer的位置

func sliderValueDidChange(slider:UISlider) 
    var floatNumberOne = Float()
    var floatNumberTwo = Float()
    var numbersOne = [NSNumber]()
    var splitTwo = [Float()]
    var valueYouWhantTheFirstGradientToEndAt = 130
    var valueYouWhantTheSecondGradientToEndAt = 170


    floatNumberOne = Float(valueYouWhantTheFirstGradientToEndAt)
    floatNumberTwo = Float(valueYouWhantTheSecondGradientToEndAt)


    var split = scaleSplit(numberOne: floatNumberOne, numberTwo: floatNumberTwo)




    print(floatNumberOne, floatNumberTwo)



    numbersOne.append(split[0] as! NSNumber)
    numbersOne.append(split[1] as! NSNumber)




    print(numbersOne)





        let tgl = CAGradientLayer()
        let frame = CGRect(x: 0, y: 0, width: Double(slider.bounds.width), height: 5)

        tgl.frame = frame

        tgl.colors = [UIColor.yellow.cgColor, UIColor.green.cgColor]


        tgl.borderWidth = 0.5
        tgl.borderColor = UIColor.gray.cgColor
        tgl.cornerRadius = 2.5


        tgl.locations = numbersOne



        tgl.endPoint = CGPoint(x: 1.0, y:1.0)
        tgl.startPoint = CGPoint(x: 0.0, y:1.0)



        UIGraphicsBeginImageContextWithOptions(tgl.frame.size, false, 0.0)
        tgl.render(in: UIGraphicsGetCurrentContext()!)
        let backgroundImage = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()


        slider.setMaximumTrackImage(backgroundImage?.resizableImage(withCapInsets: .init(top: 0.5, left: 1.0, bottom: 1.0, right: 1.0)), for:.normal)
        slider.setMinimumTrackImage(backgroundImage?.resizableImage(withCapInsets: .zero), for:.normal)





func scaleSplit(numberOne: Float, numberTwo:Float)->[Float]
    var splitter = [Float]()
    var splitterOne = Float()
    var splitterTwo = Float()

    splitterOne = numberOne/Float(maxValueOfSlider)
    spliterTwo = numberTwo/Float(maxValueOfSlider)



    splitter = [splitterOne, splitterTwo]

    return splitter