Урок 11. Графичен прозорец
До сега използвахме текстовия прозорец на средата за програмиране Small Basic за да се запознаем с основите на езика. Но освен да работим в текстов прозорец, средата за програмиране ни дава възможност да работим в е графичен прозорец.
Прозорецът се задвава във пиксели за ширина и височина. Ние използваме две стойности (координати), за да се идентифицира един пиксел в прозореца като:
- Х (хоризонтална) като стойността на координатата нараства о тляво на дясно, започвайки от 0 .
- Y (вертикалнa) координaта като стойността и се увеличава от горе до долу, започвайки от 0 . Точките в равнината на графичния прозорец се определят с две координати, който се заграждат в скоби.
Започваме с графичен прозорец и за да покажем обекта GraphicsWindow въвеждаме следното.
GraphicsWindow.Show()
Изпълнявайки написания в горния ред програмен код, получаваме следното:
Обърнете внимание, че на заглавната ивица на току що отворения прозорец е изписано Small Basic Graphics Window и вместо черния фон на прозореца се е появил бял, който е подразбиране .
Този прозорец е базов е графичен режим. Специфичното е че движението в него е подобно на построяване на обекти в равнинна координатна система, като за начална точка се взима върха на горния ляв ъгъл, който има координати (0;0). За да се върнем в редактора обаче трябва да затворим прозореца с кликване по бутон Х /close/, а не с натискане на произволен клавиш клавиш от клавиатурата.
Нека покажем графичен прозорец, който не е бял и е с определен размер
GraphicsWindow.BackgroundColor = "Blue"
GraphicsWindow.Title = "Графичен прозорец"
GraphicsWindow.Width = 320
GraphicsWindow.Height = 200
GraphicsWindow.Show()
Изпълнявайки на програмния код вие ще получите графичен прозорец, чийто фон е син и неговият връх на долния десен ъгъл е с координати (320, 200). Ако не зададем стойности прозореца ще бъде с размери 624 на 444 пиксела по подразбиране
Можем да променим стойностите за неговата ширина и дължина, както и неговия фон.
В графичния прозорец ще рисуваме различни фигури
За да начертаем отсечка ще използваме операцията DrawLine и като аргументи ще посочим координатите на двете нейни точки .
GraphicsWindow.DrawLine( 10,10,100,10)
GraphicsWindow.DrawLine( 10,10,10,100)
GraphicsWindow.DrawLine(30, 30, 100, 100)
GraphicsWindow.DrawLine(30, 100, 100,30)
Резултатът ще бъде следния:
Въвеждайки следния програмен код
GraphicsWindow.Width = 200
GraphicsWindow.Height = 200
GraphicsWindow.PenColor = "Green"
GraphicsWindow.DrawLine(10, 10, 100, 100)
GraphicsWindow.PenColor = "Red"
GraphicsWindow.DrawLine(10, 100, 100, 10)
Ние сме получили в бял прозорец две наклонени прави с два различни цвята, защото в програмния код сме използвали различни стойности на свойствата в графичния обект
Освен свойството PenColor, ние можем да използваме и други свойства на обекта, с които можем да показваме графичния прозорец по различен начин като
PenWidth – за дефиниране дебелината на молива.
BrushColor- за дефиниране цвета с който ще работи четката.
MouseX—за определяне хоризонталната позиция на мишката.
MouseY— за определяне вертикалната позиция на мишката.
Например кодът
GraphicsWindow.Width = 200
GraphicsWindow.Height = 200
GraphicsWindow.PenWidth = 10
GraphicsWindow.PenColor = "Green"
GraphicsWindow.DrawLine(10, 10, 100, 100)
GraphicsWindow.PenColor = "Gold"
GraphicsWindow.DrawLine(10, 100, 100, 10)
Ще изведе в графичния прозорец две линии с жълт и зелен цвят, но с по-голяма дебелина:
Нека решим следната задача:
Начертайте 10 хоризонтални линии с различна дебелина.
За целта ще използваме цикъл броячът му ще бъде използван получаване на различна дебелина на молива и изчисляване координатите на крайните точки на линиите, които чертаем:
GraphicsWindow.BackgroundColor = "Red"
GraphicsWindow.Width = 200
GraphicsWindow.Height = 160
GraphicsWindow.PenColor = "Blue"
For i = 1 To 10
GraphicsWindow.PenWidth = i
GraphicsWindow.DrawLine(20, i * 15, 180, i * 15)
Endfor
Ще получим следното:
Освен линия, в графичния прозорец можем да начертаем и други фигури като
Правоъгълник с GraphicsWindow.DrawRectangle(x1, y1, а, в), където (х1,у1) е координатата на левия горен връх на правоъгълника а а и в съответно неговата ширина и височина
Елипса се чертае по аналогичен начин с GraphicsWindow.DrawEllipse(x1, y1, а, в) .
Ако желаем фигурите да бъдат квадрат или окръжност трябва а=б
За да запълним вътрешността на фигурата с желан от нас цвят използваме инструмента четка и и присвояваме цвета GraphicsWindow.BrushColor=“цвят“
Нека въведем следния код:
GraphicsWindow.Width = 400
GraphicsWindow.Height = 300
GraphicsWindow.PenColor = "Red"
GraphicsWindow.DrawRectangle(20, 20, 300, 60)
GraphicsWindow.BrushColor = "Green"
GraphicsWindow.FillEllipse(20, 100, 300, 60)
Изпълнявайки го получаваме двете фигури
Правоъгълника е начертан с червен контур, докато елипсата е запълнена с зелен цвят.
За да начертаем фигура която да е с контур и запълнен цвят ще използваме и молив и четка
Нека направим следните промени
GraphicsWindow.Width = 400
GraphicsWindow.Height = 300
GraphicsWindow.PenColor = "Red"
GraphicsWindow.PenWidth="5"
GraphicsWindow.DrawRectangle(20, 20, 300, 60)
GraphicsWindow.BrushColor = "blue"
GraphicsWindow.FillRectangle(20, 20, 300, 60)
Виждаме, че сме получили правоъгълник с 1червен контур, който е запълнен със син цвят.
Задачи:
1.Начертайте квадрат и окръжност със страна и радиуса=40, като запълните квадрата с зелен цвят, а окръжността е с контур син цвят и е запълнена с червен
2. Окръжност и допирателна към нея.
3. Начертайте 20 вертикални линии с различна дебелина
4. Начертайте 2 квадрата, вложени един в друг със страни 40 и 60
5. Начертайте 2 правоъгълника вложени един в друг с дължина 80 и ширина 40 и дължина 60 ширина 30.
След този урок вие трябва да можете :