Creating a very simple vector Designer?

Hi, there!

I want to create a simple Vector Designer. My mean of Vector designer is a designer like Macromedia Flash, Adobe Photoshop, etc.

User can draw line, rectangle, free hand, insert image, rotate every object on canvas.

Now Here is my question:
1- What is best base component of this designer? TPanel, TPaintBox, TScrollBox, etc?

2- How control insdide container (TPanel, TPaintBox, TScrollBox or something else  you suggesteed in question 1) can be resize, moved or rotated?

I just know this code that used for moving controls:

SendMessage(Panel1.Handle, WM_SYSCOMMAND, $F012, 0);

Here is very excelent but not-complete article about Form Design:

How can I add GrabHandle to components and How I must draw them in other controls?

3- How implemet a very simple drawing inside container?
For example how implement drawning a line or rectangle so user can draw any line and any rectangle on screen?

4- How Rotate any controls? is it possible to rotate them?

5- Do I have to user DirectX or OpenGL like Beez(for more information about Beez see end of question)?

I know some reference that can help:
1- A designer for creating SVG: Beez
Beez user DelphiX Package that is implemetaion of DirectX

2- A desinger for creating CAD Files: AutoRELAM

3- A Commercial product for adding Design Capability:

4- Other commercial product for adding Design Capability:

5- An OpenSource Project for generating Reports

Answer any question you know! It is not required to answering all of questions. Please help me more with sample source code!

Best Regards!
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

hello Mamouri, , , I am not understanding, all of your statements above, and what you are trying to get with all of your questions, I have done some graphical presentation programs and some user drawing programs. . . but you seem to think that a graphical drawing program is a component creation and move thing, like in the Delphi Magizine artical -

but it is NOT the way to do a graphical user drawing program, you will need to have a area to draw, and for the Delphi VCL this is probally the TPaintBox, and you will need to build your graphical display by using the MouseMove and drawing whatever you need on this PaintBox. . .

Here are two EE questions that will give you some code and ideas for doing this type of thing -

please look at the code at these questions and see if you can do the graphic operations there, like draw a Rectangle, or circle, and move it and resize it. . . Or create a Line and move it or rezize it. . . . but this is NOT and easy thing to do and you will have to design all of the methods for a graphical drawing program. . . .  ask questions if you need more information
MamouriAuthor Commented:
Hi, Slick!

Awesome code! Excelent work! Well done!

Always when I think a work is impossible or very hard to implement you show me that I am in a big mistake. Whith short codes you implement exactly what I want.

But I have some little question:
0- How can add Zoom In and Zoom Out ability? (Most Important)
1- Is it possible to add a GrabHandle to each shape? for resizing from Top, Left, Bottom, Right and TopLeft, TopRight, BottomLeft, BottomRight and Rotating it in any degress? (Important)
      |   |    ->   /\
       ---            \/
2- Can you please complete drawing FreeHand Shape? The Result shape must can be edited(reshaped) with grab handle apear like Beez! (Required for a vector designer)
3- How add a RealTime editing of text? (I mean editing text in TPaintBox) (It become more comfortable)
4- can you complete part that draw Pentagram and Hexagram dont work? (You know you are the best)
5- Is it possible to show/hide Grids?
6- Is it possible to create a Image object? Does Image object will be flickered free?

Slick, If you desire I can increse the points. I know that you are professional and dont have free time to answer to questions of a newbie like me!

BTW Thankx in your great help!


MamouriAuthor Commented:
Oh Slick sorry for my poor english. My native languages is not english so I had a lot of gramerical errors in my writings!

Thankx again for you patient!
CompTIA Network+

Prepare for the CompTIA Network+ exam by learning how to troubleshoot, configure, and manage both wired and wireless networks.

OK, I am real glad that you got some help from my code  :-)
But to do some what you have described may take more than a little code and some of it will require more advanved methods. . .
I am wondering why you would want to try and do a vector editor, when you do not seem to have the programming skills for graphic operations. . .

Anyway. . .
for   0- How can add Zoom In and Zoom Out ability? (Most Important)
If you do not have any ideas about how to do this then you may be trying to do something you need more experience to do.

For the GraficObj in the first page above, there is a TGraficObj  Record, like this

  TGraficObj = Record
    PosRect: TRect;
    FillColor, PenColor: TColor;
    PenWidth: Byte;
    Fill: Boolean;
    Layer, ObjType, ShapeIndex: Integer;
    Text: String[255];
    TextFace: String[64];
    TextSize : Integer;

and the  GraficObj1.PosRect  will set the dimentions if the graphic object. . . It should imediately pop into your mind that to "Zoom" you just change the Left, Top, Right, and Bottom of this PosRect, And it will depend on Where you want "Anchor" the "Zoom", If you want a Center "Anchor" point
then just divide the height and width by 2, and get the center point, then multiply the height and width by whatever "Zoom" factor you need and then add and subtract halh of the result to the center point for the new height and width

 - - - - - - - - - - - - - - - - - -

