DevProTalk

Forumi IT profesionalaca
web development, web design, e-business, SEO


Idite nazad   DevProTalk > Web development i web aplikacije > (X)HTML, JavaScript, DHTML, XML, CSS
Želite da se reklamirate ekskluzivno na ovoj poziciji? Javite se

(X)HTML, JavaScript, DHTML, XML, CSS Client scripting tehnologije, Dynamic HTML, Cascading Stylesheets, XML i standardi

Odgovori
 
Alati teme Način prikaza
Staro 12. 01. 2015.   #1
mslavko
profesionalac
Professional
 
Avatar mslavko
 
Datum učlanjenja: 25.10.2012
Poruke: 278
Hvala: 16
32 "Hvala" u 9 poruka
mslavko is on a distinguished road
Default 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?
mslavko je offline   Odgovorite uz citat
Staro 12. 01. 2015.   #2
miks
član
Certified
 
Datum učlanjenja: 24.02.2009
Poruke: 55
Hvala: 0
11 "Hvala" u 7 poruka
miks is on a distinguished road
Default

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.
miks je offline   Odgovorite uz citat
Staro 12. 01. 2015.   #3
Br@nkoR
banned
Professional
 
Avatar Br@nkoR
 
Datum učlanjenja: 04.06.2005
Poruke: 371
Hvala: 0
738 "Hvala" u 83 poruka
Br@nkoR će postati "faca" uskoroBr@nkoR će postati "faca" uskoroBr@nkoR će postati "faca" uskoroBr@nkoR će postati "faca" uskoroBr@nkoR će postati "faca" uskoroBr@nkoR će postati "faca" uskoroBr@nkoR će postati "faca" uskoro
Default

možda:
http://stackoverflow.com/questions/9...ntaining-ratio
mada Zemlja nije ravna ploča.
__________________
Don't look at me; I'm lost too.
“If you can't dazzle them with brilliance, baffle them with bul*s**t.”
Br@nkoR je offline   Odgovorite uz citat
Staro 13. 01. 2015.   #4
mslavko
profesionalac
Professional
 
Avatar mslavko
 
Datum učlanjenja: 25.10.2012
Poruke: 278
Hvala: 16
32 "Hvala" u 9 poruka
mslavko is on a distinguished road
Default

Citat:
Originalno napisao miks Pogledajte poruku
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?
mslavko je offline   Odgovorite uz citat
Staro 13. 01. 2015.   #5
miks
član
Certified
 
Datum učlanjenja: 24.02.2009
Poruke: 55
Hvala: 0
11 "Hvala" u 7 poruka
miks is on a distinguished road
Default

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.
miks je offline   Odgovorite uz citat
Staro 14. 01. 2015.   #6
mslavko
profesionalac
Professional
 
Avatar mslavko
 
Datum učlanjenja: 25.10.2012
Poruke: 278
Hvala: 16
32 "Hvala" u 9 poruka
mslavko is on a distinguished road
Default

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?
mslavko je offline   Odgovorite uz citat
Staro 14. 01. 2015.   #7
Br@nkoR
banned
Professional
 
Avatar Br@nkoR
 
Datum učlanjenja: 04.06.2005
Poruke: 371
Hvala: 0
738 "Hvala" u 83 poruka
Br@nkoR će postati "faca" uskoroBr@nkoR će postati "faca" uskoroBr@nkoR će postati "faca" uskoroBr@nkoR će postati "faca" uskoroBr@nkoR će postati "faca" uskoroBr@nkoR će postati "faca" uskoroBr@nkoR će postati "faca" uskoro
Default

Citat:
Originalno napisao mslavko Pogledajte poruku
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.
__________________
Don't look at me; I'm lost too.
“If you can't dazzle them with brilliance, baffle them with bul*s**t.”

Poslednja izmena od Br@nkoR : 14. 01. 2015. u 23:10.
Br@nkoR je offline   Odgovorite uz citat
"Hvala" Br@nkoR za poruku:
Staro 14. 01. 2015.   #8
mslavko
profesionalac
Professional
 
Avatar mslavko
 
Datum učlanjenja: 25.10.2012
Poruke: 278
Hvala: 16
32 "Hvala" u 9 poruka
mslavko is on a distinguished road
Default

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 je offline   Odgovorite uz citat
Staro 15. 01. 2015.   #9
mslavko
profesionalac
Professional
 
Avatar mslavko
 
Datum učlanjenja: 25.10.2012
Poruke: 278
Hvala: 16
32 "Hvala" u 9 poruka
mslavko is on a distinguished road
Default

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 ?
mslavko je offline   Odgovorite uz citat
Staro 15. 01. 2015.   #10
Br@nkoR
banned
Professional
 
Avatar Br@nkoR
 
Datum učlanjenja: 04.06.2005
Poruke: 371
Hvala: 0
738 "Hvala" u 83 poruka
Br@nkoR će postati "faca" uskoroBr@nkoR će postati "faca" uskoroBr@nkoR će postati "faca" uskoroBr@nkoR će postati "faca" uskoroBr@nkoR će postati "faca" uskoroBr@nkoR će postati "faca" uskoroBr@nkoR će postati "faca" uskoro
Default

http://jsbin.com/bufesikeze/1/edit?js,output
// mrzelo me da menjam kod za ostale linije
__________________
Don't look at me; I'm lost too.
“If you can't dazzle them with brilliance, baffle them with bul*s**t.”
Br@nkoR je offline   Odgovorite uz citat
Odgovori


Alati teme
Način prikaza

Pravila pisanja
Možete ne započinjati nove teme
Možete ne slati odgovore
Možete ne slati priloge
Možete ne izmeniti svoje poruke
vB kôd je Uključen
Smajliji su Uključen
[IMG] kod je Uključen
HTML kôd je Isključen
Pogledajte forum


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


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.