Winkel des Gradienten mit CAGradiantLayer definieren

Question

Ich versuche einen Winkelgradienten mit CaGradientLayer zu zeichnen. Ich weiß, Winkel kann mit startPoint und endPoint definiert werden. Ich kann diese Punkte für einige Standardwinkel wie 0, 90, 180, 360 usw. berechnen. Aber ich möchte diese Punkte für einen beliebigen Winkel formulieren. Ich habe versucht, es mit einer Trigonometrie zu berechnen, aber keinen Erfolg erzielt. Kann mir jemand Anweisungen geben, wie man diese Punkte für beliebige Winkel berechnen kann?

Answer 1

Hier ist eine Methode, die eine Ansicht erstellt, die eine 360-Grad-Drehung des Zweifarben-Farbverlaufs basierend auf der Eingabe von einem Schieberegler (oder irgendetwas) ermöglicht. Der ankommende Schiebereglerwert ("x" Variable unten) liegt zwischen 0.0 und 1.0.

Bei 0,0 ist der Gradient horizontal (mit Farbe A oben und Farbe B unten) und dreht sich um 360 Grad auf den Wert 1,0 (identisch mit Wert 0.0 - oder eine volle Drehung).

z. Wenn x = 0,25 ist, ist die Farbe A links und die Farbe B ist rechts. Bei 0,5 ist die Farbe A unten und die Farbe B ist oben, 0,75 Farbe A ist rechts und Farbe B ist übrig. Es rotiert gegen den Uhrzeigersinn von rechts nach links.

Sie benötigt vier Argumente: frame, colourA, colourB und den Eingabewert (0-1).

-(UIView *)gradientViewWithFrame:(CGRect)frame colourA:(UIColor *)A colourB:(UIColor *)B rotation:(float)x { 

//x is between 0 and 1, eg. from a slider, representing 0 - 360 degrees 
//colour A starts on top, with colour B below 
//rotations move anti-clockwise 

//1. create the colour view 
UIView * colourView = [UIView new]; 
colourView.frame = frame; 

//2. create the gradient layer 
CAGradientLayer *gradient = [CAGradientLayer layer]; 
gradient.frame = colourView.bounds; 
gradient.colors = [NSArray arrayWithObjects:(id)[A CGColor], (id)[B CGColor], nil]; 
[colourView.layer insertSublayer:gradient atIndex:0]; 

//3. create coordinates 
float a = pow(sinf((2*M_PI*((x+0.75)/2))),2); 
float b = pow(sinf((2*M_PI*((x+0.0)/2))),2); 
float c = pow(sinf((2*M_PI*((x+0.25)/2))),2); 
float d = pow(sinf((2*M_PI*((x+0.5)/2))),2); 

//4. set the gradient direction 
[gradient setStartPoint:CGPointMake(a, b)]; 
[gradient setEndPoint:CGPointMake(c, d)]; 

return colourView; 
} 

Answer 2

Swift 3

static func setGradient(view: UIView!,viewRadius: CGFloat!, color1: UIColor!, color2: UIColor!, angle: Double!, alphaValue: CGFloat!){ 
    let gradient = CAGradientLayer() 

    gradient.frame = CGRect(origin: CGPoint.zero, size: view.frame.size) 

    gradient.colors = [color1.withAlphaComponent(alphaValue).cgColor, color2.withAlphaComponent(alphaValue).cgColor] 
    let x: Double! = angle/360.0 
    let a = pow(sinf(Float(2.0 * M_PI * ((x + 0.75)/2.0))),2.0); 
    let b = pow(sinf(Float(2*M_PI*((x+0.0)/2))),2); 
    let c = pow(sinf(Float(2*M_PI*((x+0.25)/2))),2); 
    let d = pow(sinf(Float(2*M_PI*((x+0.5)/2))),2); 

    gradient.endPoint = CGPoint(x: CGFloat(c),y: CGFloat(d)) 
    gradient.startPoint = CGPoint(x: CGFloat(a),y:CGFloat(b)) 

    view.roundCorners([.topLeft, .bottomLeft], radius: viewRadius) 
    view.layer.insertSublayer(gradient, at: 0) 


} 

Answer 3

Dies wird auf Sarthak Sharmas Lösung basiert stark. Ich machte eine Erweiterung der UIView und ich dachte, die Lesbarkeit und Typkonvertierungen ein wenig verbessert werden könnte:

extension UIView { 

    func setGradient(colors: [CGColor], angle: Float = 0) { 
     let gradientLayerView: UIView = UIView(frame: CGRect(x:0, y: 0, width: bounds.width, height: bounds.height)) 
     let gradient: CAGradientLayer = CAGradientLayer() 
     gradient.frame = gradientLayerView.bounds 
     gradient.colors = colors 

     let alpha: Float = angle/360 
     let startPointX = powf(
      sinf(2 * Float.pi * ((alpha + 0.75)/2)), 
      2 
     ) 
     let startPointY = powf(
      sinf(2 * Float.pi * ((alpha + 0)/2)), 
      2 
     ) 
     let endPointX = powf(
      sinf(2 * Float.pi * ((alpha + 0.25)/2)), 
      2 
     ) 
     let endPointY = powf(
      sinf(2 * Float.pi * ((alpha + 0.5)/2)), 
      2 
     ) 

     gradient.endPoint = CGPoint(x: CGFloat(endPointX),y: CGFloat(endPointY)) 
     gradient.startPoint = CGPoint(x: CGFloat(startPointX), y: CGFloat(startPointY)) 

     gradientLayerView.layer.insertSublayer(gradient, at: 0) 
     layer.insertSublayer(gradientLayerView.layer, at: 0) 
    } 

} 

das Hinzufügen einer neuen oder einer verwandten Swift-Datei und alles, was Sie tun müssen, ist anrufen entweder myView.setGradient(colors: gradientColorsArray) oder myView.setGradient(colors: gradientColorsArray, angle: 90) .