Javascript - Simulare il viewport

Forum - Javascript - Simulare il viewport

Thejuster (Admin)
Guru^2

Messaggi: 2305
Iscritto: 04/05/2008

Postato alle 10:03
Lunedì, 19/12/2016

Buongiorno ragazzi
Sono alle prese con il mio motore in javascript.
Ho una domanda da fare.

In pratica ho realizzato una sorta di simulatore del Viewport di come accade sulle DirectX o OpenGL.

http://95.254.226.192/MireWeb/

in pratica ho utilizzato due div.

uno chiamato viewport l'altro chiamato canvas ovviamente.

il viewport l'ho impostato di una dimensione minore del canvas questo per fare da contenitore.
ad al momento giusto, mi basta semplicemente scrollare

viewport.ScrollLeft per ottenere uno scrolling perfetto.

C'è un problema però.

Se lancio questo html dal browser, lo scroll funziona senza nessun problema.
ma quando vado a farlo da mobile, non sembra funzionare.

Cioè. Se apri dal cellulare quell'indirizzo, ok dal browser del cellulare mi funziona.
Ma creando l'app utilizzando il browser della CrossWalk e compilando con Cordova
lo scroll non risponde.
è come se quel comando non vale.

Avevo pensato ad un'altra alternativa.

visto che la funzione drawImage ha sia il source che la destinazione, potevo
provare ad usare quella funzione. ma come posso simulare la stessa cosa con le coordinate?
cioè utilizzano il void drawImage anziché utilizzare direttamente lo scroll del div?

Principalmente mi interesserebbe far funzionare lo scroll del div
perché così facendo mi risparmio un bel pò di seccature.

Caso mai non c'è soluzione, allora opto per il drawImage.

Consigli?

Edit:
L'app in questione è questa

https://play.google.com/store/apps/details?id=makingitalia. ...

Ultima modifica effettuata da Thejuster il 19/12/2016 alle 10:05

https://mire.forumfree.it/ - Mire Engine
C# UI Designer

pierotofy (Admin)
Guru^2

Messaggi: 6230
Iscritto: 04/12/2003

Postato alle 14:06
Lunedì, 19/12/2016

Per quel che può aiutare, lanciando il tuo link con l'ultima versione di Chrome non mi permette di premere i pulsanti di navigazione correttamente (su giù destra sinistra).

Ogni browser gestisce il scrollTop / scrollLeft in maniera leggermente diversa. Non ti consiglierei di andare per quella strada, se puoi evitarlo.

Il mio blog: https://piero.dev

Thejuster (Admin)
Guru^2

Messaggi: 2305
Iscritto: 04/05/2008

Postato alle 15:36
Lunedì, 19/12/2016

Testo quotato

Postato originariamente da pierotofy:

Per quel che può aiutare, lanciando il tuo link con l'ultima versione di Chrome non mi permette di premere i pulsanti di navigazione correttamente (su giù destra sinistra).

Ogni browser gestisce il scrollTop / scrollLeft in maniera leggermente diversa. Non ti consiglierei di andare per quella strada, se puoi evitarlo.

uhm credo che il mio browser incorporato nell'app sia quello di chrome.
credo... il browser si chiama crosswalk

https://crosswalk-project.org/

ho provato a cercare in giro, e vedo che effettivamente ci sono persone che utilizzano il mio stesso metodo
ma non ho capito se a loro funziona o meno

https://github.com/crosswalk-project/chromium-crosswalk/blo ...

ma ho capito che l'unica cosa che cambia da questa pagina ed il mio sorgente è l'overflow

Mio sorgente

Codice sorgente - presumibilmente Javascript

<div id="Viewport" style="width:640; height: 480; overflow:hidden;">
<canvas id="canvas" width="800" height="600"></canvas>
</div>

Mentre li è usato un iframe
non sò se può significare qualcosa...

Codice sorgente - presumibilmente Javascript

<div style="height:100px; width:100px; overflow: scroll; display: block;" id="main">

Qui vedo overflow impostato su scroll.

Ma sinceramente eviterei di mostrare una scrollbar in un gioco.
sarebbe ridicolo.

a mali estremi poi seguirò il tuo consiglio piero.
quello di ingorare lo scroll del contenitore e di gestirlo tramite il translate

https://mire.forumfree.it/ - Mire Engine
C# UI Designer

Roby94 (Member)
Guru

Messaggi: 1170
Iscritto: 28/12/2009

Postato alle 2:15
Mercoledì, 21/12/2016

Personalmente trovo una pessima idea mischiare operazioni su generici blocchi HTML e il disegno su canvas. Un sistema come il tuo poteva aver senso quando il canvas non era disponibile. Se trovi il lavoro troppo complesso rifatti a qualche framework come processing.js.