Canvas drawing

Hi guys,
I wanted to run it by you just in case somebody did something similar so I don’t have to reinvent the wheel. I want to draw a circle to mark the area when I click the mouse in a position of the car. I was reading some but quite don’t get it yet. Maybe someone has a sample project I can download to see or give me some pointers?

Thanks in advance

Add 2 form-level integer variables called (eg)
selected_x and selected_y
of type integer,
default values of -999 each

When the canvas PAINT event fires, you draw the car image.

If the selected_x and selected_y are NOT -999,
draw a circle around the selected_x,selected_y co-ordinates
using g.drawoval selected_x,selected_y, 10,10
end if

When the mouse is clicked on the image, you detect the position in the mousedown event
Store the x,y co-ordinates in selected_x, selected_y
Then refresh the canvas

1 Like

Thank you Jeff. That worked.
Any way I can erase what i have drawn maybe by clicking on the area again? I looked it up and the last thing I saw was to reload the backdrop picture but that erases everything except for the last drawing.

You havent drawn anything permanent with my code
if you no longer wanted the circle, set the co-ordinates back to -999

I suspect that you now have a long list of questions about how to create a full-on drawing package, rather just than the original question about how to draw a circle where you click.
For example, the backdrop want mentioned in the original post.

So: what do you actually want to do?

The backdrop is the picture of the car outline I first posted. What I want the user to do is to click on the area(s) of the car and put a circle on it (which is what I did with your code). What I want is to be able for the user to erase the circle(s) should they changed their mind where they put the circle to begin with. I first though by clicking on a circle that is already drawn, if it exists, then remove it. Then I put a button to just erase everything and I though by reloading the backdrop, it would erase everything but the last circle stays there. I am sorry for all these questions, I tried to search without posting but it is still not clear to me.

if you change the currentx and currenty properties when the user clicks, the circle will move to the new position
If you dont want a circle (clearing it) , set the currentx and currenty values to -999
the original answer does all that for you.

Now I understand. Working like a charm. Thank you Jeff for all your help. Much appreciated!

Im sorry Jeff, I thought I understood but I am missing something. I went to save the canvas with all the selected ovals I put but it only saved the backdrop and the last oval. I know I am missing something simple like process each oval I paint.

ps. reading on your response. Right now everytime I click on different area of the canvas, it doesnt erase the previous oval but instead adds another one which is what I want so the user can select different location on the car. Let me know if you want me to post a picture of how I want to save to .png or the codes.

Did you look at the examples in Xojo? there is one called ObjectsInCanvas

1 Like

The original question

I want to draw a circle to mark the area when I click the mouse in a position of the car.

and my answer, assume there is one circle.
If you want several circles, you could just draw on the original image.

That doesnt allow you to erase, however, so you need to maintain both the original image plus a list of ‘circle positions’
Erasing is a process of removing one of the items from the list of positions, then redrawing again.

It is time to look at the examples, because the requirement (as I expected) was more than you asked originally, and the examples contain a fuller worked solution for you.

Thank you Jeff and Ivan. I did check the examples but I will check them out again to see if i figure it out.

automotive auto refinish market? looks familiar to one of my topics… :wink:

Hi Pawel,
Yes it is. They want to print out a sheet when the vehicle comes in showing where the damages are.

Hi Guys,
I am almost there. I modified the ObjectsInCanvas example to something that could work for me. The only thing that I am stuck on is how to put the backdrop. I tried adding an object which is fine but when I tried to move a particular object, I can’t because the big object gets the focus. I have included a link with the source to see if anyone can help me. The ideal will be a backdrop (and is for the vehicle outline).

Thanks again

I got it guys. Thank You

@Allen_Arissa did you managed to fix that ? i tried accessing your link and it seems that it is not available anymore, i’m interested in something like this as well but me i need to move the objects in the canvas and then to store their coordinates.


Hello Allen
my Examble mit Pixmapshape

Thanks a lot, that is apparently what i was looking for

Now i need to match my canvas with the paper and make sure that dot x on paper is same with the one on canvas.

Thanks again

a late reply but why not… I have the same problem few years ago - the body shop was able to mark “parts” of car body to declare total damage or partial damage (whether the part needs to be fully repainted / replaced or just partially painted). Combined with car make/model I had a database of surface areas and then - I could calculate approximate paint spendings. The ability to predict of costs / time of repair was nice thing to have :slight_smile: