Visual Studio 2017 Проект Apache Cordova с увеличением

Question

Я создал небольшое тестовое приложение с использованием Visual Studio 2017, выбрав «Пустое приложение (Apache Cordova)» для группировки JavaScript.Я успешно построил свое приложение, но когда я углубляюсь в возможности, мне интересно, как реализовать увеличение на Android.У меня просто есть текст на экране, который я хочу, чтобы пользователь мог увеличивать при двойном нажатии или ущипнуть.Я выполнил много поисков в Google и переполнил поиск по теме, но пока не увенчался успехом.Я проверял такие вещи, как использование мета-тегов:

<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" />

Но такие простые вещи не сработали.Я также пытался реализовать плагины, такие как Hammer.js, чтобы достичь своих целей, но пока не добился успеха.Может кто-нибудь помочь?Благодарю.

Answer 1

В настоящее время используется javascript - hammer.js - единственный поддерживаемый метод добавления масштабирования пинч.Apache cordova - не более чем простой веб-браузер, в котором отсутствуют подобные вещи.Пакет hammer.js можно использовать для добавления этой функциональности.

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

Чтобы реализовать это, следуйте примеру, приведенному в этом посте -> Сжатие для увеличения с помощью 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;
        }
    });
}

Для реализации просто вызовите его с hammerIt (document.getElementById ("elementId"));после того, как элемент загрузился.Вы можете вызывать это на любом количестве элементов.