Die Grundidee Pfeilspitzen in Zeichnung auf Ein gekrümmter Pfad ist, um die Tangente des Endes des Cu herauszufinden rve (z.B. die Steigung zwischen dem Punkt und seinem Kontrollpunkt) und dann herauszufinden, wie man den Pfeilkopf versetzt. Betrachten wir zum Beispiel diese Erweiterung UIBezierPath:
@interface UIBezierPath (ArrowHead)
/**
Function to add an arrow from the currentPoint.
@param point The point of the arrow
@param controlPoint The point from which the arrow is aligned. Typically, this will be the
control point for the previous quad/cubic bezier, or if dealing with a
line, the starting point.
@param width The width of the arrow (distance from the line).
@param height The height of the arrow (distance from the start point).
@param isOpen Whether the arrowhead is open or closed.
*/
- (void)addArrowFrom:(CGPoint)point
controlPoint:(CGPoint)controlPoint
width:(CGFloat)width
height:(CGFloat)height
isOpen:(BOOL)isOpen;
@end
Und
@implementation UIBezierPath (ArrowHead)
- (void)addArrowFrom:(CGPoint)point
controlPoint:(CGPoint)controlPoint
width:(CGFloat)width
height:(CGFloat)height
isOpen:(BOOL)isOpen {
CGFloat angle = atan2f(point.y - controlPoint.y, point.x - controlPoint.x);
CGFloat angleAdjustment = atan2f(width, -height);
CGFloat distance = hypotf(width, height);
[self moveToPoint:point];
[self addLineToPoint:[self calculatePointFromPoint:point angle:angle + angleAdjustment distance:distance]]; // to the right
if (isOpen) [self addLineToPoint:point]; // move back to the point
[self addLineToPoint:[self calculatePointFromPoint:point angle:angle - angleAdjustment distance:distance]]; // to the left
if (isOpen) {
[self addLineToPoint:point]; // straight ahead
} else {
[self closePath];
}
}
/**
Private function for calculating a point at a particular angle from some point.
@param point The starting point.
@param angle The angle from that point.
@param distance The distance from that point.
@return The resulting CGPoint.
*/
- (CGPoint)calculatePointFromPoint:(CGPoint)point angle:(CGFloat)angle distance:(CGFloat)distance {
return CGPointMake(point.x + cosf(angle) * distance, point.y + sinf(angle) * distance);
}
@end
Sie können dann ein Pfad wie so machen:
@interface ViewController()
@property (nonatomic, strong) NSMutableArray<CAShapeLayer *> *shapeLayers;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
self.shapeLayers = [NSMutableArray array];
}
- (void)viewDidLayoutSubviews {
[super viewDidLayoutSubviews];
[self replaceShapeLayers];
}
- (void)replaceShapeLayers {
// remove any old shape layers
for (CAShapeLayer *shapeLayer in self.shapeLayers) {
[shapeLayer removeFromSuperlayer];
}
[self.shapeLayers removeAllObjects];
[self createOpenArrowPath];
}
/**
Create open arrowhead path
Note, because it's open arrowheads, we need rounded lineJoin and lineCap.
And because both the curve and arrow head have no fill, we can use a single path for
everything.
*/
- (void)createOpenArrowPath {
// create new curve shape layer
CAShapeLayer *shapeLayer = [CAShapeLayer layer];
shapeLayer.fillColor = [UIColor clearColor].CGColor;
shapeLayer.strokeColor = [UIColor blueColor].CGColor;
shapeLayer.lineWidth = 10;
shapeLayer.lineJoin = kCALineJoinRound;
shapeLayer.lineCap = kCALineCapRound;
[self.view.layer addSublayer:shapeLayer];
[self.shapeLayers addObject:shapeLayer];
// now configure curve shape layer
CGPoint start = CGPointMake(self.view.bounds.size.width * 0.1, self.view.bounds.size.height/2.0);
CGPoint end = CGPointMake(self.view.bounds.size.width * 0.9, self.view.bounds.size.height/2.0);
CGPoint controlPoint = CGPointMake(self.view.bounds.size.width * 0.5, self.view.bounds.size.height/3.0);
UIBezierPath *path = [UIBezierPath bezierPath];
[path addArrowFrom:start controlPoint:controlPoint width:30 height:50 isOpen:true];
[path addQuadCurveToPoint:end controlPoint:controlPoint];
[path addArrowFrom:end controlPoint:controlPoint width:30 height:50 isOpen: true];
shapeLayer.path = path.CGPath;
}
/**
Create closed arrowhead path
Note, because it's closed arrowheads, we need separate paths for the curve (rounded endpoints, no fill)
and the arrowheads (mitred joins, but with fill).
*/
- (void)createClosedArrowPath {
// create new curve shape layer (with no fill and rounded corners)
CAShapeLayer *shapeLayer = [CAShapeLayer layer];
shapeLayer.fillColor = [UIColor clearColor].CGColor;
shapeLayer.strokeColor = [UIColor blueColor].CGColor;
shapeLayer.lineWidth = 10;
shapeLayer.lineJoin = kCALineJoinRound;
shapeLayer.lineCap = kCALineCapRound;
[self.view.layer addSublayer:shapeLayer];
[self.shapeLayers addObject:shapeLayer];
// now configure curve shape layer
CGPoint start = CGPointMake(self.view.bounds.size.width * 0.1, self.view.bounds.size.height/2.0);
CGPoint end = CGPointMake(self.view.bounds.size.width * 0.9, self.view.bounds.size.height/2.0);
CGPoint controlPoint = CGPointMake(self.view.bounds.size.width * 0.5, self.view.bounds.size.height/3.0);
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:start];
[path addQuadCurveToPoint:end controlPoint:controlPoint];
shapeLayer.path = path.CGPath;
// create arrow heads shape layer
shapeLayer = [CAShapeLayer layer];
shapeLayer.fillColor = [UIColor blueColor].CGColor;
shapeLayer.strokeColor = [UIColor blueColor].CGColor;
shapeLayer.lineWidth = 10;
shapeLayer.lineJoin = kCALineJoinMiter;
shapeLayer.lineCap = kCALineCapButt;
[self.view.layer addSublayer:shapeLayer];
[self.shapeLayers addObject:shapeLayer];
// now configure curve shape layer
path = [UIBezierPath bezierPath];
[path addArrowFrom:start controlPoint:controlPoint width:30 height:50 isOpen:false];
[path addArrowFrom:end controlPoint:controlPoint width:30 height:50 isOpen:false];
shapeLayer.path = path.CGPath;
}
@end
Und das ergibt:
Oder
Wenn Sie diese Dynamik für zwei beliebige Punkte machen wollen, tun nur ein wenig Trigonometrie des richtigen Kontrollpunkt, um herauszufinden. Zum Beispiel wird dies einen Kontrollpunkt verwenden, dass ein Winkel ist, die π/8-Offset aus dem Winkel zwischen dem Start ist und Endpunkte:
- (void)createOpenArrowPathFrom:(CGPoint)start to:(CGPoint)end {
// create new curve shape layer
CAShapeLayer *shapeLayer = [CAShapeLayer layer];
shapeLayer.fillColor = [UIColor clearColor].CGColor;
shapeLayer.strokeColor = [UIColor blueColor].CGColor;
shapeLayer.lineWidth = 5;
shapeLayer.lineJoin = kCALineJoinRound;
shapeLayer.lineCap = kCALineCapRound;
[self.view.layer addSublayer:shapeLayer];
[self.shapeLayers addObject:shapeLayer];
// now configure curve shape layer
CGFloat angle = atan2f(end.y - start.y, end.x - start.x);
CGFloat incrementalAngle = M_PI_4/2.0;
angle -= incrementalAngle;
CGFloat distance = hypotf(end.y - start.y, end.x - start.x)/2.0/cosf(-incrementalAngle);
CGPoint controlPoint = CGPointMake(start.x + distance * cosf(angle), start.y + distance * sinf(angle));
CGFloat percent = MIN(1.0, distance/100.0);
UIBezierPath *path = [UIBezierPath bezierPath];
[path addArrowFrom:start controlPoint:controlPoint width:30.0 * percent height:50.0 * percent isOpen:true];
[path addQuadCurveToPoint:end controlPoint:controlPoint];
[path addArrowFrom:end controlPoint:controlPoint width:30 * percent height:50 * percent isOpen: true];
shapeLayer.path = path.CGPath;
}
Das ergibt:
Sie klar kann damit spielen, wie Sie es für richtig halten (tun Sie es für den durchgezogenen Pfeil, etc.), aber es veranschaulicht, wie man einen plausiblen Kontrollpunkt bestimmt, der eine bescheidene Kurve gibt, die zwei Punkte gibt.
@Rob Ich kann keine Kurve in der Mitte der Zeile hinzufügen. Könnten Sie mir helfen, – ChenSmile