Prijavi problem


Obeleži sve kategorije koje odgovaraju problemu

Još detalja - opišite nam problem


Uspešno ste prijavili problem!
Status problema i sve dodatne informacije možete pratiti klikom na link.
Nažalost nismo trenutno u mogućnosti da obradimo vaš zahtev.
Molimo vas da pokušate kasnije.

C# programiranje grafičkog korisničkog interfejsa

Графика у окружењу Visual Studio

Задавање боја

Приликом сваког цртања треба прво изабрати боју. У .NET окружењу језика C# велики број боја је именован, тако да се за задавање боја могу користити њихови називи на енглеском. Неке од боја која се често користе у програмима су:

Color.Black

Црна

Color.White

Бела

Color.Red

Црвена

Color.Green

Зелена

Color.Blue

Плава

Color.Cyan

Reзеда

Color.Magenta

Љубичаста

Color.Yellow

Жута

Color.Orange

Наранџаста

Именованих боја има много више него што је овде наведено, а до њих је веома лако доћи. Довољно је да откуцате Color. и окружење Visual Studio ће понудити богат избор у падајућој листи. Ако се листа из било ког разлога није отворила (или сте је затворили на пример притиском на тастер Escape), можете да је (поново) отворите притиском на тастере Ctrl + Space.

Списак именованих боја је прилично велики, али то је само мали део од укупног броја свих боја које рачунар може да прикаже, а тај број је око 16 милиона. Сваку од тих нијанси (била она именована или не) можемо да задамо помоћу бројева. За то се највише користи такозвани RGB модел боја. Наиме, у рачунарској графици свака боја се добија мешањем одређене количине црвене, зелене и плаве, по чијим именима на енглеском (Red, Green, Blue) је RGB модел и добио име. На пример, комбиновањем црвеног и зеленог светла добија се жуто светло, комбиновањем црвеног и плавог љубичасто, а комбиновањем плавог и зеленог цијан. Комбиновањем светла све три основне боје добија се бело светло док се црно светло добија када се сва три светла искључе. Сиво светло се добија када се измеша подједнака количина, црвеног, зеленог и плавог светла.

https://petljamediastorage.blob.core.windows.net/root/Media/Default/Kursevi/Srednja/cs/RGB.png

Боју тако можемо описати наводећи три броја (у овом случају то су бројеви од 0 до 255), који редом представљају количину црвене, зелене и плаве компоненте у боји коју дефинишемо. Зато је тачан број свих могућих боја једнак \(256 \cdot 256 \cdot 256 = 16~777~216~\). Ми смо у примеру „Боја позадине” већ видели како се боја може задати помоћу ова три броја (количине црвене, зелене и плаве смо задавали помоћу вредности нумеричних поља). Наредба је изгледала овако:

BackColor = Color.FromArgb(r, g, b);

Овде смо вредност Color.FromArgb(r, g, b) доделили својству BackColor формулара, тако да је позадина формулара добијала задату боју. Сама вредност Color.FromArgb(r, g, b) би могла да се употреби у програму на различите начине. На пример, може да се запамти у променљивој (тачније структури) типа Color ради касније употребе, да се појави као параметар неке функције и сл.

Color c1 = Color.FromArgb(255, 0, 0);
...
Brush braonCetka = new SolidBrush(Color.FromArgb(97, 26, 9));
...

Наравно, на исти начин могу да се користе и именоване боје:

Color c1 = Color.Red;
...
Brush crnaCetka = new SolidBrush(Color.Black);
...

У случају да је нека боја именована, можемо да је задамо на било који од ова два начина. Например, све једно је да ли пишемо Color.Red или Color.FromArgb(255, 0, 0). Ево још неких примера задавања боја помоћу компоненти:

Color.FromArgb(255, 0, 0)

црвена

Color.FromArgb(0, 255, 0)

зелена

Color.FromArgb(0, 0, 255)

плава

Color.FromArgb(255, 255, 0)

жута

