The icon covers the background, it is NOT transparent on Win, only on Linux
The icon is transparent, the canvas is not transparent on Windows, that’s why I paint a green box on the canvas and then the icon, that way it simulates what you are trying to do with the green square.
Edited to make it clearer. The icons are transparent.
an icon with a properly applied mask should be transparent on all platforms without resorting to “tricks”
The icons are transparent on all platforms. The issue is that Peter want to create a button with a canvas that show an icon and move a green square behind the canvas to make it look like a hover icon change.
The icons are not the issue. The canvas picking up the window color behind it instead of the green square on Windows, that’s the issue.
If you download the small project, you can see that it works different on macOS, Linux and Windows.
This is how the small app looks on mac:
This is the same app on windows 10:
The green box is bigger and behind the canvas.
Edit: this is how it looks on Windows with my changes (paint or not the green square, then the icon on Canvas Paint Event):
I’m sure there is a better way to code what I did. This is my first code involving canvas, icons and paint event.
Good Morning Alberto.
That is exactly what i need!
I don’t really understand what events should fire in which case.
Can you place that in a dropbox?
What about using a RGBSurface to invert the icons colors ?
Thank you Emile, I didn’t know there is something like that in Xojo and after reading the docs it is too advanced for me.
[quote=442332:@Peter Marx]Good Morning Alberto.
That is exactly what i need!
I don’t really understand what events should fire in which case.
Can you place that in a dropbox?[/quote]
I think is better to comment here what I did, that way experienced programmers can comment what other ways there are to do the same thing, just better.
Having your code as a base, what I did was:
- remove Rectangle1
- remove MouseMove event from each canvas
- add MouseEnter, MouseExit, Paint events to each canvas
- add 2 boolean properties to the Window, Canvas1active, Canvas2active default to False
- code in MouseEnter:
Canvas1active = True // change to Canvas2active for Canvas2
me.Invalidate
- code in MouseExit::
Canvas1active = False // change to Canvas2active for Canvas2
me.Invalidate
- code in Paint event:
if Canvas1active Then // change to Canvas2active for Canvas2
// paint the green square if mouse entered Canvas
g.ForeColor = &c80fe80
g.FillRect(0,0,me.Width,me.Height)
End if
// Draw the icon
g.DrawPicture(icons8suche48,0,0) // change to (icons8obenrechts48,0,0) for Canvas2
Hope this helps and hope others can point to better ways to do it.
http://documentation.xojo.com/api/graphics/rgbsurface.html have cde to invert the image.
A simple use can be to put the code in MouseEnter and MouseExit.
@Alberto De Poo
Great it works!
Honestly, i worked nearly one week to solve the problem with menu bar or tool bar. Now i solved the problems with the icons (in Win).
It is really complex to make a nice icon with Xojo without a Mac.
I will need years until my project is ready and i hope to get a lot of good help like this!