Visualizzazione dei risultati da 1 a 3 su 3
  1. #1
    Utente di HTML.it
    Registrato dal
    Feb 2013
    Messaggi
    9

    svg, tag object e pinch to zoom in js

    Salve a tutti!
    Premetto che in Javascript faccio pena, per questo mi affido a voi: sto creando una pagina html che ha al suo interno un svg inserito per mezzo di un tag object. L'svg in questione deve essere cliccabile, per questo l'ho inserito in quel tag. Ora io vorrei che fosse possibile zoommare quel svg con il classico pinch to zoom, so che si realizza in javascript ma non so da che parte cominciare. Avevo un esempio trovato sul web che zoommava con il doppio tocco, ma non è quello che mi serve e non so nemmeno modificarlo, senza contare che non so proprio perchè, nel momento in cui lo provo da telefono l'svg non è più cliccabile come volevo.
    Qualcuno sa aiutarmi?

  2. #2
    Moderatore di Annunci siti web, Offro lavoro/collaborazione, Cerco lavoro L'avatar di cavicchiandrea
    Registrato dal
    Aug 2001
    Messaggi
    26,133
    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.

    Cavicchi Andrea
    Problemi con javascript, jquery, ajax clicca qui

  3. #3
    Utente di HTML.it
    Registrato dal
    Feb 2013
    Messaggi
    9
    Quote Originariamente inviata da cavicchiandrea Visualizza il messaggio
    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

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.