for 1- Is it possible to add a GrabHandle to each shape? for resizing from Top, Left, Bottom, Right and TopLeft, TopRight, BottomLeft, BottomRight and Rotating it in any degress? (Important)

If you want to rotate graphic objects, then you will need a really different thinking about this whole method of recording your graphic object positions can be done, this will turn into a purely trigonometry mathamatical formular using degrees angles with Sin, Cosin, tangent operations

- - - - - - - - - - - - -
You should really be able to draw a Pentagram and Hexagram in your sleep before you try and do a graphic editing program

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
for 2- Can you please complete drawing FreeHand Shape? The Result shape must can be edited(reshaped) with grab handle apear like Beez!

you can look at this EE question

which will show you how to make the Array of TPoint for drawing a FreeHand Shape with the mouse down and mouse Move and mouse Up events on a PaintBox, as far as adding mouse drag "Handles", I guess you could draw some sort of indicator at each Point of the draw, and test the mouse positon to be plus or minus so much from a point, but you will need to develop your own techniques of getting the mouse at the point positions

- - - - - - - - - - -  --
you might consider using an Array of Tpoints for all of your straight Line side graphic objects (not circles) and having and array of TPoint for each one

 - - - - - - - - - - - - - - - - - - - - - - - - -

here are two button clicks, the first one will draw a Pentangle on a PaintBox, and the second button click will rotate that Pentangle some degrees

    { Private declarations }
    AryPts   : Array[0..96] of TPoint;

procedure TForm1.FormCreate(Sender: TObject);
AryPts[0].Y := 0;
AryPts[0].X := 0;

procedure TForm1.button_DrawPentClick(Sender: TObject);
RadDegree = Pi/180;
Degrees    = 360;

xCenter, yCenter, Radius, NumPts, i: Integer;
Rotation, Sin1, Cos1: Extended;

xCenter := (PaintBox4.Width) shr 1;
yCenter := (PaintBox4.Height) shr 1;
{I just use the center of the paint box}
NumPts := 5;
{you can have any number of points from 3 to 96}
Rotation := Degrees/NumPts;
Radius := yCenter;
for i := 0 to NumPts - 1 do
  {this is the trigonometry that does all of the Angle and Sin and Cos stuff}
  SinCos(((i * rotation) + 90) * RadDegree, Sin1, Cos1);
  AryPts[I].X := xCenter + Round(Cos1 * Radius);
  AryPts[I].Y := yCenter - Round(Sin1 * Radius);
PolyGon(PaintBox4.Canvas.Handle, AryPts, NumPts);

procedure TForm1.sbut_RotatePentClick(Sender: TObject);
Degree, Angle, Sin1, Cos1, Length: Extended;
CenterP: TPoint;
Rect1: TRect;
i: Integer;
{this will rotate the pentagram whatever Degree you set with Degree}
if (AryPts[0].Y = 0) and (AryPts[0].X = 0) then Exit;
Degree := 22;
{rotate 22 degrees}
Rect1 := Rect(2000,2000, -2000, -2000);
for i := 0 to 4 do
  {this gets the Bounding Rectangle of the points}
  Rect1.Left := Min(Rect1.Left, AryPts[i].x);
  Rect1.Top := Min(Rect1.Top, AryPts[i].y);
  Rect1.Right := Max(Rect1.Right, AryPts[i].x);
  Rect1.Bottom := Max(Rect1.Bottom, AryPts[i].y);
CenterP.x := Rect1.Left+((Rect1.Right - Rect1.Left) shr 1);
// get the center point of bounding Rect
CenterP.y := Rect1.Top+((Rect1.Bottom - Rect1.Top) shr 1);
for i := 0 to 4 do
  Angle := 180 * (1 + ArcTan2(AryPts[i].y-CenterP.y, AryPts[i].x-CenterP.x) / Pi);
  Length := Hypot(abs(AryPts[i].y-CenterP.y), abs(AryPts[i].x-CenterP.x));
  Angle := DegToRad(Angle+Degree);
  SinCos(Angle, Sin1, Cos1);
  AryPts[i].x := Round(CenterP.x-(Cos1* Length));
  AryPts[i].y := Round(CenterP.y-(Sin1* Length));
PolyGon(PaintBox4.Canvas.Handle, AryPts, 5);
{this is for a pentangle, but can work for others also}
3 - How add a RealTime editing of text? (I mean editing text in TPaintBox) (It become more comfortable)
This would require the Paint box to have keyboard focus, and you would need to create a cursor and draw text and erase and move the cursor, I am not sure you can do this with a PaintBox since it is a TGraphic Control, and would take some doing, Even some of the popular Graphic editors do NOT offer this although you could draw the text on the paint box as they typed into an EditBox

5- Is it possible to show/hide Grids?

yes, draw the grids to show them and don't draw then to hide them. . . What kind of question is this? ?

MamouriAuthor Commented:
Thankx great slik! I know that some of my question was crazily!

I dont have enought exprience in graphic and vecotr designer and your answer show me the way.

It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Graphics Software

From novice to tech pro — start learning today.