Condividi tramite

Visualizzatori e contenuto

di manipolazione diretta usa viewport, contenuto e contatti per descrivere gli elementi interattivi dell'interfaccia utente.

Un viewport è un'area all'interno di una finestra che può ricevere ed elaborare l'input dalle interazioni dell'utente. Il riquadro di visualizzazione rappresenta l'area del contenuto che può essere visualizzata dall'utente finale in un determinato momento (detta anche clip contenuto). Il viewport ha diverse funzioni:

  • Gestisce lo stato di interazione (ad esempio, quando il contenuto è pronto per essere modificato, quando il contenuto è in fase di manipolazione, quando il contenuto è in animazione inerzia) e esegue il mapping dell'input alle trasformazioni di output.
  • Contiene contenuto che si sposta in risposta all'interazione dell'utente. Potrebbe trattarsi di un elemento div HTML (scorrimento), di un elenco in grado di panoramica (schermata Start di Windows 8) o del menu a comparsa per un controllo di selezione.

Viene creato un viewport chiamando CreateViewport. È possibile creare più viewport in una singola finestra per produrre un'esperienza di interfaccia utente avanzata.

Content rappresenta l'elemento che viene trasformato in risposta a un'interazione. In altre parole, il contenuto è ciò che si sposta o ridimensiona quando l'utente esegue la panoramica o le dita di avvicinamento delle dita. Esistono due tipi di contenuto:

  • contenuto primario è il singolo elemento intrinseco all'interno di un viewport che risponde alle manipolazioni e all'inerzia di input. Il contenuto primario viene creato contemporaneamente al riquadro di visualizzazione e non può essere aggiunto o rimosso da un viewport. È possibile personalizzare il comportamento del contenuto primario usando punti di ancoraggio (descritti più avanti).
  • Contenuto secondario si sposta rispetto al movimento del contenuto primario. Il contenuto secondario viene creato separatamente dal viewport e può essere aggiunto o rimosso da un viewport. Tutte le trasformazioni di contenuto secondario vengono calcolate in base alla trasformazione del contenuto primario. È possibile applicare regole specifiche per modificare la modalità di calcolo della trasformazione in base allo scopo previsto dell'elemento, identificato dal clSID durante la creazione.

In questo diagramma che mostra prima e dopo una panoramica, è stato usato un singolo contatto per la panoramica del contenuto primario. Anche se l'utente non interagisce direttamente con l'indicatore di panoramica (contenuto secondario), il contenuto secondario viene spostato quando il contenuto primario viene panoramicato. In questo modo vengono forniti segnali visivi per quanto tempo l'utente ha eseguito la panoramica.

diagramma che mostra prima o dopo una panoramica

Configurazione di un viewport

Dopo aver creato il viewport. configurarne il comportamento usando una configurazione di interazione . La configurazione di interazione specifica quali manipolazioni, ad esempio la panoramica, sono supportate.

panoramica modifica la posizione del contenuto lungo l'asse orizzontale o verticale o entrambi come panoramica utente. Quando si configura la traduzione su entrambi gli assi, il contenuto si sposta liberamente in qualsiasi direzione.

Per vincolare il movimento del contenuto, configurare guide, in genere sull'asse orizzontale e verticale. Se l'interazione di un utente si trova principalmente lungo un singolo asse (rappresentato dalle aree blu nel diagramma successivo), la panoramica diventa con guide e il contenuto si sposta solo lungo l'asse delle guide. Se l'utente ha eseguito la panoramica ed è attualmente sottoposto a railing ed esegue una seconda panoramica mentre il contenuto si trova in inerzia, la nuova panoramica continua a essere guidata.

diagramma che mostra il contenuto all'interno di un riquadro di visualizzazione in un di panoramica con guide

Esempio: un riquadro di visualizzazione è configurato per la panoramica orizzontale e verticale. Nel primo fotogramma il contatto scende. Nella seconda viene avviata una panoramica verticale e il contatto è bloccato sulla barra verticale. Infine, una volta eseguita la panoramica, viene usato solo il componente verticale di una panoramica diagonale per spostare il contenuto.

Se l'utente esegue la panoramica diagonalmente in modo che non si trovino nelle aree di rilevamento delle guide (aree bianche), la panoramica viene non railed e il contenuto si sposta liberamente in entrambi gli assi.

diagramma che mostra il contenuto che si sposta in una panoramica non railed

