kostenloser Webspace werbefrei: lima-city

Element ziehbar machen

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   na-web

   na-web hat kostenlosen Webspace.

   20:03, 10.4.2018

   Hallo Community.
   Wieder einmal habe ich ein Problem. Ich habe ein Canvas Element, das eine Weltkarte mit einigen zusätzlichen Informationen enthält (deswegen auch keine normale Grafik). Nun habe ich eine Javascript-Funktion geschrieben, die das Canvas-Element auf Klick vergrössert oder verkleinert:
   

   var act_scale = 0.6; // 0.6 weil das Canvas bereits jetzt nur noch 0.6 seiner Grösse hat wenn es am Anfang 1 war
   function zoom_in() {
   act_scale = parseFloat(act_scale + 0.1);
   document.getElementById("map").style.width = parseFloat(1280 * act_scale) + "px";
   document.getElementById("map").style.height = parseFloat(649 * act_scale) + "px";
   }
   function zoom_out() {
   act_scale = parseFloat(act_scale - 0.1);
   document.getElementById("map").style.width = parseFloat(1280 * act_scale) + "px";
   document.getElementById("map").style.height = parseFloat(649 * act_scale) + "px";
   }

   Soweit so gut, funktioniert Prima. Nun ist mein Problem, dass nun einfach Scrollbars eingeblendet werden. Ich möchte aber, dass man es ziehen kann wie man es von Kartendiensten so kennt. Ausserdem springt es beim vergrössern immer etwas nach links, was ich unterbinden möchte. Das Canvas sieht also so aus:
   

   <div style="width:768px;height:389px;"><canvas id="map" width="1280" height="649" style="width:768px;height:389px;"></canvas></div>

   Kann mir da jemand helfen?
   
   Beitrag zuletzt geändert: 11.4.2018 12:44:15 von na-web

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. tchab

   tchab hat kostenlosen Webspace.

   10:58, 22.4.2018

   Soweit man das ohne Live-Demo beurteilen kann:
   
   https://developer.mozilla.org/de/docs/Web/CSS/overflow sollte dir dabei helfen, die Scrollbars in den Griff zu bekommen.
   
   Damit du es ziehen kannst musst du halt die Maus-Events abfangen und auf das canvas übersetzen. Am besten auch mit https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

4. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?