DevProTalk

DevProTalk (http://www.devprotalk.com/index.php)
-   (X)HTML, JavaScript, DHTML, XML, CSS (http://www.devprotalk.com/forumdisplay.php?f=8)
-   -   Html5 skaliranje canvas elementa (http://www.devprotalk.com/showthread.php?t=11963)

mslavko 12. 01. 2015. 00:20

Html5 skaliranje canvas elementa
 
Imam sledeci canvas html5;

Kôd:

<canvas id="myCanvas" width="500" height="400"
style="border:1px solid #000000; background:#ccc;">
</canvas>
and here is

i ovde je sve ok, tj mogu da crtam linije sa kordinatama x i y s tim da budu max 500 tj. 400

Ali kako da prikazem ove koordinate na canvasu tako da se vide kao na slici ispod:

{"lat":"52.67554942424349","lng":"8.37265491485595 7"},{"lat":"52.67528921580262","lng":"8.3735132217 40723"},{"lat":"52.6759657545252","lng":"8.3741140 36560059"},{"lat":"52.682574466310314","lng":"8.37 256908416748"},{"lat":"52.68356308524067","lng":"8 .373942375183105"},{"lat":"52.68293869694087","lng ":"8.375487327575684"},{"lat":"52.67685044320001", "lng":"8.376259803771973"},{"lat":"52.675653507185 9","lng":"8.379607200622559"},{"lat":"52.676017795 531436","lng":"8.382096290588379"},{"lat":"52.6810 1344348877","lng":"8.380722999572754"},{"lat":"52. 68351105322329","lng":"8.383641242980957"},


Kako da transformisem ove decimalne brojeve (koordinate tako da ih prikazem na html5 canvasu kao na google mapi?

miks 12. 01. 2015. 13:56

1. Ako koristis google mapu, tu vec imas funkciju za konvertovanje lan/log tacke u x/y tacku canvasa, pa nadjes neku razmeru sa tvojim canvas-om ako nisu isti.

2. Ako ne koristis, onda vidi kako google mapa to radi.

Br@nkoR 12. 01. 2015. 20:27

možda:
http://stackoverflow.com/questions/9...ntaining-ratio
mada Zemlja nije ravna ploča.

mslavko 13. 01. 2015. 17:32

Citat:

Originalno napisao miks (Napišite 111986)
1. Ako koristis google mapu, tu vec imas funkciju za konvertovanje lan/log tacke u x/y tacku canvasa, pa nadjes neku razmeru sa tvojim canvas-om ako nisu isti.

2. Ako ne koristis, onda vidi kako google mapa to radi.

Evo ovako, ne koristim google mapu ovde, dao sam samo primer kako bi trebalo da izgleda da html5 canvasu.

Zelim da napravim mobile app koji ce iscrtavati putanju korisnika na canvasu koristeci GPS signal. Znaci koordinte dobijam sa GPS-a.

Takodje zelim da napravim app koristeci PhoneGap koji koristi webView a webview ne koristi webGL i slicne tehnologije tako da ne mogu da koristim library npr. three.js za 3d modelovanje i sl.

Na osnovu linka koji je Branko postavio shvatio sam da se mogu koordinate prikazati tako sto bi se vrsilo izracunavanje npr. za x = (x[1] - x[0] )*10 000 na taj nacin dobijam brojeve za x osu ... ukoliko bi se prepotsavilo da x pocetak umesto 0,00 koordinata ima x[0] koordinate...

Sta preporucujete da koristim za prikaz putanje na mobilnim uredjajima (canvas, css3) Gde su performanse najbolje?

Uostalom koja je razlika izmedju canvasa, svg-a, css3 modela?

miks 13. 01. 2015. 23:14

Odavno se nisam bavio sa ovom tematikom, ali po secanju i po nacinu na koji rade odredjeni programi, ovo je ono sto bih ja uradio. Sad mozda to tebi nece odgovarati zbog brzine ili sli, ali moze biti dobro uputstvo.

Ako imas koordinate u lat/lon WGS84, konvertujes ih u neki ako se dobro secam metricki sistem Gaus-Kriger i sl. sto ti pruza mogucnost da sve proracune radis jednostavnom matematikom. Cak sta vise mislim da google map radi istu stvar.

Taj tvoj kanvas ce biti deo te projekcije, zamislis kao isecak, tacke koje cine taj kanvas (uglovi kanvasa) ce takodje imaju svoje koordinate. Sve tacke unutar, ove koje hoces da prikazes imaju svoje kooridinate. Ovde pricam o koordinatama u projekciji.

Posle toga izracunas razmeru i iscrtavas tacke. Npr. u projekciji imas sirinu kanvasa od 50km, na applikaciji ti je to 500px, dalje izracunavas tacke u projekciji, prva tacka ima x/y offset od ugla kanvasa 10km/20km, razmera ti je 1:100, znaci x/y u kanvasu je 100px/200px, itd.

Mozda bi mogao ovo sve da radis i u WGS84 koordinatama, ako su razdaljine dovoljno male, ali to moras da proveris.

mslavko 14. 01. 2015. 18:28

Takodje imam jedno pitanje sto se tice performansi:

- Imam samo 2 objekata sa puno tacaka (putanja-linija i poligon pored)
- potreban mi je 3d prikaz iz perspektive sto je jedino moguce canvasom koliko znam
- potrebni je prikazati sve to na mobilnim telefonima koji imaju manje memorije od laptopova i sl. i rezolucija je naravno manja

Ukljucujuci ove tri cinjenice sta je bolje koristiit SVG ili CANVAS u mom slucaju?

Br@nkoR 14. 01. 2015. 23:06

Citat:

Originalno napisao mslavko (Napišite 111990)
Na osnovu linka koji je Branko postavio shvatio sam da se mogu koordinate prikazati tako sto bi se vrsilo izracunavanje npr. za x = (x[1] - x[0] )*10 000 na taj nacin dobijam brojeve za x osu ... ukoliko bi se prepotsavilo da x pocetak umesto 0,00 koordinata ima x[0] koordinate...

Kôd:

NewValue = (((OldValue - OldMin) * (NewMax - NewMin)) / (OldMax - OldMin)) + NewMin
OldValue - vrednost koju želiš da konvertuješ
OldMin - minimalna vrednost za lat/lng od svih vrednosti koje želiš da konvertuješ (koje čine polyline), dakle u gornjem primeru sa koordinatama nađeš minimalnu(najmanju) vrednost za lat odnosno lng u zavisnosti koju dimenziju konvertuješ
OldMax - isto kao i OldMin samo maksimalna(najveća) vrednost
NewMin - minimalna vrednost za width/height canvas elementa, dakle 0 (nula) ili neka druga vrednost ukoliko ne želiš da kreće od 0 već da imaš margine.
NewMax - maksimalna vrednost za width/height canvas elementa, dakle 500 odnosno 400 u zavisnosti koju dimenziju konvertuješ

Nisam baš vešt u objašnjavanju, ali nadam se da je jasnije.

Ukoliko sam dobro razumeo problem.

mslavko 14. 01. 2015. 23:53

Da da, @Branko upravo tako, hvala puno. Ja sam malo izmenio temu pa sam ubacio pitanje o SVG i CANVASU ali tu mu nije mesto.

mslavko 15. 01. 2015. 01:13

Crtanje koordinata na CANVASU ide ovako: http://jsbin.com/fiyumepayu , medjutim hoce li se svakog puta kada se pojavi nova koordinata CANVAS iscrtavati ponovo, za razliku od SVG-a ?

Br@nkoR 15. 01. 2015. 18:43

http://jsbin.com/bufesikeze/1/edit?js,output
// mrzelo me da menjam kod za ostale linije


Vreme je GMT +2. Trenutno vreme je 12:04.

Powered by vBulletin® Verzija 3.6.8
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
Copyright © DevProTalk. All Rights Reserved.

Mišljenja, saveti, izjave, ponude ili druge informacije ili sadržaji nastali na Sajtu su vlasništvo onoga ko ih je kreirao, a ne DevProTalk.com, tako da ne morate da se oslanjate na njih.
Autori poruka su jedini odgovorni za ovakve sadržaje. DevProTalk.com ne garantuje tačnost, kompletnost ili upotrebnu vrednost informacija, stavova, saveta ili datih izjava. Ne postoje uslovi pod kojima bi mi bili odgovorni za štetu ili gubitak koji je posledica bilo čijeg oslanjanja na nepouzdane informacije, ili bilo kakve informacije nastale kroz komunikaciju između registrovanih članova.
Web sajt može sadržavati linkove na druge web sajtove na Internetu ili neke druge sadržaje. Ne kontrolišemo niti podržavamo te druge web sajtove, niti smo pregledali bilo kakve sadržaje na takvim sajtovima. Mi nećemo biti odgovorni za legalnost, tačnost ili prikladnost bilo kog sadržaja, oglasa, proizvoda, usluga ili informacije lociranim na ili distribuiranih kroz druge web sajtove, niti za bilo kakvu štetu nastalu kao posledica takvih informacija. DevProTalk.com drži i čuva druga prava vlasništva na web sajtu. Web sajt sadrže materijale zaštićene copyright-om, zaštitne znakove i druge informacije o pravu vlasništva ili softver. Članovi mogu poslatu informacije zaštićene pravima vlasništva njihovih nosilaca i ona ostaju zaštićena bez obzira da li su oni koji prenose te informacije to naveli ili ne. Osim informacija koje su u javnom vlasništvu ili za koje dobijete dozvolu, nemate pravo da kopirate, modifikujete ili na bilo koji način menjate, objavljujete, prenosite, distribuirate, izvršavate, prikazujete ili prodajte bilo koju informaciju zaštićenu pravima vlasništva. Slanjem informacija ili sadržaja na bilo koji deo DevProTalk.com, Vi automatski dozvoljavate i predstavljate garanciju da imate pravo da dozvolite DevProTalk.com ili članovima DevProTalk.com bespovratnu, kontinualnu, neograničenu, globalnu dozvolu da koriste, kopiraju, izvršavaju, prikazuju i distribuiraju takve informacije i sadržaje i da iz takvih sadžaja koriste bilo koji deo u bilo koje svrhe, kao i pravo i dozvolu da koriste gore navedene sadržaje. Svi zaštitni znakovi (trademarks), logotipi, oznake usluga, firme ili imena proizvoda koji se pominju na ovom web sajtu su vlasništvo kojim raspolažu njihovi vlasnici.