Crop picture with round corners

  1. 9 weeks ago

    Horst J

    Sep 13 Pre-Release Testers, Xojo Pro Europe, Germany, Stuttgart

    How can I crop a picture, so it has round corners?

    Left picture is the original, right picture is the crop picture:

    -image-

    Thank you for this hint. That's the solution:

    'Bubble mask, Fill the mask white
    dim bubble as new Picture(128,128)
    bubble.Graphics.ForeColor = rgb(255, 255, 255)
    bubble.Graphics.FillRect(0, 0, bubble.Width, bubble.Height)
    'Now draw the black rounded rectangle (that will allow the gradient to show through behind)
    bubble.Graphics.ForeColor = rgb(0, 0, 0)
    bubble.Graphics.FillRoundRect(0, 0, bubble.Width, bubble.Height, 20, 20)
    dim p as new picture(128,128,24)
    p.Graphics.DrawPicture(redhat128,0,0)
    p.ApplyMask(bubble)
    g.DrawPicture(p,0,0)

  2. Beatrix W

    Sep 13 Pre-Release Testers Europe (Germany)

    You add a mask with round corner. I'll check if I can find some code.

  3. Beatrix W

    Sep 13 Pre-Release Testers Europe (Germany)

    This is from before HiDPI I think:

    'Bubble mask, Fill the mask white
    bubble.Mask.Graphics.ForeColor = rgb(255, 255, 255)
    bubble.Mask.Graphics.FillRect(0, 0, bubble.Width, bubble.Height)
    'Now draw the black rounded rectangle (that will allow the gradient to show through behind)
    bubble.Mask.Graphics.ForeColor = rgb(0, 0, 0)
    bubble.Mask.Graphics.FillRoundRect(0, 0, bubble.Width, bubble.Height, 10, 10)
  4. Horst J

    Sep 13 Pre-Release Testers, Xojo Pro Europe, Germany, Stuttgart

    How can I do this in a canvas when the logo picture (redhat.png) is a png file?

    If I use this in the paint event, I go a black rounded rectangle.

    dim bubble as new Picture(128,128)
    bubble.Graphics.ForeColor = rgb(255, 255, 255)
    bubble.Graphics.FillRect(0, 0, bubble.Width, bubble.Height)
    'Now draw the black rounded rectangle (that will allow the gradient to show through behind)
    bubble.Graphics.ForeColor = rgb(0, 0, 0)
    bubble.Graphics.FillRoundRect(0, 0, bubble.Width, bubble.Height, 20, 20)
    g.DrawPicture(bubble,0,0)

  5. Sascha S

    Sep 13 Pre-Release Testers, Xojo Pro Germany/W'haven

    I can't test right now but i think you need to load the RedHat.png in to a Picture Object and create the Mask Picture as described above, then apply the Mask to the RedHat Picture.

  6. Horst J

    Sep 13 Pre-Release Testers, Xojo Pro Answer Europe, Germany, Stuttgart

    Thank you for this hint. That's the solution:

    'Bubble mask, Fill the mask white
    dim bubble as new Picture(128,128)
    bubble.Graphics.ForeColor = rgb(255, 255, 255)
    bubble.Graphics.FillRect(0, 0, bubble.Width, bubble.Height)
    'Now draw the black rounded rectangle (that will allow the gradient to show through behind)
    bubble.Graphics.ForeColor = rgb(0, 0, 0)
    bubble.Graphics.FillRoundRect(0, 0, bubble.Width, bubble.Height, 20, 20)
    dim p as new picture(128,128,24)
    p.Graphics.DrawPicture(redhat128,0,0)
    p.ApplyMask(bubble)
    g.DrawPicture(p,0,0)

  7. ronaldo f

    Sep 13 Pre-Release Testers, Xojo Pro Philippines

    is this applicable only for desktop? or I can be use for Web too?

  8. Vigia L

    Sep 13 Pre-Release Testers, Xojo Pro

    png image file.

  9. Horst J

    Sep 13 Pre-Release Testers, Xojo Pro Europe, Germany, Stuttgart

    You can use this code on any platform except iOS.

or Sign Up to reply!