Puoi impostare un punto focale per assicurarti che una parte fondamentale di un'immagine non venga ritagliata. I punti focali sono particolarmente utili per i layout adattabili, quando la stessa immagine può essere visualizzata in diverse dimensioni.
Punti focali per le immagini di sfondo
Limitazioni relative alla disponibilità dei punti focali:
- Tipo di ridimensionamento dell'immagine. Imposta Ritaglia immagine per riempire lo spazio o Nessuno per la proprietà Ridimensionamento.
- Tipo di origine dell'immagine. L'origine deve essere locale e non un URL esterno.
- Annunci dinamici. I punti focali non sono supportati negli annunci dinamici.
- Animazione. Non è possibile animare i punti focali. Se animi le dimensioni dell'immagine, il punto focale impostato per l'immagine verrà applicato alle dimensioni iniziali dell'immagine.
Se attivi un punto focale, le opzioni di allineamento vengono ignorate.
Impostare un punto focale
- Apri la finestra di dialogo Modifica del punto focale dell'immagine in uno dei seguenti modi:
- Seleziona l'immagine sullo stage, quindi fai clic sulla casella di controllo Attiva punto focale nel riquadro Proprietà.
- Fai clic con il pulsante destro del mouse sull'immagine e seleziona Imposta punto focale… dal menu popup.
- Trascina il punto focale fino alla posizione desiderata.
- Per impostazione predefinita, il punto focale si trova al centro dell'immagine.
- Il controllo del punto focale è un cerchio bianco affinché sia ben visibile e sia facile fare clic, ma il punto focale effettivo è indicato dai mirini al centro.
- Usa i tasti freccia per spostare il punto focale di un pixel alla volta.
- Puoi riportare il punto focale al centro facendo clic con il pulsante destro del mouse sull'immagine e selezionando Reimposta dal menu popup oppure premendo CTRL + R (Windows) o ⌘ + R (Mac).
- Passa alla scheda Anteprima per vedere in che modo il punto focale influisce sul ritaglio dell'immagine per diverse proporzioni dell'immagine stessa.
- Fai clic su OK.
Se cambi l'origine dell'immagine, Google Web Designer ti chiede se vuoi mantenere, modificare o annullare il punto focale.
Modificare un punto focale
Puoi cambiare la posizione di un punto focale esistente:
- Apri la finestra di dialogo Modifica del punto focale dell'immagine in uno dei seguenti modi:
- Fai clic con il pulsante destro del mouse sull'immagine e seleziona Modifica punto focale… dal menu popup.
- Seleziona l'immagine e fai clic sul pulsante Imposta la posizione del punto focale
accanto alla casella di controllo Attiva punto focale nel riquadro Proprietà.
- Trascina il punto focale nella nuova posizione.
- Fai clic su OK.
Attivare/disattivare un punto focale
Puoi disattivare un punto focale per controllare l'aspetto dell'immagine con le opzioni di allineamento. Se riattivi il punto focale, Web Designer ricorda la posizione del punto focale impostata in precedenza.
Attiva/disattiva il punto focale dell'immagine selezionata in uno dei seguenti modi:
- Fai clic sulla casella di controllo Attiva punto focale nel riquadro Proprietà.
- Fai clic con il pulsante destro del mouse sull'immagine e seleziona Attiva punto focale o Disattiva punto focale dal menu popup.
Rimuovere un punto focale
- Fai clic con il pulsante destro del mouse sull'immagine.
- Seleziona Rimuovi punto focale dal menu popup.
Scambiare un'immagine con un punto focale
Se usi la funzione Scambia immagine… o cambi l'origine di un'immagine che ha un punto focale attivo, puoi stabilire se mantenere lo stesso punto focale, modificare il punto focale o annullarlo per la nuova immagine.
Punti focali e regole multimediali
Non puoi modificare la posizione di un punto focale usando le regole multimediali. Se vuoi visualizzare immagini diverse a seconda delle dimensioni dell'area visibile, ma le immagini non possono avere lo stesso punto focale, puoi includere entrambe le immagini nel documento, quindi usare le regole multimediali per cambiare l'opacità di ogni immagine a 0 per le dimensioni dell'area visibile in cui non dovrebbero essere visibili.
Punti focali in Vista codice
In Vista codice, le coordinate del punto focale sono impostate nell'attributo focalpoint dell'elemento gwd-image. Ad esempio:
<gwd-image class="gwd-image-1t0s" id="gwd-image_1" scaling="none" source="assets/moon_landscape.jpg" focalpoint="540 295"></gwd-image>