Lëvizja e vizatimit

Në shembujt e mëparshëm, kemi bërë disa vizatime të përbëra nga forma themelore. Duke vepruar kështu, ishte e nevojshme të përcaktohej pozicioni i saktë për secilën nga këto forma që të bashkohen të gjitha pjesët së bashku. Për disa vizatime, ishte e mundur (dhe në disa detyra të kërkuara) që koordinatat e pikave individuale të llogariten bazuar në koordinatat e njohura të pikave të tjera. Ky llogaritje mund të ishte bërë jashtë programit dhe pastaj koordinatat e llogaritura thjesht mund të ishin futur në program. Sidoqoftë, është më mirë të kryhen llogaritjet e tilla në vetë programin, për disa arsye:

Tani do ta sistemojmë pak më shumë llogaritjen e koordinatave dhe do ta përdorim për të lëvizur më lehtë objektet e vizatuara. Para se të fillojmë, do të ishte një ide e mirë për të kontrolluar sfondin dhe t’u përgjigjemi këtyre pyetjeve:

    Q-54: Cilat janë koordinatat e pikës 10 piksele në të majtë të pikës (50, 70)?

  • (50, 60)
  • Provo përsëri.
  • (50, 80)
  • Provo përsëri.
  • (40, 70)
  • Saktë!
  • (60, 70)
  • Provo përsëri.
  • (40, 60)
  • Provo përsëri.

    Q-55: Cilat janë koordinatat e pikës 10 piksel nën pikën (50, 70)?

  • (50, 60)
  • Provo përsëri.
  • (50, 80)
  • Saktë!
  • (40, 70)
  • Provo përsëri.
  • (60, 70)
  • Provo përsëri.
  • (40, 60)
  • Provo përsëri.

    Q-56: Drejtkënëshi është vizatuar duke përdorur``pg.draw.rect(canvas, color, (100, 150, 80, 90))``. Si mund të vizatoni një drejtkëndësh me të njëjtën madhësi, të vendosur 30 pixel në të majtë dhe 30 piksele mbi këtë drejtkëndësh?

  • pg.draw.rect(canvas, color, (70, 120, 50, 60))
  • Provo përsëri.
  • pg.draw.rect(canvas, color, (100, 150, 110, 120))
  • Provo përsëri.
  • pg.draw.rect(canvas, color, (100, 150, 50, 60))
  • Provo përsëri.
  • pg.draw.rect(canvas, color, (70, 120, 80, 90))
  • Saktë!
  • pg.draw.rect(canvas, color, (70, 180, 80, 90))
  • Provo përsëri.

    Q-57: Rrethi ëeshtë vizatuar duke përdorur pg.draw.circle(canvas, color, (100, 200), 40). Si mund të vizatohet një rreth me të njëjtën madhësi mbi këtë rreth dhe ta prekë atë?

  • pg.draw.circle(canvas, color, (100, 120), 40)
  • Saktë!
  • pg.draw.circle(canvas, color, (100, 160), 40)
  • Provo përsëri.
  • pg.draw.circle(canvas, color, (120, 100), 40)
  • Provo përsëri.
  • pg.draw.circle(canvas, color, (160, 100), 40)
  • Provo përsëri.
  • pg.draw.circle(canvas, color, (20, 120), 40)
  • Provo përsëri.

Ndryshime për të bërë një vizatim lehtësht të lëvizshëm

Le të shohim se si një re është vizatuar në shembullin e mëposhtëm:

Ne prezantuam renë me tre rrathë, një më të madh në mes dhe dy më të vegjël rreth tij:

pg.draw.circle(canvas, pg.Color("white"), (200, 200), 50)
pg.draw.circle(canvas, pg.Color("white"), (150, 200), 30)
pg.draw.circle(canvas, pg.Color("white"), (250, 200), 30)

Nëse do të donim ta vizatonim atë re në lartësi të ndryshme, mund të përsërisnim këto tre komanda, çdo herë me disa vlera të reja për \(y\) koordinata e qendrave të këtyre tre rrathëve në vend të 200, siç është në vizatimin e parë . Për shembull:

