Zeichnung Dreieck/Pfeil auf einer Linie mit CGContext

Ich bin mit den Rahmen von route-me für das arbeiten mit Orten.
In diesem code den Pfad zwischen zwei Markierungen(Punkte) gezeichnet werden, wie eine Linie.

Meine Frage: "Welchen code sollte ich hinzufügen, wenn ich will hinzufügen, einen Pfeil in der Mitte(oder Anfang) der Zeile, so dass es Punkte die Richtung"

Dank



- (void)drawInContext:(CGContextRef)theContext
{
    renderedScale = [contents metersPerPixel];

    float scale = 1.0f / [contents metersPerPixel];

    float scaledLineWidth = lineWidth;
    if(!scaleLineWidth) {
        scaledLineWidth *= renderedScale;
    }
    //NSLog(@"line width = %f, content scale = %f", scaledLineWidth, renderedScale);

    CGContextScaleCTM(theContext, scale, scale);

    CGContextBeginPath(theContext);
    CGContextAddPath(theContext, path);

    CGContextSetLineWidth(theContext, scaledLineWidth);
    CGContextSetStrokeColorWithColor(theContext, [lineColor CGColor]);
    CGContextSetFillColorWithColor(theContext, [fillColor CGColor]);

    //according to Apple's documentation, DrawPath closes the path if it's a filled style, so a call to ClosePath isn't necessary
    CGContextDrawPath(theContext, drawingMode);
}
Ich habe es vor einer Weile in codeguru.com/cpp/g-m/gdi/article.php/c3683 Trotzdem Dank für die Antworten Greetz
Pete, es kann nett sein, der Sie zum markieren einer Antwort als angenommen, dennoch, oder posten Sie Ihre Antwort als eine Antwort und dann akzeptieren.
warum nicht markieren Sie die richtige Antwort (ich meine, Friedhelm)?

InformationsquelleAutor Pete | 2010-03-23

  1. 20
    - (void) drawLine: (CGContextRef) context from: (CGPoint) from to: (CGPoint) to 
{
    double slopy, cosy, siny;
    //Arrow size
    double length = 10.0;  
    double width = 5.0;

    slopy = atan2((from.y - to.y), (from.x - to.x));
    cosy = cos(slopy);
    siny = sin(slopy);

    //draw a line between the 2 endpoint
    CGContextMoveToPoint(context, from.x - length * cosy, from.y - length * siny );
    CGContextAddLineToPoint(context, to.x + length * cosy, to.y + length * siny);
    //paints a line along the current path
    CGContextStrokePath(context);

    //here is the tough part - actually drawing the arrows
    //a total of 6 lines drawn to make the arrow shape
    CGContextMoveToPoint(context, from.x, from.y);
    CGContextAddLineToPoint(context,
                        from.x + ( - length * cosy - ( width / 2.0 * siny )),
                        from.y + ( - length * siny + ( width / 2.0 * cosy )));
    CGContextAddLineToPoint(context,
                        from.x + (- length * cosy + ( width / 2.0 * siny )),
                        from.y - (width / 2.0 * cosy + length * siny ) );
    CGContextClosePath(context);
    CGContextStrokePath(context);

    /*/-------------similarly the the other end-------------/*/
    CGContextMoveToPoint(context, to.x, to.y);
    CGContextAddLineToPoint(context,
                        to.x +  (length * cosy - ( width / 2.0 * siny )),
                        to.y +  (length * siny + ( width / 2.0 * cosy )) );
    CGContextAddLineToPoint(context,
                        to.x +  (length * cosy + width / 2.0 * siny),
                        to.y -  (width / 2.0 * cosy - length * siny) );
    CGContextClosePath(context);
    CGContextStrokePath(context);
}

    InformationsquelleAutor Friedhelm Brügge

  2. 6

    Die Zeichnung der tatsächlichen Dreieck/Pfeil ist einfach, sobald Sie haben zwei Punkte auf Ihrem Weg.

    CGContextMoveToPoint( context , ax , ay );
CGContextAddLineToPoint( context , bx , by );
CGContextAddLineToPoint( context , cx , cy );
CGContextClosePath( context ); //for triangle

    Ich die Punkte ein wenig komplizierter. Sie sagte, der Weg entlang einer Linie, die im Gegensatz zu einer Kurve oder eine Reihe von Kurven. Das macht es einfacher.

    Verwenden CGPathApply zu wählen Sie zwei Punkte auf dem Pfad. Wahrscheinlich ist dies die Letzte zwei Punkte, von denen kCGPathElementMoveToPoint und die anderen werden kCGPathElementAddLineToPoint. Lass mx,my der erste Punkt und nx,ny die zweite, so wird der Pfeil Punkt von m in Richtung n.

    Angenommen, Sie wollen den Pfeil an der Spitze der Linie, bx,by von oben wird gleich von nx,ny auf der Linie. Wählen Sie einen Punkt, dx,dy zwischen mx,my und nx,ny zu berechnen, die anderen Punkte.

    Nun berechnen Sie ax,ay und cx,cy, so dass Sie auf einer Linie mit dx,dy und gleich weit von Weg. Das folgende sollte in der Nähe sein, obwohl ich wahrscheinlich noch einige Zeichen falsch:

    r = atan2( ny - my , nx - mx );
