Korištenje slika u korisničkim sučeljima

Komponenta Image služi za dodavanje slika u korisničko sučelje u više podržanih formata, uključujući bitmape, kao što su PNG i JPEG, te vektorske grafike, kao što je SVG. Da biste koristili bilo koje datoteke sa slikama u svojim dizajnima, prvo ih morate dodati u resurse (Assets):

1. Odaberite Assets > .
2. OpenOdaberite datoteku slike, a zatim odaberite Učitaj sliku.
3. Add Resources Odaberite lokaciju na kojoj će se slika spremiti u dijaloškom okviru Spremanje slike.
4. Odaberite OK.

Vaša je slika sada dostupna u Assets.

Kada povučete datoteku slike iz Assets u Navigator ili prikaz 2D, Qt Quick Designer automatski stvara instancu komponente Image za vas s putanjom do datoteke slike postavljenom kao vrijednost polja Source u Properties.

Da biste učitali slike s URL-a koristeći podržani URL shemu, navedite URL u polju Source.

Možete koristiti komponentu Border Image za prikaz slike, kao što je PNG datoteka, kao granicu i pozadinu. Za više informacija o korištenju slika za granice za izradu gumba pogledajte odjeljak Izrada skalabilnih gumba i granica.

Ako trebate prikazati animirane slike, kao što su GIF-ovi, upotrijebite komponentu Animated Image.

Veličina slike

Ako vrijednost svojstva Size slike nije navedena, automatski se koristi veličina izvornog sličice.

Po zadanom, izričito postavljanje širine i visine komponente uzrokuje da se slika skalira na tu veličinu. Da biste promijenili ovo ponašanje, postavite vrijednost polja Fill mode. Slike se mogu rastegnuti, ponavljati ili ravnomjerno skalirati na navedenu veličinu s obrezivanjem ili bez njega. Opcija Pad znači da se slika ne transformira.

Odaberite Smooth za glatko filtriranje slika pri skaliranju ili transformaciji. Glatko filtriranje daje bolju vizualnu kvalitetu, ali može biti sporije na nekom hardveru. Ako se slika prikazuje u svojoj prirodnoj veličini, ova svojstva nema nikakav vizualni niti performansni učinak.

Odaberite Mipmap za korištenje filtriranja mipmapa pri skaliranju ili transformaciji slika. Filtriranje mipmapa daje bolju vizualnu kvalitetu pri smanjenju veličine u usporedbi s glatkim filtriranjem, ali može utjecati na performanse i pri inicijalizaciji slike i tijekom iscrtavanja.

Odaberite Auto transform ako slika treba automatski primijeniti metapodatke o transformaciji slike, kao što je EXIF orijentacija.

Veličina izvora

Svojstvo Source size određuje skaliranu širinu i visinu slike punog kadra. Za razliku od vrijednosti svojstva Size, koja skalira iscrtavanje slike, ovo svojstvo postavlja maksimalni broj piksela pohranjenih za učitanu sliku kako velike slike ne bi zauzimale više memorije nego što je potrebno. Time se osigurava da slika u memoriji nije veća od postavljene izvorne veličine, bez obzira na njezinu zadanu veličinu.

Ako je stvarna veličina slike veća od veličine izvora, slika se smanjuje. Ako je samo jedna dimenzija veličine postavljena na vrijednost veću od 0, druga se dimenzija postavlja proporcionalno kako bi se sačuvio omjer stranica izvornog slike. Fill mode je neovisan o tome.

Ako su zadane i širina i visina izvornog formata, slika se skalira prema dolje kako bi stala unutar zadanih dimenzija, uz očuvanje omjera stranica slike. Međutim, ako se koristi PreserveAspectCrop ili PreserveAspectFit, slika se skalira na optimalnu veličinu za obrezivanje ili prilagođavanje.

