Use canvas as button, can insert icon (image) with text?

Getting Started
1

Complete beginner here, UI designer with no coding experience.
I’m using Mac, want to create a flat button with icon and text. The bevel button can insert icon with text, but i cannot remove the bevel effect.
So I use the canvas to create the flat button, and add event handler “Paint” to set color and text, is there any way to inert a icon image in the button too?

thanks.

//fill.
g.ForeColor = rgb(250,70,22)
g.FillRoundRect(0,0,me.width,me.height,12,12)

//border.
g.ForeColor = rgb(190,70,22)
g.PenHeight = 2
g.PenWidth = 4
g.DrawRoundRect(0,0,me.width,me.height,12,12)

//text.
g.ForeColor = rgb(250,250,250)
g.TextFont = “Helvetica”
g.TextUnit = FontUnits.Point
g.TextSize = 16
g.DrawString(“CLEAR”,13,25)

2

Import a picture to be used as an Icon, in your case a transparent PNG. Here I named it “SettingsIcon” in the inspector panel on the right:

Bildschirmfoto 2024-09-11 um 06.22.51
Bildschirmfoto 2024-09-11 um 06.22.511296×1470 77.3 KB

Then you can reference it in your Paint event:

g.ForeColor = rgb(250,70,22)
g.FillRoundRect(0,0,me.width,me.height,12,12)

//border.
g.ForeColor = rgb(190,70,22)
g.PenHeight = 2
g.PenWidth = 4
g.DrawRoundRect(0,0,me.width,me.height,12,12)

//text.
g.ForeColor = rgb(250,250,250)
g.FontName = "Helvetica"
g.TextUnit = FontUnits.Point
g.TextSize = 16
g.DrawText("CLEAR", 13,25)

// Icon
g.DrawPicture(SettingsIcon, Me.Width / 2 - 16, 28)

And out comes:

Bildschirmfoto 2024-09-11 um 06.24.30
Bildschirmfoto 2024-09-11 um 06.24.301424×1080 65.2 KB

1 Like
3

super thx

4

You can center the text.

You may change the Canvas Name to, say, cClear (for example).

You may also add a Folder in the navigation pane and place all your images there…
You can place your window in a folder, add a sub-folder with all images related to that window.

Thses will be easier later to modify things when everything for a giving window is in the same object in the Navigation Pane.

1 Like
5

Why create an image?

Just write it as text

Public Const Blume as String = :blossom:
g.FontSize = 30
g.drawtext(blume,1,g.fontsize)
or
g.drawtext(“:blossom:”,1,g.fontsize)

1 Like
6

You could check through the documentation. In this instance you want DrawPicture.

1 Like
7

That would be:

Public Const Blume as String = ":blossom:" // You need the quotes here.
g.FontSize = 30
g.drawtext(blume,1,g.fontsize)
//or
g.drawtext(“:blossom:”,1,g.fontsize)

It would also be best to place any code inside ```

1 Like