objective-c - cómo - como dibujar una flecha de minecraft

¿Cómo puedo dibujar una flecha usando Core Graphics?

Question

Necesito dibujar una línea con una flecha en su extremo en mi aplicación Draw. No soy bueno en trigonometría, así que no puedo resolver este problema.

El usuario coloca su dedo en la pantalla y dibuja la línea en cualquier dirección. Entonces, la flecha debería aparecer en el extremo de la línea.

Answer 1

ACTUALIZAR

He publicado una versión Swift de esta respuesta por separado.

ORIGINAL

Este es un pequeño problema divertido. En primer lugar, hay muchas formas de dibujar flechas, con lados curvos o rectos. Vamos a elegir una manera muy simple y etiquetar las medidas que necesitaremos:

Queremos escribir una función que tome el punto de inicio, el punto final, el ancho de la cola, el ancho de la cabeza y la longitud de la cabeza, y devuelve una ruta que delinee la forma de la flecha. Vamos a crear una categoría llamada dqd_arrowhead para agregar este método a UIBezierPath :

// UIBezierPath+dqd_arrowhead.h

@interface UIBezierPath (dqd_arrowhead)

+ (UIBezierPath *)dqd_bezierPathWithArrowFromPoint:(CGPoint)startPoint
                                           toPoint:(CGPoint)endPoint
                                         tailWidth:(CGFloat)tailWidth
                                         headWidth:(CGFloat)headWidth
                                        headLength:(CGFloat)headLength;

@end

Como hay siete esquinas en el camino de la flecha, comencemos nuestra implementación nombrando esa constante:

// UIBezierPath+dqd_arrowhead.m

#import "UIBezierPath+dqd_arrowhead.h"

#define kArrowPointCount 7

@implementation UIBezierPath (dqd_arrowhead)

+ (UIBezierPath *)dqd_bezierPathWithArrowFromPoint:(CGPoint)startPoint
                                           toPoint:(CGPoint)endPoint
                                         tailWidth:(CGFloat)tailWidth
                                         headWidth:(CGFloat)headWidth
                                        headLength:(CGFloat)headLength {

OK, la parte fácil ya está hecha. Ahora, ¿cómo encontramos las coordenadas de esos siete puntos en el camino? Es mucho más fácil encontrar los puntos si la flecha está alineada a lo largo del eje X:

Es bastante fácil calcular las coordenadas de puntos en una flecha alineada con el eje, pero necesitaremos la longitud total de la flecha para hacerlo. Usaremos la función hypotf de la biblioteca estándar:

    CGFloat length = hypotf(endPoint.x - startPoint.x, endPoint.y - startPoint.y);

Llamaremos a un método de ayuda para calcular realmente los siete puntos:

    CGPoint points[kArrowPointCount];
    [self dqd_getAxisAlignedArrowPoints:points
                              forLength:length
                              tailWidth:tailWidth
                              headWidth:headWidth
                             headLength:headLength];

Pero tenemos que transformar esos puntos, porque en general no estamos tratando de crear una flecha alineada con el eje. Afortunadamente, Core Graphics admite un tipo de transformación llamada transformación afín , que nos permite rotar y traducir (deslizar) puntos. Llamaremos a otro método auxiliar para crear la transformación que convierte nuestra flecha alineada con el eje en la flecha que se nos pidió:

    CGAffineTransform transform = [self dqd_transformForStartPoint:startPoint
                                                          endPoint:endPoint
                                                            length:length];

Ahora podemos crear una ruta de gráficos centrales usando los puntos de la flecha alineada al eje y la transformación que la convierte en la flecha que queremos:

    CGMutablePathRef cgPath = CGPathCreateMutable();
    CGPathAddLines(cgPath, &transform, points, sizeof points / sizeof *points);
    CGPathCloseSubpath(cgPath);

Finalmente, podemos envolver un UIBezierPath alrededor de CGPath y devolverlo:

    UIBezierPath *uiPath = [UIBezierPath bezierPathWithCGPath:cgPath];
    CGPathRelease(cgPath);
    return uiPath;
}

Aquí está el método de ayuda que calcula las coordenadas del punto. Es bastante simple. Consulte de nuevo el diagrama de la flecha alineada al eje si es necesario.

+ (void)dqd_getAxisAlignedArrowPoints:(CGPoint[kArrowPointCount])points
                            forLength:(CGFloat)length
                            tailWidth:(CGFloat)tailWidth
                            headWidth:(CGFloat)headWidth
                           headLength:(CGFloat)headLength {
    CGFloat tailLength = length - headLength;
    points[0] = CGPointMake(0, tailWidth / 2);
    points[1] = CGPointMake(tailLength, tailWidth / 2);
    points[2] = CGPointMake(tailLength, headWidth / 2);
    points[3] = CGPointMake(length, 0);
    points[4] = CGPointMake(tailLength, -headWidth / 2);
    points[5] = CGPointMake(tailLength, -tailWidth / 2);
    points[6] = CGPointMake(0, -tailWidth / 2);
}

Computar la transformación afín es más complicado. Aquí es donde entra la trigonometría. Puede usar atan2 y las funciones CGAffineTransformRotate y CGAffineTransformTranslate para crearlo, pero si recuerda suficiente trigonometría, puede crearla directamente. Consulte "Las matemáticas detrás de las matrices" en la Guía de programación 2D de Quartz para obtener más información sobre lo que estoy haciendo aquí:

