Narysuj gradient wzdłuż zakrzywionej ścieżki UIBezierPath
W aplikacji rysuję zakrzywioną ścieżkę UIBezierPath i klasę Mkverlaypathview, aby pokazać trasy lotu. To jest kod, którego używam:
- (UIBezierPath *)pathForOverlayForMapRect:(MKMapRect)mapRect { ... bla bla bla ... UIBezierPath *path = [UIBezierPath bezierPath]; [path moveToPoint:s]; [path addQuadCurveToPoint:e controlPoint:cp1]; [path addLineToPoint:e2]; [path addQuadCurveToPoint:s2 controlPoint:cp2]; [path closePath]; return path; }
- (void)drawMapRect:(MKMapRect)mapRect zoomScale:(MKZoomScale)zoomScale inContext:(CGContextRef)context{
self.mapRect = mapRect;
CGContextSetRGBFillColor(context, 1.0, 1.0, 1.0, 1.0);
CGContextSetRGBStrokeColor(context, 0.0, 0.0, 0.0, 1.0);
CGContextSetLineWidth(context, mapRect.size.height/700);
CGContextSetLineJoin(context, kCGLineJoinRound);
CGContextSetLineCap(context, kCGLineCapRound);
CGContextAddPath(context, [self pathForOverlayForMapRect:mapRect].CGPath);
[self updateTouchablePathForMapRect:mapRect];
CGContextDrawPath(context, kCGPathFillStroke);
}
To działa dobrze, ale chciałbym narysować gradient wzdłuż tej ścieżki zamiast tylko koloru wypełnienia. I tu zaczyna się robić bardzo trudne.
Eksperymentowałem z cgcontextdrawlineargradient (), ale nie dało mi to jeszcze żadnego pożytku.
16
2 answers
Sztuczka polega na użyciu ścieżki obrysu linii (CGContextReplacePathWithStrokedPath
) i przyciśnięciu jej (CGContextClip
), aby ograniczyć gradient do ścieżki:
// Create a gradient from white to red
CGFloat colors [] = {
1.0, 1.0, 1.0, 1.0,
1.0, 0.0, 0.0, 1.0
};
CGColorSpaceRef baseSpace = CGColorSpaceCreateDeviceRGB();
CGGradientRef gradient = CGGradientCreateWithColorComponents(baseSpace, colors, NULL, 2);
CGColorSpaceRelease(baseSpace), baseSpace = NULL;
CGContextSetLineWidth(context, mapRect.size.height/700);
CGContextSetLineJoin(context, kCGLineJoinRound);
CGContextSetLineCap(context, kCGLineCapRound);
CGContextAddPath(context, [self pathForOverlayForMapRect:mapRect].CGPath);
CGContextReplacePathWithStrokedPath(context);
CGContextClip(context);
[self updateTouchablePathForMapRect:mapRect];
// Define the start and end points for the gradient
// This determines the direction in which the gradient is drawn
CGPoint startPoint = CGPointMake(CGRectGetMidX(rect), CGRectGetMinY(rect));
CGPoint endPoint = CGPointMake(CGRectGetMidX(rect), CGRectGetMaxY(rect));
CGContextDrawLinearGradient(context, gradient, startPoint, endPoint, 0);
CGGradientRelease(gradient), gradient = NULL;
24
Author: neilco,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-12-17 13:59:33
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-12-17 13:59:33
W Swift 3 można to osiągnąć za pomocą poniższego kodu. Ten przykład dotyczy linii prostej, ale te same zasady powinny mieć zastosowanie.
let startPoint = CGPoint(x:100, y:100)
let endPoint = CGPoint(x: 300, y:400)
let context = UIGraphicsGetCurrentContext()!
context.setStrokeColor(red: 1.0, green: 1.0, blue: 1.0, alpha: 1.0);
// create a line
context.move(to: startPoint)
context.addLine(to: endPoint)
context.setLineWidth(4)
// use the line created above as a clipping mask
context.replacePathWithStrokedPath()
context.clip()
// create a gradient
let locations: [CGFloat] = [ 0.0, 0.5 ]
let colors = [UIColor.green.cgColor,
UIColor.white.cgColor]
let colorspace = CGColorSpaceCreateDeviceRGB()
let gradient = CGGradient(colorsSpace: colorspace,
colors: colors as CFArray, locations: locations)
let gradientStartPoint = CGPoint(x: rect.midX, y: rect.minY)
let gradientEndPoint = CGPoint(x: rect.midX, y: rect.maxY)
context.drawLinearGradient(gradient!,
start: gradientStartPoint, end: gradientEndPoint,
options: .drawsBeforeStartLocation)
UIGraphicsEndImageContext()
1
Author: keith.g,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-07-09 14:27:44
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-07-09 14:27:44