Color.FromArgb(0, 255, 255)

цијан

Color.FromArgb(255, 0, 255)

љубичаста

Color.FromArgb(255, 255, 255)

бела

Color.FromArgb(0, 0, 0)

црна

Color.FromArgb(128, 128, 128)

сива

Color.FromArgb(255, 128, 0)

наранџаста

Color.FromArgb(255, 128, 128)

розе

Приметимо да су нијансе сиве боје препознатљиве по томе што су у њима количина црвене, зелене и плаве једнаке. Што је та количина мања, нијанса сиве је тамнија и обрнуто, веће једнаке количине црвене, зелене и плаве представљју светлије нијансе сиве (на основу RGB вредности, црну и белу можемо да посматрамо као најтамнију и најсветлију нијансу сиве).

Пример „Боја позадине” можете да искористите да испробате и изабрете боје које желите да користите у својим програмима. Када изаберете боју, треба само да препишете вредности R, G, B у други програм. На исти начин можете да бирате боје и из програма Paint, као и са многих сајтова (тражите color picker).

Утврдите своје знање о бојама тако што ћете одговорити на наредних неколико питања.

         Q-1: Поређајте тројке параметара функције Color.FromArgb() тако да редом дају црну, плаву, црвену и зелену боју.

(0, 0, 0)
(0, 0, 255)
(255, 0, 0)
(0, 255, 0)
        

    Q-2: Која од наредних боја је нека нијанса сиве?

  • Color.FromArgb(1, 12, 123)
  • Покушајте поново
  • Color.FromArgb(128, 0, 128)
  • Покушајте поново
  • Color.FromArgb(0, 0, 128)
  • Покушајте поново
  • Color.FromArgb(145, 145, 145)
  • Тачно

    Q-3: Које боје се мешају да би се добила љубичаста боја?

  • црвена и зелена
  • Покушајте поново
  • плава и црвена
  • Тачно
  • зелена и плава
  • Покушајте поново
  • црвена, зелена и плава
  • Покушајте поново

    Q-4: Како би се боја Color.FromArgb(240, 230, 18) најбоље могла назвати?

  • Плавкаста
  • Покушајте поново
  • Црвенкаста
  • Покушајте поново
  • Жућкаста
  • Тачно
  • Зеленкаста
  • Покушајте поново

Координатни систем

Координате су нам веома важан појам и са њима ћемо се сусретати у баш сваком програму са графиком. Положај свих објеката (тачака, дужи, кругова, текста, готових слика итд.) на прозору одређује се њиховим координатама у координатом систему прозора.

Координатни систем прозора је сличан, али ипак мало другачији од оног који се користи у математици. Положај тачке је и у овом случају одређен уређеним паром њених координата (координатом x тј. апсцисом и координатом y тј. oрдинатом). Јединица мере је један пиксел.

У рачунарској графици, координатни почетак је у горњем левом углу прозора. Координата x расте када се крећемо на десно (као и у математици), али координата y опада када се крећемо на горе, односно повећава се када се крећемо на доле, што је другачије од уобичајеног координатног система из математике. Нека је дата тачка A(5,3). Ако бисмо померили ову тачку за 1 на горе и задржали њену x координату, тада би нове координате тачке A биле A(5,2). Ако бисмо тачку A са тренутне позиције померили на доле за 2, нове координате би јој биле A(5,4). Дакле, прва координата тачке одређује колико је тачка удаљена од леве ивице прозора, а друга координата колико је тачка удаљена од горње ивице прозора.

https://petljamediastorage.blob.core.windows.net/root/Media/Default/Kursevi/Srednja/cs/coordinate_system.png

Разумевање координатног система можете да проверите и користећи скоро било који програм за разгледање или трансформисање слика (можете користити и програм Paint). Померањем курсора по слици можете да пратите вредности координата курсора у статусној линији (доле лево).

https://petljamediastorage.blob.core.windows.net/root/Media/Default/Kursevi/Srednja/cs/Paint_koordinate.png

