learning by sample gdi+ - rotating text
DESCRIPTION
For more tutorial visit www.bukansembarang.infoTRANSCRIPT
w w w . B u k a n S e m b a r a n g . I n f o © 2 0 1 0
Page 0
GDI+ : Rotating Text 2010
w w w . B u k a n S e m b a r a n g . I n f o © 2 0 1 0
GDI+ : Rotating Text
Learning By Sample Series
w w w . B u k a n S e m b a r a n g . I n f o © 2 0 1 0
Page 1
GDI+ : Rotating Text 2010
Foreword
Learning By Sample ?
So, why should I made this tutorial freely accessed by everyone ? Well, surely I
am just nobody, I also just another ordinary person with ordinary knowledge. However,
I always feel that some persons in the internet giving away their tutorial for free and I
feel being helped by them. Then, I remember one of my senior wisdom words : “If you
want to be given more, then start to give more”. And of course, I really believe those
words, since that I already proof it to be right all the time.
Also, I’m not an English native speaker, however, I just try to improve my
English in any other way, especially in written format. Thus, I think writing is the best
practice to improve my English freely. However, you will find many grammatical errors
in my tutorial, so please send me comments and also suggestion to improve it.
Then, why the format using Learning By Sample series ? Is it really different with
other tutorials out there ? Ehm, I already wrote three books (in Indonesian) using this
kind of format, and many readers already contact me about how this format really help
them to learn from the scratch. So, why in the world I’m not re-create it in English
format, right ? Eventhough actually, it is similar with Hands On Lab series which
already famous in Microsoft site previously.
All of my lesson also being designed as short samples and short time exercise.
Thus, I hope that each of tutorial series would take only at least 10-15 minutes
maximum to learn. Why keep it short ? Because many beginner (and even expert) will
find boring whenever they must keep studying more than 15 minutes (but you will
never get bored when you online in such time right ?).
w w w . B u k a n S e m b a r a n g . I n f o © 2 0 1 0
Page 2
GDI+ : Rotating Text 2010
Another reason is just because many of samples in this series come up from my
lecturing task exercise. So, I just try to compile all my lab exercises in order to keep it
tidy and also reusable for my students. That’s why you will find many unsorted course
material inside these series, however, just take a seat and enjoy the ride !
Requirements
In this series, I try to give simple example about GDI+. So what is GDI+ anyway ?
GDI+ or GraphicsDrawing Interface is merely part of .NET Framework which entirely
purposed in manipulating graphics. However I’m not going to make you understand
complex theory about this class. I just try to make you understand it in very simple and
stupid way.
All of my samples in this series use Visual Web Developer 2010 Express edition
however you can also do it all using Visual Studio. If you really want to follow this
series, then you should aware that basic programming knowledge is needed. You
should also familiar with ASP .NET especially for version 3.5 above.
FYI, I’m a VB guy, so please don’t complaint if I use VB entirely in this series. But
nowadays, there’s no such useful things if we argue about language differences,
because I just try to share something that I know. So, if you don’t like VB and want to
have another tutorial with your own favourit language, then I’d be happy to read it.
Now, let’s get started…….
w w w . B u k a n S e m b a r a n g . I n f o © 2 0 1 0
Page 3
GDI+ : Rotating Text 2010
Let’s Get Started
1. First, ensure that you already open Visual Web Developer 2010 Express Edition
2. Create a newly blank website and give it a name
3. Now, let’s create a new blank web page
w w w . B u k a n S e m b a r a n g . I n f o © 2 0 1 0
Page 4
GDI+ : Rotating Text 2010
4. In newly created web page, insert new table which has 3 rows and 2 columns, by
clicking menu Table � Insert Table and in available dialog box set its rows and
columns value :
5. Type some text just for descriptive reason in first columns :
w w w . B u k a n S e m b a r a n g . I n f o © 2 0 1 0
Page 5
GDI+ : Rotating Text 2010
6. Then put a Textbox at first row in second column :
7. Next step is placing a RadioButtonList at second row in second column, then click
at its Smart Tag in order to choose sub menu Edit Items. After that create four new
items which will represent rotation degree for upcoming text, also set its Repeat
Direction property into Horizontal value, thus it will stretch right for all its item :
w w w . B u k a n S e m b a r a n g . I n f o © 2 0 1 0
Page 6
GDI+ : Rotating Text 2010
8. Now, focus on last row of the tabel, at first column, put a Button inside it and at
second column put an Image control.
w w w . B u k a n S e m b a r a n g . I n f o © 2 0 1 0
Page 7
GDI+ : Rotating Text 2010
9. Let’s move on to the code editor, just double click at the Button and type this code :
10. Don’t forget to put reference code at the top of your code :
11. Ok, I give you some simple explanation here :
a. Just like previous chapter, we must create a temporer “canvas” first :
w w w . B u k a n S e m b a r a n g . I n f o © 2 0 1 0
Page 8
GDI+ : Rotating Text 2010
b. Then we prepare the rotation process in this lines :
c. And the simple thing for drawing text using GDI+ :
d. Next step ? Surely we have to save it in temporary image file and display it in
Image control
e. Of course, never forget to dispose all the objects….
w w w . B u k a n S e m b a r a n g . I n f o © 2 0 1 0
Page 9
GDI+ : Rotating Text 2010
12. Are you done yet ? Just execute the web page and see the result :
w w w . B u k a n S e m b a r a n g . I n f o © 2 0 1 0
Page 10
GDI+ : Rotating Text 2010
13. Ok then, I’ve heard the kickoff whistle between MU vs Sunderland, so see you in
next chapter. I promise that I’ll give you more exciting samples of GDI+, thumbnail
generator and of course the most anticipating sample in GDI+ implementation :
creating captcha……..