Yogendra Patel
Yogendra Patel

Reputation: 833

How to set gradient color with angle

I want to set gradient on my button, i have to set simple linear gradient(without angle) with two color, but i don't know how to set angle value on gradient

Angle:- 61

below image define psd gradient overlay effect

enter image description here

Thanks in advance

Upvotes: 0

Views: 1434

Answers (3)

Eugene Sokolenko
Eugene Sokolenko

Reputation: 66

Try it, maybe it will help

- (CAGradientLayer *)gradientLayerWithColors:(NSArray *)colors angle:(CGFloat)angle {

CAGradientLayer *layer = [CAGradientLayer layer];
layer.colors = colors;

CGFloat x = angle / 360.f;

CGFloat a = pow(sin((2*M_PI*((x+0.75)/2))),2);
CGFloat b = pow(sin((2*M_PI*((x+0.0)/2))),2);
CGFloat c = pow(sin((2*M_PI*((x+0.25)/2))),2);
CGFloat d = pow(sin((2*M_PI*((x+0.5)/2))),2);

layer.startPoint = CGPointMake(a, b);
layer.endPoint = CGPointMake(c, d);
return layer;

}

Upvotes: 2

mato
mato

Reputation: 183

This is a slightly modified code generated by PaintCode that solves just this problem:

UIBezierPath* rectanglePath = [UIBezierPath bezierPathWithRect: self.view.bounds];
UIBezierPath* rectangleRotatedPath = [rectanglePath copy];
CGAffineTransform transform = CGAffineTransformMakeRotation(yourAngleInRadians);
[rectangleRotatedPath applyTransform: transform];
CGRect rectangleBounds = CGPathGetPathBoundingBox(rectangleRotatedPath.CGPath);
transform = CGAffineTransformInvert(transform);

CGPoint startPoint = CGPointApplyAffineTransform(CGPointMake(CGRectGetMinX(rectangleBounds), CGRectGetMidY(rectangleBounds)), transform);
CGPoint endPoint = CGPointApplyAffineTransform(CGPointMake(CGRectGetMaxX(rectangleBounds), CGRectGetMidY(rectangleBounds)), transform);

The code takes your initial rectangle (black rectangle) and angle (shown as black line), rotates the rectangle (you'll get blue rectangle), then finds bounding box of the rotated rectangle (red rectangle). Takes endpoints on the bounds (red dots) and transforms (rotates) them back using invert transform (blue dots).

Finding endpoints

Other solution might be finding intersection of your rectangle and a line defined by the angle.

Upvotes: 1

kaushal
kaushal

Reputation: 1573

CAGradientLayer *gradientMask = [CAGradientLayer layer];
gradientMask.frame = CGRectMake(0, 0, myView.bounds.size.width, myView.bounds.size.height);

gradientMask.colors = @[(id)[UIColor redColor].CGColor,
                        (id)[UIColor greenColor].CGColor];
gradientMask.locations = @[@0.0, @0.10, @0.60, @1.0];

[myView.layer insertSublayer:gradientMask atIndex:0];

adjust location value and frame size accordingly.

Upvotes: 0

Related Questions