How do I draw a rounded rectangle with an arrow (shape of a speech bubble)?

Question

I am trying to create a rounded rectangle with an arrow that looks like this:

I have tried it like this, but only draws a rounded rect, and I don't see where I go wrong.

Does anybody see my mistake?

Thank you!

Public Function SpeechBubbleRight(ByRef r As gdiplus.RECTF, ByVal r1 As Single, ByVal r2 As Single, ByVal r3 As Single, ByVal r4 As Single) As clsWApath
    Dim x As Single
    Dim Y As Single
    Dim w As Single
    Dim h As Single
    
    x = r.Left
    Y = r.Top
    w = r.Width
    h = r.Height
    
    
    Dim rr As New clsWApath

    '/''''''
    Call rr.Append_Bezier(x, Y + r1, x, Y, x + r1, Y, x + r1, Y)
    '---
    Call rr.Append_Line(x + r1, Y, x + w - r2, Y)
    '''''' \
    Call rr.Append_Bezier(x + w - r2, Y, x + w, Y, x + w, Y + r2, x + w, Y + r2)
    '     |
    Call rr.Append_Line(x + w, Y + r2, x + w, Y + h - r3)
    '    /
    Call rr.Append_Bezier(x + w, Y + h - r3, x + w, Y + h, x + w - r3, Y + h, x + w - r3, Y + h)
    '__
    Call rr.Append_Line(x + w - r3, Y + h, x + r4, Y + h)
    '\_
    Call rr.Append_Bezier(x + r4, Y + h, x, Y + h, x, Y + h - r4, x, Y + h - r4)
    '|
    Call rr.Append_Line(x, Y + h - r4, x, Y + r1)

    'Add arrow
    Dim arrowSize As Single
    arrowSize = 20 'Change this value to adjust the size of the arrow
    Call rr.Append_Line(x + w, Y + h / 2, x + w + arrowSize, Y + h / 2 - arrowSize / 2)
    Call rr.Append_Line(x + w + arrowSize, Y + h / 2 - arrowSize / 2, x + w + arrowSize, Y + h / 2 + arrowSize / 2)
    Call rr.Append_Line(x + w + arrowSize, Y + h / 2 + arrowSize / 2, x + w, Y + h / 2)
    
    Call rr.ClosePath
    
    Set SpeechBubbleRight = rr
End Function

Answer 1

Your rasterization library probably expects the lines to be in order; so you should put the segments forming the arrow in the middle of the right edge, splitting it in two:

'/--------\
Call rr.Append_Bezier(x, Y + r1, x, Y, x + r1, Y, x + r1, Y)
Call rr.Append_Line(x + r1, Y, x + w - r2, Y)
Call rr.Append_Bezier(x + w - r2, Y, x + w, Y, x + w, Y + r2, x + w, Y + r2)
'         |
'          \
'          /
'         |
Call rr.Append_Line(x + w, Y + r2, x + w, Y + h / 2 - arrowSize / 2)
Call rr.Append_Line(x + w, Y + h / 2 - arrowSize / 2, x + w + arrowSize, Y + h / 2)
Call rr.Append_Line(x + w + arrowSize, Y + h / 2, x + w, Y + h / 2 + arrowSize / 2)
Call rr.Append_Line(x + w, Y + h / 2 + arrowSize / 2, x + w, Y + h - r3)
'\________/
Call rr.Append_Bezier(x + w, Y + h - r3, x + w, Y + h, x + w - r3, Y + h, x + w - r3, Y + h)
Call rr.Append_Line(x + w - r3, Y + h, x + r4, Y + h)
Call rr.Append_Bezier(x + r4, Y + h, x, Y + h, x, Y + h - r4, x, Y + h - r4)
'|
Call rr.Append_Line(x, Y + h - r4, x, Y + r1)

Call rr.ClosePath

Note that you also seem to have a few mistakes in your arrow vertex coordinates, which I also corrected in the code above.