zoom modifica il fattore di scala del contenuto quando un utente avvicina o si estende. Il punto intorno al quale viene ridimensionato il contenuto (denominato centro zoom) si trova al centro dei contatti. Se è stato impostato l'allineamento orizzontale o verticale, il centro dello zoom cambia per mantenere l'allineamento.

diagramma che mostra lo zoom del contenuto con un allineamento specificato

È possibile eseguire l'override di questo comportamento specificando il centro di sblocco, che imposta il centro dello zoom al centro dei contatti.

diagramma che mostra lo zoom del contenuto con il centro zoom sbloccato

'inerzia è la decelerazione graduale di una manipolazione, sia la panoramica che lo zoom, dopo che tutti i contatti sono stati sollevato (nel caso del tocco) o dopo l'input da tastiera/mouse (ad esempio facendo clic su una barra di scorrimento o premendo i tasti di direzione). Quando un utente modifica il contenuto, la manipolazione non si arresta immediatamente dopo che il contatto viene sollevato. Il contenuto continua invece nella direzione e nella velocità correnti, rallentando gradualmente fino a un arresto.

Punti di ancoraggio e limiti

Un'animazione di inerzia viene eseguita dopo che la manipolazione termina a causa di un dito sollevato dallo schermo (nel caso del tocco) o come risultato di un'azione da tastiera/mouse (ad esempio tasti freccia, pagina su/giù, scorrimento della rotellina del mouse e così via).

Esistono due informazioni che definiscono l'animazione inerziale:

  • Il punto rimanente dell'animazione, ovvero la posizione finale del componente di trasformazione specifico.
  • La durata dell'animazione, la curva, la velocità, questi sono determinati dal tipo del punto di riposo.

L'animazione dell'inerzia è influenzata da punti di ancoraggio e limiti. I limiti specificano i punti di riposo massimi e minimi per il contenuto. Se il contenuto raggiunge un limite durante l'inerzia, verrà applicata un'animazione limite. I punti di ancoraggio vengono definiti nel contenuto primario per modificare il punto di riposo e modificare la curva di animazione inerzia stessa.

È possibile definire punti di ancoraggio con SetSnapInterval quando il contenuto viene spaziato regolarmente o con SetSnapPoints quando il contenuto è spaziato in modo non uniforme. Ecco un esempio di punti di ancoraggio:

diagramma che mostra come i punti di ancoraggio impostati nel contenuto influiscono sulla panoramica

Nel diagramma è presente una parte di contenuto con una serie di blocchi di contenuto secondario: notizie in un'app o elementi di tipo lettore di notizie in una visualizzazione griglia. Lo scopo è quello di bloccare il bordo sinistro di un elemento sul bordo sinistro del riquadro di visualizzazione dopo che l'inerzia è terminata.

Esistono due gruppi di tipi di punti di ancoraggio:

  • Facoltativo o Obbligatorio: un punto di ancoraggio facoltativo blocca l'animazione inerzia solo se il punto di riposo dell'inerzia è vicino al punto di ancoraggio. Un punto di ancoraggio obbligatorio blocca sempre l'animazione di inerzia a un punto di ancoraggio specificato.
  • Confronto tra più: un tipo di punto di ancoraggio multiplo consente al contenuto di spostarsi oltre molti punti di ancoraggio prima di passare a un punto di ancoraggio vicino al punto di riposo naturale. Un singolo tipo di punto di ancoraggio sceglie il punto di ancoraggio più vicino successivo come punto di riposo per l'animazione inerziale.

Il diagramma seguente illustra come i tipi di punti di ancoraggio modificano la posizione rimanente dell'animazione di inerzia.

diagramma che mostra come interagiscono l'inerzia e i punti di ancoraggio

In questo diagramma, il punto iniziale di inerzia viene etichettato come "Start" e la posizione finale dell'inerzia naturale in assenza di punti di ancoraggio come "Fine". Le linee verticali contrassegnano i vari punti di ancoraggio. Questa tabella descrive come ogni tipo di punto di ancoraggio influirà sulla posizione finale dell'animazione.

Tipo punto Descrizione
Single obbligatorio Il punto di ancoraggio P1 viene scelto perché è il primo punto di ancoraggio nella direzione dell'inerzia
Multiplo obbligatorio Il punto di ancoraggio P2 viene scelto perché è più vicino al punto finale nella direzione dell'inerzia
Singolo facoltativo Il punto di ancoraggio P1 viene scelto perché è il primo punto di ancoraggio rilevato durante l'inerzia
Multiplo facoltativo Il punto di ancoraggio P2 viene scelto perché si trova vicino al punto finale naturale

