[Last Call] Learn about multicloud storage options and how to improve your company's cloud strategy. Register Now


Creating a very simple vector Designer?

Posted on 2003-11-17
Medium Priority
Last Modified: 2013-11-19
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!
Question by:Mamouri
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
LVL 34

Expert Comment

ID: 9769064
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

Author Comment

ID: 9781000
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!



Author Comment

ID: 9781034
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!
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

LVL 34

Accepted Solution

Slick812 earned 2000 total points
ID: 9784210
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
LVL 34

Expert Comment

ID: 9784940
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}
LVL 34

Expert Comment

ID: 9784964
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? ?


Author Comment

ID: 9805423
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.


Featured Post

Ask an Anonymous Question!

Don't feel intimidated by what you don't know. Ask your question anonymously. It's easy! Learn more and upgrade.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Hello everybody This Article will show you how to validate number with TEdit control, What's the TEdit control? TEdit is a standard Windows edit control on a form, it allows to user to write, read and copy/paste single line of text. Usua…
Keep your audience engaged and get the most out of your next presentation with these quick Prezi tips.
It is a freely distributed piece of software for such tasks as photo retouching, image composition and image authoring. It works on many operating systems, in many languages.
Learn how to use the remote presentation tool in Prezi to allow you to harness the power of this cloud based presentation platform. You can show your presentation with a remote audience using this free tool.
Suggested Courses

650 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question