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

Question

我想在一行的顶部画一个箭头。我知道起点和终点的坐标，也知道箭头的角度和长度。

我的逻辑是：

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