在iOS中绘制箭头背后的数学

Question

我想在一条线的顶部画一个箭头。 我知道startPoint和endPoint的坐标，我也知道箭头的角度和长度。

我的逻辑是：

1. 计算起点和终点之间的坡度
2. 计算箭头点的位置

我正在使用以下公式：

CGFloat endX = cos(angleOfArrowPoint-slopeAngle) * distance + point.x;
CGFloat endY = sin(angleOfArrowPoint-slopeAngle) * distance + point.y;

我做错了什么？

Answer 1

这是一种方法，我用它来绘制两端带箭头的线条，它显示了在一条线上绘制箭头的算法。根据您的特定需求修改这些方法应该很容易。

-(void)drawDoubleArrowLineInContext:(CGContextRef)inContext fromPoint:(CGPoint)inFromPoint toPoint:(CGPoint)inToPoint {

    CGContextSetLineWidth(inContext, 1.0 );
    CGContextSetStrokeColorWithColor( inContext, [UIColor blackColor].CGColor  );
    CGContextSetFillColorWithColor( inContext, [UIColor blackColor].CGColor );

    CGContextBeginPath( inContext );
    CGContextMoveToPoint( inContext, inFromPoint.x, inFromPoint.y );
    CGContextAddLineToPoint( inContext, inToPoint.x, inToPoint.y );
    CGContextClosePath( inContext );
    CGContextDrawPath( inContext, kCGPathStroke );

    [self drawArrowInContext:inContext atPoint:inFromPoint pointFrom:inToPoint];
    [self drawArrowInContext:inContext atPoint:inToPoint pointFrom:inFromPoint];
}

-(void)drawArrowInContext:(CGContextRef)inContext atPoint:(CGPoint)inTipPoint pointFrom:(CGPoint)inFromPoint {
    const CGFloat kArrowHeight = 15;
    const CGFloat kArrowBaseHalfWidth = 5;

    double arrowAngle = atan2( (inFromPoint.y - inTipPoint.y), (inFromPoint.x - inTipPoint.x ) );

    CGContextBeginPath( inContext );
    CGContextMoveToPoint( inContext, inTipPoint.x, inTipPoint.y );
    CGContextAddLineToPoint( inContext, (inTipPoint.x + kArrowHeight*cos(arrowAngle)) - kArrowBaseHalfWidth*sin(arrowAngle),
                                        (inTipPoint.y + kArrowHeight*sin(arrowAngle)) + kArrowBaseHalfWidth*cos(arrowAngle));
    CGContextAddLineToPoint( inContext, (inTipPoint.x + kArrowHeight*cos(arrowAngle)) + kArrowBaseHalfWidth*sin(arrowAngle),
                                        (inTipPoint.y + kArrowHeight*sin(arrowAngle)) - kArrowBaseHalfWidth*cos(arrowAngle));
    CGContextAddLineToPoint( inContext, inTipPoint.x, inTipPoint.y );
    CGContextClosePath( inContext );

    CGContextDrawPath( inContext, kCGPathFillStroke );
}