Poate că deja știți că există o metodă convenabilă pentru drawImage context draw:
unde imaginea este o imagine DOM (sau altă pânză), x, y este marginea superioară stângă a imaginii. De asemenea, există câțiva parametri opționali, dar nu le vom folosi astăzi. (Puteți vedea lista de panza pe care am publicat-o ieri, dacă este curioasă).
Ceea ce nu este evident este cum să desenezi o imagine rotită. Probabil credeți că ar trebui să existe un parametru de unghi, pe care îl puteți trece pentru a desena. Dar indiferent de modul în care trebuie să rotiți complet sistemul de coordonate înainte de desen.
Un exemplu. cu un context de pânză personalizat și o imagine încărcată gata de utilizare:
Desenați imaginea din punct cu coordonatele 50, 35, care ne dă următoarea imagine:
Să arătăm ce se va întâmpla dacă vom roti mai întâi sistemul de coordonate:
Atunci cum putem roti imaginea, dar în același timp salvăm-o în același loc? Pentru a face acest lucru, trebuie să se rotească înainte de a apela muta un început de pânză în locul în care dorim să amplasați imaginea apelând context.translate (x, y):
Metoda de traducere mișcă complet sistemul de coordonate; context.translate (50, 35) se mută originea 50, 35. Prin urmare, dacă ne imaginam acum otrisuem în coordonatele 0, 0 - acesta va fi exact la fel ca în primul exemplu:
Amintiți-vă că metoda de rotire se rotește în jurul originii. Prin urmare, dacă transferăm originea coordonatelor la 50, 35, rotația va fi în jurul acestui punct:
Toate acestea sunt foarte bune, dar ce se întâmplă dacă vrem să rotim imaginea în jurul centrului? Ei bine, trebuie să ne mutăm originea în centrul de la locul unde vrem să atragă o imagine, dar redau imaginea la punct, coordonatele care sunt compensate de jumătate din înălțimea și lățimea.
Puțin nedumerit? Exemplul ar trebui să facă din cele de mai sus mai ușor de înțeles:
Singurul lucru pe care trebuie să-l înțelegem este radianii, dar deja i-am explicat, ați văzut-o?
Notă importantă: operațiile de rotație și mișcare a sistemului de coordonate nu afectează imaginile deja redate, ele afectează ceea ce va fi adăugat ulterior.
Acum știm cum să desenezi o imagine rotită, de ce să nu faci o funcție care să conțină acest cod?
Merită să vă petreceți timpul pentru a înțelege corect rotirea, mișcarea și conservarea sistemului de coordonate - acestea sunt instrumente foarte puternice.
De la traducător. pentru a înțelege aceste informații, am făcut un exemplu de hexagoane rotative;)
Trimiteți-le prietenilor: