带有 Zoom 的 Visual Studio 2017 Apache Cordova 项目

Question

我使用 Visual Studio 2017 创建了一个小型测试应用程序，在 JavaScript 分组中选择“空白应用程序 (Apache Cordova)”选项。我已经成功构建了我的应用程序，但是当我进一步研究功能时，我想知道如何在 android 上实现缩放。我只是在屏幕上显示我希望用户能够在双击或捏合时放大的文本。我已经对这个主题进行了很多谷歌搜索和堆栈溢出搜索，但我还没有成功。我已经测试了诸如使用元标记之类的东西：

<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 只不过是一个非常基本的 Web 浏览器，缺少这样的东西。 可以使用hammer.js 包向其添加该功能。

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

要实现它，请按照本文中给出的示例进行操作 -> Pinch to zoom using 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;
        }
    });
}

要实现只需调用它 锤子（document.getElementById（“elementId”））；在元素有之后 加载。您可以在任意数量的元素上调用它。