Hi All,

I’m building a pixel editor, and the idea is that as you mouse-over the canvas it draws a pixel overlay using graphics.draw to indicate where you would fill in a pixel on mouse-down.

As soon as you move off one square pixel the overlay gets erased, and a new one is drawn under the mouse in the new position.

That works fine for smaller images, but for larger images I’m seeing some delay/lagginess which I think is due to constantly calling new Picture(width, height) each time the mouse moves into a new pixel’s area.

What I would prefer to do is just call Graphics.Delete(x, y, w, h) to remove anything drawn in that region. But it looks like that’s not an available function.

Am I just missing similar functionality under a different method, or is there no way to delete drawing done on a transparent background? (It must be transparent because the whole pixel editor is designed using layers, and the mouseover layer is superimposed on the underlying graphics).



Why not using Graphics.ClearRectangle?

I’m not quite understanding what you’re describing. Could you post a screenshot of the system in action?

“Delete” a rect is just painting a rect with something, I wonder what 100% transparent “white” would cause on Xojo.

Sadly Graphics.ClearRectangle() says it paints a rect with “the color of the parent Window”, and that I guess is not a see through the pixels underneath.

On Mac ClearRectangle clears it to transparent. On Windows / Linux it clears it to window background colour.

This is probably exactly what I was looking for!

I feel silly for not noticing it in the documentation, thank you!

1 Like

Yes, that might be a problem on Windows. I wonder why it wouldn’t just make it transparent like on Mac?

Because on the framework on Windows that Xojo uses Transparent is very very slow and to avoided at all costs.

I marked this as the solution because it is working properly on Mac. It sounds like I may need to use a different technique, or just stick to using new Picture() to clear the image, on windows.

Thanks again!

If I understand this correctly, you have something like a chess board, and as you move the mouse about, the ‘square’ that the mouse is over lights up in some way.

Do this:

  1. Create a picture.
  2. Draw the current state of the design on that. No highlighting, just the actual squares
  3. In a canvas, draw that picture to the canvas in the paint event.
  4. Identify the square that the mouse covers, and (if the mouse is within the canvas area) draw a semi transparent square , either using .fillrectangle, or by drawing an ObJect2d in the Paint event after the image has been drawn.
  5. In the mousemove event, .invalidate the the canvas.
  6. in the mouse exit event, invalidate again.