+ (CGAffineTransform)dqd_transformForStartPoint:(CGPoint)startPoint
                                       endPoint:(CGPoint)endPoint
                                         length:(CGFloat)length {
    CGFloat cosine = (endPoint.x - startPoint.x) / length;
    CGFloat sine = (endPoint.y - startPoint.y) / length;
    return (CGAffineTransform){ cosine, sine, -sine, cosine, startPoint.x, startPoint.y };
}

@end

He puesto todo el código en una esencia para copiar y pegar fácilmente .

Con esta categoría, puedes dibujar flechas fácilmente:

Como solo está generando una ruta, puede elegir no llenarla, o no acariciarla como en este ejemplo:

Sin embargo, tienes que ser cuidadoso. Este código no le impide obtener resultados originales si hace que el ancho de la cabeza sea inferior al ancho de la cola, o si hace que la longitud de la cabeza sea mayor que la longitud total de la flecha:

Answer 2

Aquí hay una versión Swift de mi antiguo código Objective-C. Debería funcionar en Swift 3.2 y versiones posteriores.

extension UIBezierPath {

    static func arrow(from start: CGPoint, to end: CGPoint, tailWidth: CGFloat, headWidth: CGFloat, headLength: CGFloat) -> UIBezierPath {
        let length = hypot(end.x - start.x, end.y - start.y)
        let tailLength = length - headLength

        func p(_ x: CGFloat, _ y: CGFloat) -> CGPoint { return CGPoint(x: x, y: y) }
        let points: [CGPoint] = [
            p(0, tailWidth / 2),
            p(tailLength, tailWidth / 2),
            p(tailLength, headWidth / 2),
            p(length, 0),
            p(tailLength, -headWidth / 2),
            p(tailLength, -tailWidth / 2),
            p(0, -tailWidth / 2)
        ]

        let cosine = (end.x - start.x) / length
        let sine = (end.y - start.y) / length
        let transform = CGAffineTransform(a: cosine, b: sine, c: -sine, d: cosine, tx: start.x, ty: start.y)

        let path = CGMutablePath()
        path.addLines(between: points, transform: transform)
        path.closeSubpath()

        return self.init(cgPath: path)
    }

}

Aquí hay un ejemplo de cómo lo llamarías:

let arrow = UIBezierPath.arrow(from: CGPoint(x: 50, y: 100), to: CGPoint(x: 200, y: 50),
        tailWidth: 10, headWidth: 25, headLength: 40)

Answer 3

En Swift 3.0 puedes lograr esto con

extension UIBezierPath {

class func arrow(from start: CGPoint, to end: CGPoint, tailWidth: CGFloat, headWidth: CGFloat, headLength: CGFloat) -> Self {
    let length = hypot(end.x - start.x, end.y - start.y)
    let tailLength = length - headLength

    func p(_ x: CGFloat, _ y: CGFloat) -> CGPoint { return CGPoint(x: x, y: y) }
    var points: [CGPoint] = [
        p(0, tailWidth / 2),
        p(tailLength, tailWidth / 2),
        p(tailLength, headWidth / 2),
        p(length, 0),
        p(tailLength, -headWidth / 2),
        p(tailLength, -tailWidth / 2),
        p(0, -tailWidth / 2)
    ]

    let cosine = (end.x - start.x) / length
    let sine = (end.y - start.y) / length
    var transform = CGAffineTransform(a: cosine, b: sine, c: -sine, d: cosine, tx: start.x, ty: start.y)        
    let path = CGMutablePath()
    path.addLines(between: points, transform: transform)
    path.closeSubpath()
    return self.init(cgPath: path)
}

}

Answer 4

//This is the integration into the view of the previous exemple
//Attach the following class to your view in the xib file

#import <UIKit/UIKit.h>

@interface Arrow : UIView

@end

#import "Arrow.h"
#import "UIBezierPath+dqd_arrowhead.h"

@implementation Arrow
{
    CGPoint startPoint;
    CGPoint endPoint;
    CGFloat tailWidth;
    CGFloat headWidth;
    CGFloat headLength;
    UIBezierPath *path;

}


- (id)initWithCoder:(NSCoder *)aDecoder
{
    if (self = [super initWithCoder:aDecoder])
    {
        [self setMultipleTouchEnabled:NO];
        [self setBackgroundColor:[UIColor whiteColor]];

    }
    return self;
}

- (void)drawRect:(CGRect)rect {

    [[UIColor redColor] setStroke];
    tailWidth = 4;
    headWidth = 8;
    headLength = 8;
    path = [UIBezierPath dqd_bezierPathWithArrowFromPoint:(CGPoint)startPoint
                                                  toPoint:(CGPoint)endPoint
                                                tailWidth:(CGFloat)tailWidth
                                                headWidth:(CGFloat)headWidth
                                               headLength:(CGFloat)headLength];
    [path setLineWidth:2.0];

    [path stroke];

}
- (void) touchesBegan:(NSSet*)touches withEvent:(UIEvent*)event
{
    UITouch* touchPoint = [touches anyObject];
    startPoint = [touchPoint locationInView:self];
    endPoint = [touchPoint locationInView:self];


    [self setNeedsDisplay];
}

-(void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
    UITouch* touch = [touches anyObject];
    endPoint=[touch locationInView:self];
    [self setNeedsDisplay];
}

-(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
    UITouch* touch = [touches anyObject];
    endPoint = [touch locationInView:self];
    [self setNeedsDisplay];
}


@end