pg.draw.circle(canvas, pg.Color("white"), (200, 200), 50)
pg.draw.circle(canvas, pg.Color("white"), (150, 200), 30)
pg.draw.circle(canvas, pg.Color("white"), (250, 200), 30)

pg.draw.circle(canvas, pg.Color("white"), (200, 80), 50)
pg.draw.circle(canvas, pg.Color("white"), (150, 80), 30)
pg.draw.circle(canvas, pg.Color("white"), (250, 80), 30)

pg.draw.circle(canvas, pg.Color("white"), (200, 320), 50)
pg.draw.circle(canvas, pg.Color("white"), (150, 320), 30)
pg.draw.circle(canvas, pg.Color("white"), (250, 320), 30)
../_images/clouds.png

Në këtë mënyrë, jo vetëm që programi rritet më shpejt se sa duhet, ne gjithashtu duhet të bëjmë çdo ndryshim në tre vende (për shembull, nëse duam të provojmë 330 në vend të 320, ai ndryshim duhet të bëhet në tre vende). Tre ndryshime nuk janë të shumta, por nëse e pranojmë këtë mënyrë të të bërit të gjërave, do të kishim gjithnjë e më shumë probleme në vizatime më komplekse, ose në programe komplekse në përgjithësi.

Në vend të kësaj, është më mirë të krijoni një funksion dhe të kaloni \(y\) koordinata e qendrave si parametër:

def cloud(yc):
    pg.draw.circle(canvas, pg.Color("white"), (200, yc), 50)
    pg.draw.circle(canvas, pg.Color("white"), (150, yc), 30)
    pg.draw.circle(canvas, pg.Color("white"), (250, yc), 30)

cloud(200)
cloud(80)
cloud(320)

Programi i ri është më i lehtë për tu lexuar dhe modifikuar më tej. Për më shumë re, ose re më komplekse, avantazhi i kësaj qasje do të ishte edhe më i madh.


Tani le të shqyrtojmë se si duhet ta lëvizim renë në të majtë ose në të djathtë. Ne duhet të rrisim ose ulim koordinatat \(x\) të të gjitha rrathëve (200, 150, 250) me të njëjtën vlerë. Për shembull, nëse do të shtypnim koordinatat 260, 210, 310 si \(x\), e gjithë reja do të lëvizet 60 pixel në të djathtë.

Do të ishte mirë nëse do të mund të përdorim vetëm një numër të vetëm për të specifikuar pozicionin horizontal të reve. Për ta arritur këtë, vërejmë se qendrat e rrathëve më të vegjël janë 50 pixel larg nga qendra e rrethit të mesëm në të majtë dhe të djathtë. Këto distanca nuk ndryshojnë kur lëviz reja. Kjo do të thotë që nëse tregojmë \(x\) koordinata e qendrës së rrethit të mesëm me:math:` X_c`, atëherë qendrat e rrathëve më të vogla kanë \(x\) koordinatat :math:` X_c - 50 dhe:math: X_c + 50`. Falë kësaj lidhjeje (e cila nuk varet nga pozicioni i resë), tani mund të prezantojmë edhe parametrin \(x\) në funksionin që vizaton renë:

def cloud(xc, yc):
    pg.draw.circle(canvas, pg.Color("white"), (xc, yc), 50)
    pg.draw.circle(canvas, pg.Color("white"), (xc - 50, yc), 30)
    pg.draw.circle(canvas, pg.Color("white"), (xc + 50, yc), 30)

cloud(200, 200)
cloud(200, 80)
cloud(200, 320)

Secila prej këtyre tre reve tani mund të zhvendoset lehtësisht, për shembull, 60 pixel në të djathtë, duke shtypur 260 si parametrin e parë në vend të 200 në thirrjet e funksionit. Është po aq e thjeshtë për të bërë një vizatim me disa re. Ngjyra, ose hija e gri, gjithashtu mund të jetë një parametër i funksionit. Në këtë mënyrë, disa reve mund të jenë më të errëta dhe disa më të ndritshme.

Kur përdorim të gjitha sa më sipër, mund të krijojmë një program që vizaton disa re me hije të ndryshme, për shembull:

