Skip to main content
Inspiring
December 10, 2006
Answered

simple drawing app...

  • December 10, 2006
  • 10 replies
  • 675 views
i want to create a simple drawing app.... the user can draw rectangles on the screen with drag and drop mouse action...

when a recatngle is drawn... the user can

1) stretch the size of the rectangle and

2) can 'drag' it around the screen with the mouse.


can any one help me with this... thanks.

This topic has been closed for replies.
Correct answer gav_payner
thanks kglad.....

i appreciate your help.....

happy christmas and all that..!

10 replies

kglad
Community Expert
Community Expert
December 17, 2006
you're welcome.
gav_paynerAuthorCorrect answer
Inspiring
December 17, 2006
thanks kglad.....

i appreciate your help.....

happy christmas and all that..!
Inspiring
December 15, 2006
in the dragbar would look the best....
kglad
Community Expert
Community Expert
December 15, 2006
try:

kglad
Community Expert
Community Expert
December 14, 2006
where do you want to display the name? in the dragbar above the rectangle? below the rectangle? elsewhere?
Inspiring
December 14, 2006
ok got it.....

all i need now is to display the name of the room

ive been trying this way....

with (this) {
clear();
lineStyle(1, 0x000000, 100);
beginFill(0x3333ff, 100);
moveTo(startX, startY);
lineTo(_xmouse, startY);
lineTo(_xmouse, _ymouse);
lineTo(startX, _ymouse);
lineTo(startX, startY);

lineStyle(10, 0x000000, 100);
this.createTextField("some box name", this.getDepth(), _root._xmouse,_root._ymouse,100,100);



thanks again.
Inspiring
December 13, 2006
hey kglad... im still a bit of a newbie with aciton script....

are you saying 3 rectangle movie clips... all the same size... r is the parent, with a dragable child rectangle... and another r child for resizing...?

so if you drag the drag / resize any of the r-child movie clips .... it will then drag / resize the main rectangle..?

thanks
kglad
Community Expert
Community Expert
December 13, 2006
no. here's sample code that adds a drag bar to your rectangle. you would add additional code to draw the "s" the "sizing" button, position it and assign handlers for it:

kglad
Community Expert
Community Expert
December 13, 2006
you can create child movieclips of r (for example, r.createMovieClip("drag",rectangleNum++) ) within startDraw(), update their position in r.onMouseMove and assign handlers for resizing and dragging in startDraw().

usually the drag movieclip would be placed along the top of the rectangle and the resize movieclip would be placed at the lower right corner of the rectangle, but those are just convential placements. you can position them whereever suits your needs.
Inspiring
December 13, 2006
good stuff...thanks

im still a bit lost with adding mouse handlers for the recangle movieclip..?

how can i create a few movie clips for the same rectangle...

thanks
Inspiring
December 11, 2006
hey kglad....
i got something like this so far.....

still a bit stuck on drawing a recatangle that can be scalable by the user and can be draged around the screen...


will i have to keep on creating movie clips for every rectangle the user wants to create....

im trying to buld a simple room map app, where the user can draw a plan of a house.. each room will be a rectangle.


onMouseDown = function () {
this.createEmptyMovieClip("rectang", 1);
rectang.lineStyle(1, 0x000000, 100);
rectang.moveTo(_xmouse, _ymouse);

};
onMouseMove = function () {
rectang.clear();
//draw rect here...
};
onMouseUp = function () {
};
kglad
Community Expert
Community Expert
December 11, 2006
yes, you'll want to create a few movieclips for each rectangle.

one just to contain the drawing methods and two (non-empty) others to contain the mouse handlers for dragging and resizing.

here's more detail on the drawing methods:

kglad
Community Expert
Community Expert
December 10, 2006
you'll want to have a button that the user presses to indicate that they want to draw a rectangle. when that button is pressed define

1. an onMouseDown handler that calls initiates the creation of a movieclip to contain the drawing, the lineStyle and a moveTo(_root._xmouse,_root._ymouse), and
2. an onMouseMove handler that clears the movieclip and contains a 4 lineTo() statements to draw the rectangle and
3. an onMouseUp handler that deletes the other handlers and itself.