Html5 skaliranje canvas elementa

[mslavko]

Imam sledeci canvas html5;

<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]

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]

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

[mslavko]

Originalno napisao miks

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]

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]

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]

Originalno napisao mslavko

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...

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]

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]

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]

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