Le të përmbledhim, me përgjithësime të vogla, çfarë duhet të bëhet për të qenë në gjendje të tregojmë një vizatim në vende të ndryshme:

  • Duhet të zgjedhim një pikë, koordinatat e së cilës vendosen direkt. Ne e quajmë këtë pikë të zgjedhur pikën kryesore, (nganjëherë kjo pikë quhet edhe anchor). Në shembullin e reve, pika kryesore është qendra e rrethit të mesëm.

  • Pas zgjedhjes së pikës kryesore, koordinatat e të gjitha pikave të tjera të rëndësishme përcaktohen në lidhje me të duke shtuar ose zbritur një zhvendosje të caktuar në koordinatat e pikës kryesore. Në shembullin me re, për të marrë \(x\) koordinata e qendrës së rrethit të majtë, nga :math:` x` koordinata e pikës kryesore (qendra e rrethit të mesëm) ne zbritim 50 pixel, dhe për rrethi i duhur shtojmë 50 pixel.

Në rastin e përgjithshëm, në vizatim mund të ketë forma të ndryshme nga rrathët. Pikat e rëndësishme që përcaktojnë pozicionet e këtyre formave janë:

  • për një vizë: skajet e saj

  • për një shumëkëndësh: pikat e saj

  • për një rreth: qendra e saj

  • për një drejtkëndësh: këndi i sipërm i saj i majtë

  • për një elips: këndi i sipërm i majtë i drejtkëndëshit në të cilin është gdhendur ajo elips

Të gjitha këto pika duhet të jepen në lidhje me pikën kryesore, domethënë, koordinatat e tyre duhet të shprehen si koordinata të pikës kryesore, të rritura ose të zvogëluara për ndonjë vlerë.

Kontrolloni të kuptuarit tuaj për shpjegimet e mëparshme dhe përgjigjuni pyetjeve.

    Q-58: Ne dëshirojmë të rregullojmë një vizatim të përbërë nga disa forma, në mënyrë që gjithçka të vizatohet në lidhje me anchor me koordinatat x = 100,` y = 100`. Një nga pohimet që formojnë një vizatim është

    Cila fjali e zëvendëson këtë?

  • pg.draw.circle(canvas, pg.Color("red"), (x, y), 50, 1)
  • Provo përsëri.
  • pg.draw.circle(canvas, pg.Color("red"), (x+120, y+90), 50, 1)
  • Provo përsëri.
  • pg.draw.circle(canvas, pg.Color("red"), (x+20, y-10), 50, 1)
  • Saktë!
  • pg.draw.circle(canvas, pg.Color("red"), (x-20, y+10), 50, 1)
  • Provo përsëri.
  • pg.draw.line(canvas, pg.Color("red"), (x-50, y-50), (150, 150))
  • Provo përsëri.
  • pg.draw.line(canvas, pg.Color("red"), (x-50, y-50), (x+50, y+50))
  • Saktë!
  • pg.draw.line(canvas, pg.Color("red"), (x-50, x+50), (y-50, y+50))
  • Provo përsëri.
  • pg.draw.line(canvas, pg.Color("red"), (x+50, y+50), (x+150, y+150))
  • Provo përsëri.

Ne dëshirojmë të rregullojmë një vizatim të përbërë nga disa forma, në mënyrë që gjithçka të vizatohet në lidhje me anchor me koordinatat x = 100,` y = 100`. Një nga pohimet që formojnë një vizatim është

pg.draw.line(canvas, pg.Color(“red”), (50, 50), (150, 150))

Cila fjali e zëvendëson këtë?

  • pg.draw.rect(canvas, pg.Color("red"), (x-50, y-50, x, y))
  • Provo përsëri.
  • pg.draw.rect(canvas, pg.Color("red"), (x, y, 100, 100))
  • Provo përsëri.
  • pg.draw.rect(canvas, pg.Color("red"), (x+50, y+50, 100, 100))
  • Provo përsëri.
  • pg.draw.rect(canvas, pg.Color("red"), (x-50, y-50, 100, 100))
  • Saktë!

Ne dëshirojmë të rregullojmë një vizatim të përbërë nga disa forma, në mënyrë që gjithçka të vizatohet në lidhje me anchor me koordinatat x = 100,` y = 100`. Një nga pohimet që formojnë një vizatim është

pg.draw.rect(canvas, pg.Color(“red”), (50, 50, 100, 100))

