2D Model Üzerinde Objelere Tıklama (Mobil)
-
Merhaba mürit ve mürideler.
Bir proje yapacağız içerde restorant app yapacağız. Burada rezervasyon modülünü 2d modellemek istiyoruz. Burada son kullanıcı tüm restoranı görebilecek kuş bakışı olarak ve istediği masayı seçip rezervasyon oluşturabilecek. Burada masalar seçilebilir olmalı ve bu model üstünde masaların dolu/boş olduğunu göstermeliyim. Bu restoran 2d modelini uzaklaştırıp yakınlaştırmak da istiyorum. Model çok büyük olduğundan zoom-in ve out işlemine ihtiyaç var. Daha önce böyle bir şey yapmış olan var mı ? Bu işin adını da bilsem yeterli. Neyi araştıracağımı bilmiyorum şu an :/
-
Adını sanını bilmiyorum ama sanırım istediğin şey şu otobüs/tren/uçak bileti alırken çıkan ekranın zoomlanabilir hali? Belki onlardan yürürsen bulursun ne olduğunu?
-
Yok hocam onlar statik 2-3 UI tasarlayıp gösteriyorlar. Benim biraz daha farklı. Google maps gibi düşün. Bir modelim olacak bir map (Restoranın krokisi) orada masalar olacak masalar da tıklanabilir olacak vs. vs. Bilet firmalarının yaptığı daha farklı UI olarak ekrana çiziyorlar benim dediğim gibi böyle krokide gezinme felan yok. Otobüs belli, uçak beli biraz daha farklı.
-
Canvas manipulating şeklinde arayabilirsin hocam.
Three.js 3d ve 2d için iyi bir kütüphane. Orbit control sayesinde zoom vs desteği alırsın.
Tabi bu cevap yüzeysel, model ne 2dden kasıt ne nasıl bir araya getirdin o kısmı bilmek gerekiyor
-
Grafik SVG olarak kaydedilebilir. JS ile fare olaylarını alabilirsiniz.
svg-pan-zoom js kütüphanesi ile pan zoom olaylarını halledebilirsiniz (https://github.com/bumbu/svg-pan-zoom)
Masa id vs. ise svg'nin g etiketlerinin id parametresinden çekilebilir.
-
Benzer bir seyi avm'ler deki adres tarifi vs yapan dokunmatik billboardlar için yapmiştik zamanında. Ama biz hazır bir app kullanmıştık. PathFinder3d diye bir app kullanmıştık belki işine yarar.
-
Cevaplar için teşekkürler. Bu çözğmlerden javascript olanını webview açtırma gibi bir düşüncem var şuan için. Tam olarak sağlıklı olmayacağını düşünüyorum. Araştırmaya devam
-
https://www.youtube.com/watch?v=RZMqaHSs6CM
https://github.com/gdrtrts/custom-zoomable-floorplan
ben böyle bir şey buldum belki işine yarar şeyhim
-
leaflet.js bu işi yapmıyormuydu
https://stackoverflow.com/questions/13638969/using-custom-map-image-tiles-in-leafletjs
wert tarafından 18/Ara/21 15:21 tarihinde düzenlenmiştir