Scenari di offset dei punti di ancoraggio e RTL

diagramma che mostra l'uso del punto di ancoraggio rtl

Applicare l'offset del punto di ancoraggio e il sistema di coordinate usando l'APIsetSnapCoordinate, che sfalsa tutti i punti di ancoraggio o gli intervalli di ancoraggio usando il sistema di offset/coordinate specificato.

Il sistema di coordinate è molto utile negli scenari RTL, in cui si desidera descrivere i punti di ancoraggio dal bordo sinistro del contenuto nella direzione inversa. Nel diagramma precedente, setSnapCoordinate viene usato con il flag DIRECTMANIPULATION_MOTION_TRANSLATEX e DIRECTMANIPULATION_COORDINATE_MIRRORED, che sfalsa automaticamente i punti di ancoraggio dal bordo sinistro del contenuto e li fornisce in ordine da destra a sinistra: S1 è a 0px, S2 è a 50px (e così via). Qualsiasi offset impostato usando SetSnapCoordinate scosterà ulteriormente da questo bordo sinistro del contenuto automaticamente, incluso il fattore di scala corretto.

Si userà quasi sempre SetSnapCoordinate con il parametro origine impostato per evitare di impostare punti di ancoraggio all'esterno dell'area del contenuto.

Ad esempio, se il riquadro di visualizzazione è 200x200 e il contenuto è 1000x200 e l'interfaccia è RTL, il riquadro di visualizzazione avrà il bordo sinistro a x=800 quando il riquadro di visualizzazione viene presentato per la prima volta. Chiamare SetSnapCoordinate con SetSnapCoordinate(DIRECTMANIPULATION_MOTION_TRANSLATEX, DIRECTMANIPULATION_COORDINATE_MIRRORED, 1000.0) per specificare che i punti di ancoraggio devono essere calcolati da destra a sinistra a partire dal bordo DESTRO del contenuto.

Comportamenti

Un comportamento è un oggetto che può essere collegato a un viewport per modificare la modalità di manipolazione diretta gestisce la trasformazione di output del contenuto primario o secondario di un viewport. Un oggetto comportamento può influire su uno o più aspetti di una manipolazione, ad esempio la modalità di elaborazione dell'input o l'applicazione dell'animazione inerzia. Ad esempio, un comportamento di registrazione automatica influisce sull'animazione inerziale eseguendo un'animazione di scorrimento verso una fine del contenuto primario. Un comportamento di configurazione tra diapositive influisce sull'elaborazione dell'input di manipolazione diretta che rileva quando viene eseguita un'azione di scorrimento incrociato.

Un oggetto comportamento viene creato chiamando CreateBehavior, aggiunto a un viewport e quindi il relativo comportamento viene configurato in modo asincrono. La rimozione del comportamento dal viewport ne rimuove gli effetti.

Sistema di coordinate

Esistono tre principali sistemi di coordinate impiegati da manipolazione diretta:

  • Sistema di coordinate client: descrive il rettangolo della finestra client. Le unità sono in pixel.
  • Sistema di coordinate viewport: descrive il rettangolo di un'area all'interno del client in grado di elaborare l'input. Le unità sono definite dall'applicazione (usando SetViewportRect).
  • Sistema di coordinate del contenuto: descrive il rettangolo o le dimensioni del contenuto primario. Le unità sono definite dall'applicazione (usando SetContentRect).

Per tutti e tre i sistemi, le coordinate vengono definite in relazione alla rispettiva origine superiore sinistra e sono positive che aumentano a destra e verso il basso. Questi sistemi di coordinate sono illustrati nel diagramma successivo. Solo la sezione del contenuto all'interno del rettangolo del riquadro di visualizzazione può essere visualizzata o modificata dall'utente finale.

diagramma che mostra come interagiscono le coordinate del contenuto, del client e del viewport

Trasforma

