Projet Visual Studio 2017 Apache Cordova avec Zoom

Question

J'ai créé une petite application de test en utilisant Visual Studio 2017, en choisissant l'option "Blank App (Apache Cordova)" le regroupement JavaScript. J'ai réussi à construire mon application mais en creusant davantage les capacités, je me demande comment mettre en œuvre le zoom sur Android. J'ai simplement du texte sur l'écran que je veux que l'utilisateur puisse zoomer sur un double tap ou un pincement. J'ai fait beaucoup de recherches sur Google et sur stack overflow sur le sujet et je n'ai pas encore réussi. J'ai testé des choses comme l'utilisation de balises méta :

<meta name="viewport" content="user-scalable=yes, initial-scale=1, maximum-scale=2, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

Mais des choses simples comme ça n'ont pas marché. J'ai également essayé de mettre en œuvre des plugins tels que Hammer.js pour atteindre mes objectifs, mais je n'ai pas encore réussi. Quelqu'un peut-il m'aider ? Merci.

Answer 1

Utilisation actuelle de javascript - marteau.js - est la seule méthode prise en charge pour ajouter le zoom par pincement. Apache Cordova n'est rien de plus qu'un navigateur web très basique qui manque de ce genre de choses. Le paquet hammer.js peut être utilisé pour lui ajouter cette fonctionnalité.

http://hammerjs.github.io/recognizer-pinch/

Pour l'implémenter, suivez l'exemple donné dans ce post -> Pincer pour zoomer avec Hammer.js

function hammerIt(elm) {
    hammertime = new Hammer(elm, {});
    hammertime.get('pinch').set({
        enable: true
    });
    var posX = 0,
        posY = 0,
        scale = 1,
        last_scale = 1,
        last_posX = 0,
        last_posY = 0,
        max_pos_x = 0,
        max_pos_y = 0,
        transform = "",
        el = elm;

    hammertime.on('doubletap pan pinch panend pinchend', function(ev) {
        if (ev.type == "doubletap") {
            transform =
                "translate3d(0, 0, 0) " +
                "scale3d(2, 2, 1) ";
            scale = 2;
            last_scale = 2;
            try {
                if (window.getComputedStyle(el, null).getPropertyValue('-webkit-transform').toString() != "matrix(1, 0, 0, 1, 0, 0)") {
                    transform =
                        "translate3d(0, 0, 0) " +
                        "scale3d(1, 1, 1) ";
                    scale = 1;
                    last_scale = 1;
                }
            } catch (err) {}
            el.style.webkitTransform = transform;
            transform = "";
        }

        //pan    
        if (scale != 1) {
            posX = last_posX + ev.deltaX;
            posY = last_posY + ev.deltaY;
            max_pos_x = Math.ceil((scale - 1) * el.clientWidth / 2);
            max_pos_y = Math.ceil((scale - 1) * el.clientHeight / 2);
            if (posX > max_pos_x) {
                posX = max_pos_x;
            }
            if (posX < -max_pos_x) {
                posX = -max_pos_x;
            }
            if (posY > max_pos_y) {
                posY = max_pos_y;
            }
            if (posY < -max_pos_y) {
                posY = -max_pos_y;
            }
        }

        //pinch
        if (ev.type == "pinch") {
            scale = Math.max(.999, Math.min(last_scale * (ev.scale), 4));
        }
        if(ev.type == "pinchend"){last_scale = scale;}

        //panend
        if(ev.type == "panend"){
            last_posX = posX < max_pos_x ? posX : max_pos_x;
            last_posY = posY < max_pos_y ? posY : max_pos_y;
        }

        if (scale != 1) {
            transform =
                "translate3d(" + posX + "px," + posY + "px, 0) " +
                "scale3d(" + scale + ", " + scale + ", 1)";
        }

        if (transform) {
            el.style.webkitTransform = transform;
        }
    });
}

Pour l'implémenter, il suffit de l'appeler avec hammerIt(document.getElementById("elementId")) ; après le chargement de l'élément. chargé. Vous pouvez l'appeler sur autant d'éléments que vous le souhaitez.