Ako je izvor slika koja se može skalirati (kao što je SVG), veličina izvora određuje veličinu učitane slike bez obzira na izvornu veličinu. Izbjegavajte dinamičku promjenu svojstva veličine izvora jer je iscrtavanje SVG-a sporo u usporedbi s iscrtavanjem drugih formata slika.

Ako je izvor slika koja se ne može skalirati (poput JPEG-a), učitana slika neće biti veća od veličine koju izvorna slika određuje. Za neke formate cijela slika zapravo nikada neće biti učitana u memoriju.

Poravnanje slike

Možete poravnati slike vodoravno i okomito u poljima Alignment H i Alignment V. Po zadanom su slike centrirane.

Odaberite Mirror za horizontalno ogledalo slike, čime se prikazuje ogledalo slike.

Performanse

Po zadanom se lokalno dostupne slike odmah učitavaju i korisničko sučelje je blokirano dok se učitavanje ne dovrši. Ako se učitava velika slika, možda je poželjnije učitati je u niti niskog prioriteta odabirom opcije Asynchronous. Ako se slika dobiva iz mreže, a ne iz lokalnog izvora, automatski se asinhrono učitava.

Slike se keširaju i interno dijele, pa ako više slika ima istu Source, učitava se samo jedna kopija slike.

Slikovni okvir

Komponenta Border Image proširuje značajke komponente Image. Koristi se za stvaranje okvira od slika skaliranjem ili ponavljanjem dijelova svake slike. Izvorna slika razdijeljena je na 9 regija koje se pojedinačno skaliraju ili ponavljaju. Kutne regije se uopće ne skaliraju, dok se horizontalne i vertikalne regije skaliraju prema vrijednostima polja Tile mode H i Tile mode V, ili oboje.

Opcija Stretch skalira sliku tako da se uklopi u raspoloživi prostor. Opcija Repeat ponavlja sliku dok više nema prostora. Kako bi se osiguralo da posljednja slika ne bude odsječena, odaberite opciju Round koja po potrebi skalira slike prema dolje.

Odredite regije slike u poljima Border left, Border right, Border top i Border bottom. Regije opisuju udaljenost od svake ivice izvornog slike koja će se koristiti kao rub.

Za primjere upotrebe okvirnih slika pogledajte dokumentaciju komponente BorderImage.

Animirana slika

Animated Image Komponenta animirane slike proširuje značajke komponente slike, omogućujući reprodukciju animacija pohranjenih kao slike koje sadrže niz sličica, kao što su one pohranjene u GIF datotekama.

Postavite brzinu animacije u polje Speed. Brzina se mjeri u postotku izvorne brzine animirane slike. Zadana brzina je 1,0, što znači izvornu brzinu.

Za reprodukciju animacije odaberite Playing.

Za pauziranje animacije odaberite (Paused).

Kada je odabrana opcija Cache, svaki se kadar animacije kešira. Očistite potvrdni okvir ako reproducirate dugu ili veliku animaciju i želite uštedjeti memoriju.

Ako podaci o slici dolaze iz sekvencijalnog uređaja (kao što je soket), Animated Image može ponavljati petlju samo ako je predmemoriranje omogućeno.

Za više informacija pogledajte sljedeći videozapis:

Sažetak komponenti slika

Sljedeća tablica navodi komponente koje možete koristiti za dodavanje slika. Kolona Lokacija sadrži naziv kartice na kojoj možete pronaći komponentu u Components u. Kolona podrška za MCU-ove označava koje su komponente podržane na MCU-ovima.

Ikona	Naziv	Lokacija	Podrška za MCU	Namjena
	Animated Image	Zadane komponente - Osnovne	Ne	Slika koja pohranjuje animacije koje se sastoje od niza sličica, poput onih pohranjenih u GIF datotekama.
	Border Image	Zadane komponente - Osnovne	Da	Slika koja se koristi kao obruba ili pozadina.
	Image	Zadane komponente - Osnovne	Da	Slika u jednom od podržanih formata, uključujući bitmapne formate poput PNG-a i JPEG-a te vektorske grafičke formate poput SVG-a.