Solved

Creating a very simple vector Designer?

Posted on 2003-11-17
7
640 Views
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:

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

Here is very excelent but not-complete article about Form Design:
http://www.thedelphimagazine.com/samples/1355/1355.htm

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
http://beez.sourceforge.net
Beez user DelphiX Package that is implemetaion of DirectX

2- A desinger for creating CAD Files: AutoRELAM
http://www.gryc.ws/autorealm.htm

3- A Commercial product for adding Design Capability:
http://www.greatis.com/formdes.htm

4- Other commercial product for adding Design Capability:
http://www.wpcubed.com/products/wpform/index.htm

5- An OpenSource Project for generating Reports
http://sourceforge.net/projects/freereport/

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

Best Regards!
0
Comment
Question by:Mamouri
  • 4
  • 3
7 Comments
 
LVL 33

Expert Comment

by:Slick812
Comment Utility
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 -
 http://www.thedelphimagazine.com/samples/1355/1355.htm

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 -

http://www.experts-exchange.com/Programming/Programming_Languages/Delphi/Q_20619562.html

http://www.experts-exchange.com/Programming/Programming_Languages/Delphi/Q_20718897.html

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
0
 
LVL 3

Author Comment

by:Mamouri
Comment Utility
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!

Regards

0
 
LVL 3

Author Comment

by:Mamouri
Comment Utility
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!
0
How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

 
LVL 33

Accepted Solution

by:
Slick812 earned 500 total points
Comment Utility
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

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

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
0
 
LVL 33

Expert Comment

by:Slick812
Comment Utility
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

http://www.experts-exchange.com/Programming/Programming_Languages/Delphi/Q_20252555.html

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
    { Private declarations }
    AryPts   : Array[0..96] of TPoint;

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

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

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

begin
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
  begin
  {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);
  end;
PolyGon(PaintBox4.Canvas.Handle, AryPts, NumPts);
end;

procedure TForm1.sbut_RotatePentClick(Sender: TObject);
var
Degree, Angle, Sin1, Cos1, Length: Extended;
CenterP: TPoint;
Rect1: TRect;
i: Integer;
begin
{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
  begin
  {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);
  end;
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
  begin
  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));
  end;
PolyGon(PaintBox4.Canvas.Handle, AryPts, 5);
{this is for a pentangle, but can work for others also}
end;
0
 
LVL 33

Expert Comment

by:Slick812
Comment Utility
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? ?

0
 
LVL 3

Author Comment

by:Mamouri
Comment Utility
OK!
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.

Thankx
0

Featured Post

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

I've been using this technique since Adobe CS2, and it should work with any version of Illustrator that includes the appearance panel. In this tutorial we'll create a button using the appearance panel in Adobe Illustrator, and then save it as a r…
Keep your audience engaged and get the most out of your next presentation with these quick Prezi tips.
In this second Micro Tutorial in the series,  viewers will learn more basic shortcuts and functions of Illustrator. In this tutorial you will learn about the eyedropper tool, zoom , ellipses and more.
Learn how to create interesting presentations by including videos to keep your audience engaged using Prezi. Select "Insert" from the top menu in your Prezi editor: Select "YouTube Video": Paste the video URL into the prompt: "Select "Insert":…

728 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now