Click here to Skip to main content
15,867,704 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more: , +
Hi,

I would like to write a program that enable user to draw geometric shapes like circles, triangles, rectangles and so on.
I would like also to be able to drag and drop or resize a shape that was previously drawn.

1) I thought to draw the shapes inside a Panel. Does it seems reasonable ?
2) Say I drew several shapes. Then I want to resize the first drawn shape. How can I identify that the first shape was clicked ?

Thanks !
Posted

Have a look at this[^] cool article. I believe that it could help you a lot! :)

[2c from Brady Kelly] That article describes a shape or vector based drawing model, which is perfect for what you need. There is no need to worry about pixels.
 
Share this answer
 
v4
Hi,
Thank you for the link, but all I want is to understand the idea rather than reading a lot of code.
I do have some experience with drawing graphics in GDI+.
At this point I just want to understand the idea of resizing/moving a circle for example.
After I draw a circle, it becomes a part of a Bitmap. Of course, I do save circle's details in some other object.
But what I don't understand is how to implement the following:
when the mouse is over the circle, the circle is chosen, and then using some key enables the user to resize/move it.
How can I know that the mouse is over the circle ?
Do I need to check the mouse coordinates vs all circle pixel coordinates ?
I'm looking for simpler solution....
 
Share this answer
 
Typically, you would store each shape in memory and each time a new shape is added, you redraw all those shapes to a new bitmap (and discard the old one).

To detect which shape a mouse is over, the simple way is to check which shapes it collides with at that pixel, then select the top most shape.

However, if there are a lot of shapes, it might be faster to render a pseudo-bitmap that contains information other than color for each pixel. For example, you could store which shape rendered that pixel. So, you'd just have to find the mouse coordinates in that pseudo-bitmap and then you'd know which shape rendered that pixel.

Also, you might be able to use that pseudo-bitmap to render new shapes to the bitmaps without having to redraw all the shapes. You could just apply the new shape, making sure not to overwrite any pixels for shapes that are above the new shape. And if you have to modify an existing shape (e.g., to rotate it), you just find all it's pixels, remove them, then render all the other shapes at those pixels (then you'd redraw the shape you modified).

There are other ways of doing that, but those should give you some ideas.
 
Share this answer
 
Hi,
Regarding the pseudo-bitmap:
Suppose I add 1 circle. In order to add this info to the pseudo-bitmap, I need to know all the pixels this circle takes.
What is the best way to find all these pixels ?
Thanks !
 
Share this answer
 
Each pseudo-pixel could store a class that has a property that stores the shape that drew that pixel (that class could also store other information about that pixel, such as z-index, if need be). Draw the shapes from the back to the front, so shapes on top overwrite shapes below them. When a shape writes to a pseudo-pixel that was already written to, it just creates a new pseudo-pixel to replace that one (so that pseudo-pixel now points to the shape on top of the other shape).

You could get more advanced by having each pseudo-pixel store a list of shapes that were drawn to it. Then each shape could also store each pseudo-pixel it was written to. That way, when you remove a shape, you can remove it's pseudo-pixels and redrawing will be quite fast (as you have a list of other pixels that could replace the removed pixels). This technique would, however, take up quite a bit of memory (given enough shapes). If you wanted to remedy this somewhat, you could store some of this data to the hard drive, so that you don't run out of RAM.

That's getting a bit advanced though. If you're a beginner, I recommend just storing the shapes in memory then redrawing them to a new bitmap whenever a change is made. To detect which shape a mouse clicks, you could just loop through each shape and find the top-most shape that would be drawn to the pixel the mouse was clicked over.
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900