Cila fjali e zëvendëson këtë?

    Q-61: Ne duam të lëvizim një vizatim të përbërë nga disa forma në të djathtë nga 100 piksele. Shënoni pretendimet e sakta.

  • Instead of pg.draw.circle(canvas, color, (x, y), r, d) we call pg.draw.circle(canvas, color, (x+100, y), r, d).
  • Saktë!
  • Instead of pg.draw.circle(canvas, color, (x, y), r, d) we call pg.draw.circle(canvas, color, (x-100, y-100), r, d).
  • Provo përsëri.
  • Instead of pg.draw.rect(canvas, color, (x, y, w, h), d) we call pg.draw.circle(canvas, color, (x+100, y, w+100, h), d).
  • Provo përsëri.
  • Instead of pg.draw.rect(canvas, color, (x, y, w, h), d) we call pg.draw.rect(canvas, color, (x+100, y, w, h), d).
  • Saktë!
  • Instead of pg.draw.rect(canvas, color, (x, y, w, h), d) we call pg.draw.rect(canvas, color, (x-100, y, w, h), d).
  • Provo përsëri.

Shembujt e mëposhtëm trgojnë konvertimin e në vizatimi statik në një të lëvizshëm.

Ariu - pozicioni

Programi i mëposhtëm, i cili tregon kokën e ariut të lodrave, është dhënë:

Programi e quan funksionin framed_circle shtatë herë, i cili vizaton rrethin e dhënë me kufi të zi (megjithëse mund të ishte shmangur për tre rrathët e vegjël të zi). Për të qenë në gjendje të ndryshojmë pozicionin e vizatimit, le të zgjedhim pikën kryesore (anchor). Bëni atë qendër të një rrethi të madh, domethënë kokat e ariut. Koordinatat e kësaj pike janë (250, 150). Tani duhet të shprehim koordinatat e qendrave të të gjitha rrathëve të tjera në lidhje me pikën kryesore. Merrni si shembull veshin e djathtë të ariut.

\(x\) koordinata e qendrës së veshit të djathtë është :math:` 310 = 250 + 60`, ndërsa \(y\) koordinata është :math:` 80 = 150 - 70`. Nga këtu mund të shohim që koordinatat e qendrës së veshit të djathtë mund të shkruhen në program si (cx + 60, cy - 70), ku (cx, cy) janë koordinatat e pikës kryesore.

Ndiqni të njëjtën procedurë për rrathët e tjera dhe plotësoni funksionin Draw_teddy.

Ky program na lejon të shfaqim me lehtësi arinj në vende të ndryshme të ekranit. Për shembull, thirrja e funksionit

draw_teddy(width // 2, height // 2)

e cila vizaton një arush me pikën kryesore në qendër të dritares (ashtu siç ishte), mund të zëvendësohet me dy vija: e cila vizaton një ari me pikën kryesore në qendër të dritares (ashtu siç ishte), mund të jetë zëvendësuar me dy në vija:

draw_teddy(width // 2 - 120, height // 2)
draw_teddy(width // 2 + 120, height // 2)

Provoni këtë! Do të ishte shumë më e vështirë të vizatonim një arush tjetër nëse nuk do të kishim përshtatur programin fillestar për këtë përdorim.

Shtëpia - pozicioni

Le të themi që e keni shkruar këtë program, dhe qëllimi juaj është të shkruani programin në mënyrë që shtëpia të zhvendoset lehtësisht:

Le të jetë pika kryesore :code: (x, y) = (50, 150). Përfundoni rimodelimin e nisur të programit në kutinë më poshtë, ku vizatimi është bërë në funksionin Draw_house (x, y, wall_color). Pasi të siguroheni që vizatimet në të dy programet duken njësoj (përveç që ato vizatohen në dritare me madhësi të ndryshme), zëvendësoni kodin :code: Draw_house (50, 150, pg.Color (” khaki “)) 4 tjetër, për të marrë figurën si kur klikoni në butonin “Luaj lojën”:

draw_house(150,  90, pg.Color(220, 220, 220))
draw_house(220, 130, pg.Color("white"))
draw_house(350, 160, (255,255,150))
draw_house( 50, 150, pg.Color("khaki"))