Проверите своје знање о координатама кроз наредних неколико питања.

https://petljamediastorage.blob.core.windows.net/root/Media/Default/Kursevi/Srednja/cs/quiz_coordinates.png
         Q-5: Поређајте редом координате црвене, зелене, плаве и црне тачке (величина прозора је  300 пута 300 пиксела).

(30, 40)
(50, 280)
(230, 20)
(150, 170)
        

Ако је прозор ширине 200 и висине 300 пиксела, које су координате његове централне тачке (резултат напишите у облику уређеног пара)?

    Q-6: Означите тачна тврђења.

  • Координата x расте слева надесно.
  • Тачно.
  • Координата y опада од врха ка дну екрана.
  • Координата y расте од врха ка дну екрана.
  • Тачке на горњој ивици екрана имају координату y једнаку 0.
  • Тачно.
  • Тачке на десној ивици екрана имају координату x једнаку 0.
  • Тачке на десној ивици екрана имају највећу x координату.
  • Тачка у доњем десном углу екрана има највеће обе координате.
  • Тачно.
         Q-7: Aко је ширина прозора `s`, а висина `v`, наведите редом координате доњег левог, доњег десног, горњег десног и горњег левог темена.

(0, v)
(s, v)
(s, 0)
(0, 0)
        

Како цртати из програма

Као први програм који нешто црта, узећемо један сасвим једноставан пример.

Пример - правоугаоник Написати C# програм који црта парвоугаоник обојен црно.

Потребно је међу догађајима формулара наћи догађај Paint

https://petljamediastorage.blob.core.windows.net/root/Media/Default/Kursevi/Srednja/cs/Pravougaonik_dogadjajPaint.png

Двокликом на овај догађај добијамо празну функцију Form1_Paint, у коју уписујемо следећу наредбу:

private void Form1_Paint(object sender, PaintEventArgs e)
{
    e.Graphics.FillRectangle(Brushes.Black, 100, 20, 10, 50);
}

Када покренемо програм, прозор програма изгледа као на следећој слици:

https://petljamediastorage.blob.core.windows.net/root/Media/Default/Kursevi/Srednja/cs/pravougaonik.png

Функција Form1_Paint се изврашава при сваком исцртавању прозора програма. На пример, при покретању програма, или ако је прозор програма био прекривен другим прозором који је сада померен, или ако је прозор нашег програма био минимизиран па је враћен и сл.

Наредбе за цртање треба увек задати у овој функцији (или у функцији која исцртава неку компоненту формулара, што ће бити илустровано касније).

Да би код који црта проавоугаоник постао јаснији, разложићемо га на неколико наредби:

private void Form1_Paint(object sender, PaintEventArgs e)
{
    Graphics g = e.Graphics;
    Brush cetka = new SolidBrush(Color.Black);
    g.FillRectangle(cetka, 100, 20, 10, 50);
}

У овако разложеној верзији функције смо најпре из параметра e дохватили објекат типа Graphics, из којег позивамо функције за цртање. Том објекту смо дали име g.

У другом реду функције формирамо објекат типа Brush, који ћемо прослеђивати разним функцијама за цртање облика попуњених бојом. Функцији која ствара овај објекат (конструктор објеката типа SolidBrush) треба задати боју која ће се корситити при бојењу исцртаваних облика.

Обојени правоугаоник се исцртава у последњем реду, позивом функције g.FillRectangle. Ова функција може да се позове на више начина, са различитим листама аргумената. Први аргумент је увек објекат типа Brush, који смо управо креирали. Ми смо користили облик функције g.FillRectangle који после задавања четке задаје још 4 броја који описују правоугаоник. Ти бројеви су редом координате горњег левог темена правоугаоника (100, 20), његова ширина (10) и висина (50).

https://petljamediastorage.blob.core.windows.net/root/Media/Default/Kursevi/Srednja/cs/Pravougaonik_koordinate.png