
Originariamente inviata da
cavicchiandrea
Ciao, lascia perdere operazione troppo complessa per un profano. La strada che potevi percorrere (senza successo) era il web, l'unica è insistere sperando di trovare qualcosa che faccia al caso tuo. Per il discorso del telefonino (smartphone) il tag object potrebbe non essere supportato e non è detto che ci sia un'alternativa è per questo motivo che creano le app.

Grazie ho trovato su github una soluzione che fa al caso mio, ora però dovrei modificarla perchè zoomma sì, ma io vorrei che quando zoommo indietro il mio svg tornasse alla posizione originaria, cosa che non fa. Ho scoperto che ha regolare questa funzione (panning) è una (variabile?) COSA (
) che settata a false non me lo fa più muovere perciò pensavo di settarla a false e fare in modo che si setti a true solo quando l'svg è più grande della sua dimensione originaria, di modo tale che quando torno indietro con lo zoom alla dimensione d'origine torni anche alla posizione d'origine. Un aiutino?
Sto usando hammer.js e questa libreria https://github.com/ariutta/svg-pan-zoom. Ho già cambiato il codice in modo che non si potesse zoommare sotto la dimensione originale, perchè non mi interessa renderlo più piccolo di quello che è (gusto personale, nonchè mi è utile per il motivo di cui sopra). mi resta questo script js che però non so come modificare:
codice HTML:
<script>
// Don't use window.onLoad like this in production, because it can only listen to one function. window.onload = function() { var eventsHandler;
eventsHandler = { haltEventListeners: ['touchstart', 'touchend', 'touchmove', 'touchleave', 'touchcancel'] , init: function(options) { var instance = options.instance , initialScale = 1 , pannedX = 0 , pannedY = 0
// Init Hammer // Listen only for pointer and touch events this.hammer = Hammer(options.svgElement, { inputClass: Hammer.SUPPORT_POINTER_EVENTS ? Hammer.PointerEventInput : Hammer.TouchInput })
// Enable pinch this.hammer.get('pinch').set({enable: true}) this.hammer.get('pan').set({enable:true})
// Handle double tap this.hammer.on('doubletap', function(ev){ instance.zoomIn() }) // Handle pan this.hammer.on('panstart panmove', function(ev){ // On pan start reset panned variables if (ev.type === 'panstart') { pannedX = 0 pannedY = 0 }
// Pan only the difference instance.panBy({x: ev.deltaX - pannedX, y: ev.deltaY - pannedY}) pannedX = ev.deltaX; pannedY = ev.deltaY; })
// Handle pinch this.hammer.on('pinchstart pinchmove', function(ev){ // On pinch start remember initial zoom if (ev.type === 'pinchstart') { initialScale = instance.getZoom() instance.zoom(initialScale * ev.scale) } instance.zoom(initialScale * ev.scale) }) // Prevent moving the page on some devices when panning over SVG options.svgElement.addEventListener('touchmove', function(e){ e.preventDefault(); }); }
, destroy: function(){ this.hammer.destroy() } } // Expose to window namespace for testing purposes window.panZoom = svgPanZoom('#image', { zoomEnabled: true , controlIconsEnabled: false //abilita e disabilita le icone dello zoom , fit: 1 , center: 1 , customEventsHandler: eventsHandler }); };
</script>
probabilmente ci va un if da qualche parte, ma non so dove/come. la COSA di cui parlavo è panEnabled: false