CAGradientLayer

Question

का उपयोग कर ढाल के कोण को परिभाषित करना मैं CaGradientLayer का उपयोग करके कोणीय ढाल खींचने की कोशिश कर रहा हूं। मुझे पता है कोण को startPoint और endPoint का उपयोग करके परिभाषित किया जा सकता है। मैं 0, 90, 180, 360 इत्यादि जैसे कुछ मानक कोणों के लिए इन बिंदुओं की गणना कर सकता हूं लेकिन मैं इन बिंदुओं को मनमाने ढंग से कोण के लिए तैयार करना चाहता हूं। मैंने कुछ त्रिकोणमिति का उपयोग करके इसे कंप्यूटिंग करने का प्रयास किया है, लेकिन कोई सफलता नहीं मिली है। क्या कोई मुझे मनमानी कोणों के लिए इन बिंदुओं की गणना करने के बारे में कोई निर्देश दे सकता है?

Answer 1

यहां एक ऐसी विधि है जो एक दृश्य बनाता है जो स्लाइडर (या कुछ भी) से इनपुट के आधार पर अपने दो रंगीन ढाल के 360 डिग्री रोटेशन की अनुमति देता है। आने वाले स्लाइडर मान ("x" चर नीचे) 0.0 और 1.0 के बीच है।

0.0 पर ढाल क्षैतिज (शीर्ष पर रंग ए के साथ, और नीचे रंग बी के साथ) है, 360 डिग्री से 360 के बीच घूर्णन (मान 0.0 के बराबर या एक पूर्ण रोटेशन)।

उदा। जब x = 0.25, रंग ए छोड़ा गया है और रंग बी सही है। 0.5 पर, रंग ए नीचे है और रंग बी ऊपर है, 0.75 रंग ए सही है और रंग बी छोड़ा गया है। यह विरोधी-घड़ी के दाएं से बाएं घुमाता है।

इसमें चार तर्क होते हैं: फ्रेम, रंग, रंगीन इनपुट और इनपुट मान (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

स्विफ्ट 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

यह भारी सार्थक शर्मा समाधान पर आधारित है। मैं UIView का ही विस्तार कर दिया और मैं पठनीयता और प्रकार रूपांतरण थोड़ा सुधार किया जा सकता लगा:

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

} 

एक नया या संबंधित स्विफ्ट फ़ाइल और तुम सब करने की या तो myView.setGradient(colors: gradientColorsArray) या myView.setGradient(colors: gradientColorsArray, angle: 90) फोन है करने के लिए इस जोड़े ।