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

Question

我如何更改 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)
    }

Answer 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
}

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

How to make a Gradient in CAGradientLayer follow a certain value on a slider?

swift4

xcode9

uislider

cagradientlayer