manipolazione diretta mantiene diverse trasformazioni che contribuiscono all'output complessivo visualizzato.

  • trasformazione contenuto: la trasformazione iniziale calcolata da manipolazione diretta basata su una manipolazione o un'inerzia. Acquisisce gli effetti dei punti di ancoraggio, delle guide, dell'overpan predefinito (manipolazione), dell'overbounce predefinito (inerzia) e delle animazioni ZoomToRect.
  • Trasformazione output: trasformazione dell'oggetto visivo o dell'output finale. È la combinazione sia del contenuto che delle trasformazioni di sincronizzazione.
  • di trasformazione Sync: calcolata quando si chiama SyncContentTransform. Consente di manipolazione diretta applicare una nuova trasformazione del contenuto fornita dall'applicazione mantenendo al tempo stesso la trasformazione di output esistente.
  • Visualizzare trasformazione, applicata dall'applicazione come parte della post-elaborazione. Per altri dettagli, vedereSyncDisplayTransform.

Poiché la trasformazione di output è destinata a sfalsare visivamente una superficie sullo schermo, manipolazione diretta esegue l'arrotondamento necessario sui componenti della trasformazione di output in modo che il rendering del testo e di altro contenuto venga sempre sottoposto a rendering/composito in corrispondenza di un limite di pixel integrale. Il meccanismo di arrotondamento dipende da più fattori, tra cui la velocità del movimento e la presenza di Desktop remoto. Il meccanismo di arrotondamento per il contenuto secondario corrisponde a quello del contenuto primario, tenendo conto della differenza nel movimento tra i due. I client di GetOutputTransform non devono dipendere dal meccanismo esatto di arrotondamento della trasformazione di output, in quanto ne influiscono vari fattori.

Nota

Ciò significa che i componenti di una trasformazione di contenuto potrebbero non essere integrali e possono contenere offset di sub-pixel. I client che usano di manipolazione diretta sono invitati a usare ilGetOutputTransformper calcolare la trasformazione visiva corretta da applicare al contenuto quando si usa la modalità di aggiornamento manuale. Quando si usa la modalità di aggiornamento automatico usando il programma di composizione incorporato, la manipolazione diretta applica automaticamente questa trasformazione per conto del client. Questa trasformazione viene generata dalla manipolazione diretta per garantire risultati visivamente piacevoli durante la composizione dell'output visivo.

Stato del riquadro di visualizzazione

Durante l'elaborazione dell'input, il riquadro di visualizzazione gestisce lo stato di interazione e il mapping dell'input alle trasformazioni di output. Controllare lo stato di interazione del viewport chiamando GetStatus.

diagramma che mostra gli stati di interazione directmanipulation

  • Compilazione: il riquadro di visualizzazione viene creato e non è ancora in grado di elaborare l'input. Per elaborare l'input, chiamare IDirectManipulationViewport::Enable. Se Non viene chiamato Abilita, il riquadro di visualizzazione passa allo stato Disabilitato.

    Nota

    Si tratta dello stato iniziale dell'interazione.

  • Abilitato: il riquadro di visualizzazione è pronto per elaborare l'input. Quando un contatto scende (viene chiamato SetContact) e viene rilevata una manipolazione, il riquadro di visualizzazione passa a In esecuzione.

  • In esecuzione: il viewport sta attualmente elaborando l'input e aggiornando il contenuto. Quando il contatto viene sollevato, il viewport passa a Inerzia, se configurato.

  • Inerzia: il contenuto si sposta in un'animazione inerziale. Al termine dell'inerzia, il riquadro di visualizzazione passerà a Pronto. Se la disabilitazione automatica è stata impostata nel riquadro di visualizzazione, passerà da Inerzia a Pronto e quindi su Disabilitato.

  • Pronto: il riquadro di visualizzazione è pronto per elaborare l'input. Quando un contatto scende (viene chiamato SetContact) e viene rilevata una manipolazione, il riquadro di visualizzazione passa a In esecuzione.

  • Sospeso: il riquadro di visualizzazione può diventare Sospeso quando l'input è stato alzato di livello a un elemento padre nella catena SetContact. Questo argomento viene illustrato in modo più dettagliato in più viewport: hit testing e gerarchia del viewport.

  • Disabilitato: il riquadro di visualizzazione non elabora l'input o esegue callback. Un viewport può essere disabilitato da vari stati chiamando IDirectManipulationViewport::D isable. Se la disabilitazione automatica è stata impostata nel riquadro di visualizzazione, passerà automaticamente a Disabilitato dopo l'elaborazione di una modifica. Per riabilitare un viewport disabilitato, chiamare IDirectManipulationViewport::Enable.

più viewport: gerarchia di hit testing e viewport, ActivateConfiguration, GetOutputTransform, SyncDisplayTransform