Hammerjs v2.0.2 捏合缩放图片

Question

我正在尝试在使用 Cordova 为 iOS 和 Android 开发的 Web 应用程序中创建捏合缩放动作。

我已经用 Hammerjs 1.1.3 尝试了 this 脚本，并且在第一时间我认为这是造成这个问题的 Hammerjs 版本，所以我已经将脚本“翻译”为使用 Hammerjs 2.0。 2 但无论哪种方式我都有相同的结果。

在 iOS 中（目前我在 Mac 上使用 Xcode 模拟器）我可以缩放图像，但在第一次拖动事件后图像被剪切，之后我无法拖动图像。

我认为这个问题是由 css transform3d 动画引起的，你有没有在 iOS 中遇到过同样的问题或类似的问题？

HTML 结构：

<div id="pinchzoom">
        <img id="rect" src="..." width="2835" height="4289" alt="" />
</div>

这是 Hammerjs 2.0.2 中的脚本。

   var elem = document.getElementById('pinchzoom');   
            var mc = Hammer(elem,{touchAction: 'manipulation'});

            mc.get('pinch').set({enable: true});

            var rect = document.getElementById('img_hover');

            var posX=0, posY=0,
                scale=1, last_scale,
                last_posX=0, last_posY=0,
                max_pos_x=0, max_pos_y=0;

            mc.on('pan pinchout pinchin panend', function(ev){
                        switch(ev.type)
                        {

                                case 'pan':
                                    if(scale != 1){
                                                posX = last_posX + ev.deltaX;
                                                posY = last_posY + ev.deltaY;
                                                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;
                                                }
                                        }else{
                                            posX = 0;
                                            posY = 0;
                                            saved_posX = 0;
                                            saved_posY = 0;
                                        }

                                break;

                                 case 'pinchin':
                                 case 'pinchout':
                                    last_scale = scale;
                                    scale = Math.max(1, Math.min(last_scale * ev.scale, 10));

                                    max_pos_x = Math.ceil((scale - 1) * rect.clientWidth / 2);
                                    max_pos_y = Math.ceil((scale - 1) * rect.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;
                                    }

                                break;

                                case 'panend':
                                    last_posX = posX < max_pos_x ? posX: max_pos_x;
                                    last_posY = posY < max_pos_y ? posY: max_pos_y;

                                break;

                        }

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

                        rect.style.transform = transform;
                        rect.style.oTransform = transform;
                        rect.style.msTransform = transform;
                        rect.style.mozTransform = transform;
                        rect.style.webkitTransform = transform;

                    });

Answer 1

我在 Android 和 iOS 中使用了 jr-crop 带有 Cordova 相机插件的插件。

捏缩放功能在这些插件中可用。