Graphics Drawing question

General
1

I’m trying to draw on a canvas where there is a circle overlapping a rectangle. I want a border around the circle of a few pixels, but to be of the window background color.
I’m trying to clear a slightly larger oval behind the one that will be visible, so it appear that the rectangle has a cutout.

I know there is a clearRectangle method, but there isn’t a similar clearOval.
If I try drawingColor = color.clear, it (obviously) draws nothing and the existing color remains.

Sorry if this isn’t clear…
Help?

2

I think you need to clip the drawing of the rectangle rather than trying to erase it afterwards.

I’ve had a quick look at the latest Xojo documentation and I think you could use Graphics.ClipToPath.
• Create a GraphicsPath that consists of the slightly larger oval.
• Save the graphics state
• Call ClipToPath
• Draw your rectangle
• Restore the graphics state
• Draw your circle

3

It doesn’t pick up on translucency, but Color.FillColor will get you very close to the Window background color.

Update: Annnnd today I learn it doesn’t play with Dark Mode.

4

I’ll check thanks.

5

Can’t do that because I don’t think that the graphics path doesn’t work on all platforms.

6

And you can’t simply draw first another circle bigger and with the color of the window background color ?

7

Console or web project ?

8

I’d love to, but I haven’t set the background color, so I need to know what the OS uses.

9

Desktop.

10

Yeah that’s what FillColor used to be used for exactly. I don’t know why they wouldn’t have updated it for dark mode.

11

From the docs…

Compatibility

All project types on all supported operating systems.

1 Like
12

So… this is all going to depend a lot on the target OS. macOS now gives their windows a slightly translucent effect and using FillColor to fill a circle is going to stand out like a sore thumb.

My suggestion is that you draw this special rectangle with the cutout using a picture with an alpha channel. The color portion of the picture will be solid (whatever color the rectangle is supposed to be). The alpha channel will be black where the color should appear and white where it should be transparent. Then you draw that image onto the canvas.

13

I’m opting to pick my own near white and near black color, so they’ll be exactly the same on all platforms.
Just implemented that, and it looks great.

I would have preferred to use the native colors, but I don’t want to jump through hoops to get this one part of the graphic to work.

thanks for the suggestions, and info, y’all.

14

That’s a reasonable workaround for Xojo’s lack of even-odd/winding rule when filling paths. Without taking steps, though, it won’t properly utilize the proper resolution of a scaled interface (i.e. high resolution) and may run into color matching issues between graphics drawn directly to a screen context and those initially drawn to an off-screen buffer.

The lack of compound paths in Xojo is pretty surprising, considering that GraphicsPath is right there; the Object2D stuff isn’t structured in such a way to easily accommodate this feature.

15

Sure it will. You can get the scale factor from the graphics context. Then you just make sure you create the picture and graphics context correctly. I’ve done it hundreds of times.

1 Like
16

In case someone is curious:

// scalex and scalex are the same
Dim sf as double = g.scalex 
Dim w as integer = 150
Dim h as integer = 100
Dim p as new picture(w * sf, h * sf)
Dim gg as graphics = p.graphics
gg.scalex = sf
gg.scaley = sf
1 Like