Part one:What it will do
ANy app should have a well designed specific purpose
, the purpose of this one is to let a user make 300 x 200 bit maps using
anycolor and one of three paint brushes.
No Win32 API functions are used here for the purpose of simplicity.The
purpose of this project is to familiarize one with , passing values , randomize
, common dialog ,pset and the use of public modular functions.
Follow the steps here and you'll have a paint program.
I didnt explain everything cause I figure some things can only be learned
, not taught , however if there is anything you caint figure out gimme
a hollar
I am one of those guys that will actually help
My Email Adress
PART ONE : CREATING THE CONTROLS
STEP ONE
Open the existing project and look it over , use it and see what it
does. Read each line of code and try to see where it fits in.
Now close the existing project.
STEP TWO
Open a new standard .exe project
Set the forms properties to the following
Start up position | Center screen |
width | 4665 |
height | 5595 |
Caption | App Title |
Minbutton | False |
Maxbutton | False |
Icon | Whatever you like |
Border style | 1 Fixed single |
The width and height is in twips (1440 twips per inch)
The Caption will be what is displayed at the top of the form , OR you
apps title
Min and max button prevents a user from maximizing the form (minbutton
= false is optional) because the size of the controls will not change when
the form is resized.Thus you'll have a bbig form with little on it.
Icon is the icon that will be displayed for your compiled executable
and in the forms upper left corner.
Border style Again prevents resizing.
The next project , an expansion on this one will use relative sizes
, so this won't need to be done.
STEP THREE
Add a picturebox (NOT AN IMAGE) with the following properties
Autoredraw | True |
Height | 3025 |
Width | 4525 |
Scale mode | 3-Pixels |
Left | 0 |
Top | 0 |
Borderstyle | 1- fixed single |
Appearance | 0 - flat |
Mousepointer* | 99-Custom |
Mouse Icon | Anything or Dots.ico |
Autoredraw determines whether or not the control has persistent graphics.If
this is not set the drawing will be saved and any work done to it will
be lost every time the control is refreshed or accessed by VB.
Scale mode sets the scale to standard pixels.If this is not set drawing
will be done in twips , and the drawing lines will be too small to see.
Borderstyle prevents resizing
Apearance makes it look flat , like paper.
Left and top insures that the controls corner is nested in the forms
corner.
Width and height are in twips ( But the actual mode is pixels).It just
has to be as such, for now.It's a VB thing.
Mousepointer 99-custom tells VB to use a specified graphic for the
mouse pointer when it is over the picturebox.
STEP FOUR
Right click on the toolbar
click components
Scroll down to microsoft common dialog controls 6.0 and check the box
to its right
Click the 'APPLY' button
A new control is on the tool bar
One that is our best friend
Now click that control and add it to the form with these properties
Name | Colordialog1 |
STEP FOUR
Add another picture box (NOT IMAGE CONTROL) below the existing one with
these properties
Appearance | 1-3D |
Name | Picforecolor |
Height | 375 |
Width | 375 |
borderstyle | 1- Fixed Single |
left | 45 |
top | 3240 |
STEP FIVE
Add a frame to the form , just below Picture1.Use these properties
Left | 480 |
Top | 3120 |
height | 2055 |
width | 735 |
caption | (make sure its blank) |
Now click in a blank space on the form.
STEP SIX
Add three images (Not picture boxes) inside the frame.
The first one should have these properties
stretch | TRUE |
height | 495 |
width | 495 |
top | 240 |
left | 120 |
borderstyle | 1-fixed single |
appearance | 0-Flat |
NAME | Imairbrush |
picture | Airbrush2.ico(included) |
This will become the button for the airbrush tool
Stretch insures that the control will maintain its current size and
smash whatever image we use into itself so that it fits.
The second one should be as follows
stretch | TRUE |
height | 495 |
width | 495 |
top | 840 |
left | 120 |
borderstyle | 1-fixed single |
appearance | 1-3D |
NAME | Impencil |
picture | pencil.ico(included) |
stretch | TRUE |
height | 495 |
width | 495 |
top | 1440 |
left | 120 |
borderstyle | 1-fixed single |
appearance | 1-3D |
NAME | Imairbrush2 |
picture | Airbrush3.ico(included) |
You should now have a littel toolbar lookin' thingy :-)
STEP SEVEN
now we can add a set of controls for qadjusting the size of the
pencil
First you need to know that the thickness of lines or points drawn
on a control is determined by its drawwidth property. Thats what these
will do for us.Let us make the pencils lead fat or small.
(1)Create a label like this
name | labelsize |
caption | 1 |
height | 495 |
width | 495 |
top | 3960 |
left | 1320 |
visible | false |
enabled | False |
Caption will become picture1s'
drawwidth value when the pencil is selected (I'll explain later) Must be
a number > 1
Enabled = false means
that a user cannot interact with it until the pencil option is select (again
it'll make sense shortly)
Visible = false Why let
them seeit when they can't use it , sides it looks better
(2)Create a command button
like such
name | Command4 |
caption | + |
height | 255 |
width | 375 |
top | 3600 |
left | 1320 |
visible | false |
enabled | false |
command1 & command2 are reserrved for the next project(The extension
mentioned earlier)
(3)And another command button
having these properties
name | command3 |
caption | - |
height | 255 |
width | 375 |
top | 4440 |
left | 1320 |
visible | false |
enabled | false |
STEP EIGHT
Add an image to the form , next to frame1. This will show a big pic
of the tool being used
Name | pictool |
top | 3120 |
left | 1800 |
height | 1935 |
width | 1695 |
stretch | true |
picture | Airbrush2.ico |
appearance | 1-3D |
borderstyle | 0-none |
STEP NINE
Two more command buttons
(1)
name | command5 |
caption | Save as |
height | 375 |
width | 975 |
top | 3120 |
left | 3480 |
(2)
name | command6 |
caption | open |
height | 375 |
width | 975 |
top | 3600 |
left | 3480 |
PART TWO : MAKING IT DO SOMETHING
STEP ONE
Right click in the project browser (The box over on the side that shows
all your forms)
add>
Module
hit enter when the dialog pops up
STEP TWO
A function is like a sub only that it is supposed to return values or
manipulate data.But it si only supposed to do 1 specific thing.
That thing is generally to return a value based on data that is passed
to it.Subs do stuff or return many values.
I use them both the same many times though , and it is not the best
practice.
Now we will add the pencil brush function
Pset works like this
it turns on a pixel using the objects(picture1.forecolor) forecolor
as default at a given co-ordinate. Ina few we'll set the objects color
to somethign other than black.
Because this function will be modular public we must specify the objects
loacation.Pset works as such.
form1.picture1.pset(x,y)
form1 is the objects location
picture1 is the object
Pset tells it to turn on the pixel
x and y are the co-ords wher eit will be turned on
Do these steps
Tools
add procedure
Name | PBrush1 |
Scope | Public |
Type | Function |
it should add some lines that look like this
Public Function Pbrush1( )
End Function
now put its variables inside the parenthiesieszsz
should look like this now
Public Function Pbrush1(x As Single, y As Single)
End Function
This is important as the data passed to this function will be converted
to that data type
When data is passed it means that something (usually a number) is sent
to a function when it is called.In this case the mouses co-ords
Now add this code into the function
Public Function Pbrush1(x As Single, y As Single)
Form1.Picture1.PSet (x, y) <<<<This turns on
the pixel at the mouses location , but size isnt yet set
With Form1.Picture1 <<<<This defines certain properties
of th object were drawing on for this operation
.DrawWidth = Form1.Labelsize.Caption <<<<This
is the draw width of picture1 as mentioned earlier
End With <<<<This ends the with
Form1.Picture1.PSet (x, y) <<<<This turns on the pixel
at the mouses location SAfety
End Function
now we must do this two more times
follow the same steps as before but add this code instead , And use
the names gieven for each function down here
In the pset methods below the (x+4,y-6) turns on a pixel for right
of x and six below y etc...
Public Function Pbrush2(x As Single, y As Single)
With Form1.Picture1
.DrawWidth = 1
End With
Form1.Picture1.PSet (x + 2, y + 1)
Form1.Picture1.PSet (x + 2, y + 3)
Form1.Picture1.PSet (x - 1, y + 2)
Form1.Picture1.PSet (x - 3, y + 2)
Form1.Picture1.PSet (x - 2, y - 1)
Form1.Picture1.PSet (x - 2, y - 3)
Form1.Picture1.PSet (x + 1, y - 2)
Form1.Picture1.PSet (x + 3, y - 2)
Form1.Picture1.PSet (x, y)
End Function
Public Function Pbrush3(x As Single, y As Single)
With Form1.Picture1
.DrawWidth = 1
End With
Randomize Timer <<<sets the seed for randomization
ctx = x + (1 + (Rnd * 16))<<<<the 1+ is important or itll
give numbers from 0 to 15 etc..
cty = y + (1 + (Rnd * 10))
ctx1 = x + (1 + (Rnd * 6))
cty1 = y + (1 + (Rnd * 7))
ctx2 = x + (1 + (Rnd * 5))
cty2 = y + (1 + (Rnd * 4))
Form1.Picture1.PSet (ctx, cty)
Form1.Picture1.PSet (ctx1, cty1)
Form1.Picture1.PSet (ctx2, cty2)
End Function
Now the function is set up , lets do something with it
STEP THREE
Back at form1
Double click picture1
it'll open up the code window for
Private Sub Picture1_MouseMove(Button As Integer, Shift As Integer,
x As Single, y As Single)
Leave the variable in parenthesis alone
Add this code in between those lines and END SUB so that it looks like this
Private Sub Picture1_MouseDown(Button As Integer, Shift As Integer,
x As Single, y As Single)
paintff = True
brushnum = 1
Select Case brushnum
Case Is = 0
Call Pbrush2(x, y)
Case Is = 1
Call Pbrush1(x, y)
Case Is = 2
Call Pbrush3(x, y)
Case Else
ky = MsgBox("Invalid Brush type selected OR feature
not yet implemented", vbOKOnly, "Error")
End Select
End Sub
obviously we havent added the other brushes yet so kepe the error msg
there
go to general decalrations of form1 and add
dim paintff as boolean
Notice how in the control structure we pass x and y when we Call Pbrush1(x,y)
now if you run the project and click the picture box itll make a small
dot
Now change your sub to Picture1_mousemove by selecting the upper right
combo box (it says mousedown)
and dragging down to where it says Mousemove
Add this code
If paintff = False Then GoTo out
Select Case brushnum
Case Is = 0
Call Pbrush2(x, y)
Case Is = 1
Call Pbrush1(x, y)
Case Is = 2
Call Pbrush3(x, y)
Case Else
ky = MsgBox("Invalid Brush type selected OR feature
not yet implemented", vbOKOnly, "Error")
End Select
out:
end sub
This will make it draw lines on the picturebox when the mouse is dragged
untill the button is raised
notice how we check to see if the button is down by checking IF paintff
= true
BUT WHAT ABOUT SIZE AND COLOR..In a minute
we still havent checked to see when the mouse button goes up , so once
you click it draws even after the button goes up
Now change your sub to picture1_mouseup
add this code
Private Sub Picture1_MouseUp(Button As Integer, Shift As Integer, x
As Single, y As Single)
paintff = False
End Sub
Now we know IF Painff = true then
ahh we are done with that.NOW size and color
STEP FOUR
COLOR
Right click on form1 and select view object
Double click on the tiny picturebox (Picforecolor)
the code window will pop up again
select Picforecolor_Dblclick
add this code
Private Sub Picforecolor_DblClick()
Colordialog1.ShowColor
Picforecolor.BackColor = Colordialog1.Color
Picture1.ForeColor = Picforecolor.BackColor
End Sub
its that simple , sheesh we could have done that before OR was he just saving that till after such a long assed step?
STEP FIVE
SIZE DOES MATTER
But first we have to set up our brush types
double click Impencil
add this code
Private Sub Impencil_Click()
Imairbrush2.Appearance = 1
Imairbrush.Appearance = 1
Impencil.Appearance = 0
brushnum = 1
Command3.Enabled = True
Command4.Enabled = True
Command3.Visible = True
Command4.Visible = True
Labelsize.Enabled = True
Labelsize.Visible = True
pictool.Picture = Impencil.Picture
end sub
Now doubleclick IMairbrush
add this code
Private Sub Imairbrush_Click()
Imairbrush.Appearance = 0
Imairbrush2.Appearance = 1
Impencil.Appearance = 1
brushnum = 0
Command3.Enabled = False
Command4.Enabled = False
Command3.Visible = False
Command4.Visible = False
Labelsize.Enabled = False
Labelsize.Visible = False
pictool.Picture = Imairbrush.Picture
End Sub
then doubleclick IMAirbrush2
ADD THIS code
Private Sub Imairbrush2_Click()
Imairbrush2.Appearance = 0
Imairbrush.Appearance = 1
Impencil.Appearance = 1
brushnum = 2
Command3.Enabled = False
Command4.Enabled = False
Command3.Visible = False
Command4.Visible = False
Labelsize.Enabled = False
Labelsize.Visible = False
pictool.Picture = Imairbrush2.Picture
End Sub
now with that done we must set up the code that changes the value of labelsize
its easy watch
STEP SIX
double click command4
add this code
Private Sub Command4_Click()
If Labelsize.Caption < 20 Then Labelsize.Caption = Labelsize.Caption
+ 1
End Sub
the above statements If labelsize.caption < 20 checks to see if teh value of labelsize is too big
go back to the form and double click command3
add this code
Private Sub Command3_Click()
If Labelsize.Caption > 1 Then Labelsize.Caption = Labelsize.Caption
- 1
checks to see if the sizze is to small
0 generates an error cause ya caint draw a line 0 pixels wide
End Sub
checks to see if the sizze is to small
0 generates an error cause ya caint draw a line 0 pixels wide
Now size , shape and color are set up WHATS LEFT?!?
STEP SEVEN
SAVING THE FILE
go back to the module and add these functions
tools add procedure etc...
Public Function saveit(thepath As String)
SavePicture Form1.Picture1.Image, thepath
End Function
Public Function loadit(thepath As String)
Form1.Picture1.Picture = LoadPicture(thepath)
End Function
On the form double clcik command5
add this code
Private Sub Command5_Click()
Colordialog1.InitDir = App.Path
Colordialog1.DefaultExt = ".bmp"
Colordialog1.Filter = "bitmaps|*.bmp"
Colordialog1.ShowSave
FileName = Colordialog1.FileName
saveit (Colordialog1.FileName)
end sub
notice that we dont actually call set thepath = colordialog1.filename
. It is important to remeber this
When passing values the first bracketed variable , regardless of name
, is always assigned to the first value in the function
Thus we could call thepath (in function saveit) foobar for or anything
and then when we call it pass the value and it still gives foobar the same
value as if wed named it the path.
Also notice that the same dialog box lets us invoke a save as dialog , cool huh
Now add this code to command6
Private Sub Command6_Click()
Colordialog1.InitDir = App.Path
Colordialog1.DefaultExt = ".bmp"
Colordialog1.Filter = "bitmaps|*.bmp"
Colordialog1.ShowOpen
FileName = Colordialog1.FileName
loadit (Colordialog1.FileName)
End Sub
There is still a couple more things to do
STEP EIGHT : THE LAST ONE
setting up the intial color and picture
add this to form_load (double click form1 any blank area)
Private Sub Form_Load()
Picforecolor.BackColor = Picture1.ForeColor
Picture1.Picture = LoadPicture()
End Sub