bx = nx;
by = ny;
dx = bx + sin( r ) * length;
dy = by + cos( r ) * length;
r += M_PI_2; //perpendicular to path
ax = dx + sin( r ) * width;
ay = dy + cos( r ) * width;
cx = dx - sin( r ) * width;
cy = dy - cos( r ) * width;

    Länge ist der Abstand von der Spitze des Pfeils an der Basis, und die Breite ist der Abstand von der Welle zu den Barben, oder die Hälfte der Breite der Pfeilspitze.

    Wenn der Pfad eine Kurve, dann statt finden, mx,my, wie der Vorherige Punkt, oder verschieben, es wird der Letzte Kontrollpunkt der letzten Kurve. Jedem Kontrollpunkt wird auf eine Tangente zu der Kurve und verläuft durch den angrenzenden Punkt.

    InformationsquelleAutor drawnonward

  3. 2

    Fand ich diese Frage, da hatte ich das gleiche. Ich nahm drawnonward Beispiel und es war so eng,... Aber mit einem Umklappen von cos und sin, ich war in der Lage, um es an die Arbeit:

    r = atan2( ny - my , nx - mx );
r += M_PI;
bx = nx;
by = ny;
dx = bx + cos( r ) * length;
dy = by + sin( r ) * length;
r += M_PI_2; //perpendicular to path
ax = dx + cos( r ) * width;
ay = dy + sin( r ) * width;
cx = dx - cos( r ) * width;
cy = dy - sin( r ) * width;

    Sobald ich habe, dass meine Pfeile waren darauf genau der falsche Weg. So habe ich Hinzugefügt, dass die zweite Zeile (r += M_PI;)

    Dank geht an drawnonward!

    InformationsquelleAutor Doug Hays

  4. 0

    Und hier ist Swift 4+ version für Friedhelm Brügge Antwort: (ich zeichne es auf Bild)

    func drawArrow(image: UIImage, ptSrc: CGPoint, ptDest: CGPoint) {

        //create context with image size
        UIGraphicsBeginImageContext(image.size)
        let context = UIGraphicsGetCurrentContext()

        //draw current image to the context
        image.draw(in: CGRect(x: 0, y: 0, width: image.size.width, height: image.size.height))

        var slopY: CGFloat, cosY: CGFloat, sinY: CGFloat;
        //Arrow size
        let length: CGFloat = 35.0;
        let width: CGFloat = 35.0;

        slopY = atan2((ptSrc.y - ptDest.y), (ptSrc.x - ptDest.x));
        cosY = cos(slopY);
        sinY = sin(slopY);

        //here is the tough part - actually drawing the arrows
        //a total of 6 lines drawn to make the arrow shape
        context?.setFillColor(UIColor.white.cgColor)
        context?.move(to: CGPoint(x: ptSrc.x, y: ptSrc.y))
        context?.addLine(to: CGPoint(x: ptSrc.x + ( -length * cosY - ( width / 2.0 * sinY )), y: ptSrc.y + ( -length * sinY + ( width / 2.0 * cosY ))))
        context?.addLine(to: CGPoint(x: ptSrc.x + (-length * cosY + ( width / 2.0 * sinY )), y: ptSrc.y - (width / 2.0 * cosY + length * sinY )))
        context?.closePath()
        context?.fillPath()

        context?.move(to: CGPoint(x: ptSrc.x, y: ptSrc.y))
        context?.addLine(to: CGPoint(x: ptDest.x +  (length * cosY - ( width / 2.0 * sinY )), y: ptDest.y +  (length * sinY + ( width / 2.0 * cosY ))))
        context?.addLine(to: CGPoint(x: ptDest.x +  (length * cosY + width / 2.0 * sinY), y: ptDest.y -  (width / 2.0 * cosY - length * sinY)))
        context?.closePath()
        context?.fillPath()

        //draw current context to image view
        imgView.image = UIGraphicsGetImageFromCurrentImageContext()

        //close context
        UIGraphicsEndImageContext()
    }

    InformationsquelleAutor Coder ACJHP

Schreibe einen Kommentar