ios - 捏和缩放不适用于 ipad

Question

我无法在 ipad 上进行缩放，我猜下面给出的代码可能会影响代码，请给出任何完美的解决方案。body child events的绑定(bind)有没有问题或者需要在不同的变量中计算touches，手工计算。

     ///I-Pad evenet Binding
   $(document).ready(function () {

       $("body").children().bind('touchstart touchmove touchend touchcancel', function () {
           var touches = event.changedTouches, first = touches[0], type = "";
           switch (event.type) {
               case "touchstart": type = "mousedown";
                   break;
               case "touchmove": type = "mousemove";
                   break;
               case "touchend": type = "mouseup";
                   break;
               default: return;
           }

           var simulatedEvent = document.createEvent("MouseEvent");
           simulatedEvent.initMouseEvent(type, true, true, window, 1,
                  first.screenX, first.screenY,
                  first.clientX, first.clientY, false,
                  false, false, false, 0/*left*/, null);
           if (touches.length < 2) {
               first.target.dispatchEvent(simulatedEvent);
               event.preventDefault();
           }

       });


   (function () {
            var last_x = null, last_y = null, w_area = workarea[0],
                panning = false, keypan = false, dopanning = false;

            $("#svgroot").bind('mousemove mouseup', function (evt) {
                if (dopanning === false) return;
                var clientxnew = +$("#svgcontent")[0].getAttribute("x"),
                clientynew = +$("#svgcontent")[0].getAttribute("y");
                clientxnew += (evt.clientX - last_x);
                clientynew += (evt.clientY - last_y);
                last_x = evt.clientX;
                last_y = evt.clientY;
                //this.setAttribute("viewBox", vb.join(' '));
                // updateCanvas(true);
                $("#svgcontent").show();
                $("#svgcontent")[0].setAttribute("x", clientxnew);
                $("#svgcontent")[0].setAttribute("y", clientynew);
                svgedit.select.getSelectorManager().selectorParentGroup.setAttribute("transform", "translate(" + clientxnew + "," + clientynew + ")");
                if (evt.type === 'mouseup') { dopanning = false; }

                return false;
            }).mousedown(function (evt) {

                var mouse_target = svgCanvas.getMouseTarget(evt);
                if (svgCanvas.getMode() == "text" || svgCanvas.getMode() == "textedit") {
                    dopanning = false; return;
                }
                if ((mouse_target.id.indexOf("grouplayerdragged") > -1 || mouse_target.id.indexOf("hotspot") > -1 ||
                mouse_target.id.indexOf("clonediv") > -1 || mouse_target.tagName === "text")) { dopanning = false; return; }
                if (selectedElement != null) {
                    dopanning = false; return;
                }
                if (evt.button === 0) {
                    dopanning = true;
                    last_x = evt.clientX;
                    last_y = evt.clientY;
                    svgCanvas.clearSelection(true);
                    return false;

                }
            });

            $(window).mouseup(function () {
                panning = false;
                dopanning = false;
            });

Answer 1

你应该使用 gesturechange。尝试这种方式(这不是您的确切解决方案，但您可以破解它)

var angle = 0;
var newAngle;
var scale = 1;
var newScale;

function saveChanges() {
    angle = newAngle;
    scale = newScale;
}
function getAngleAndScale(e) {

    // Don't zoom or rotate the whole screen
    e.preventDefault();
    // Rotation and scale are event properties
    newAngle = angle + e.rotation;
    newScale = scale * e.scale;
    // Combine scale and rotation into a single transform
    var tString = "scale(" + newScale + ")";
    document.getElementById("theDiv").style.webkitTransform = tString;
}
function init() {
    // Set scale and rotation during gestures
    document.getElementById("theDiv").addEventListener("gesturechange", getAngleAndScale, false);
    // Preserve scale and rotation when gesture ends
    document.getElementById("theDiv").addEventListener("gestureend", saveChanges, false);
}

---

<正文>

<div style="width:300px;height:300px;overflow:scrool;-webkit-overflow-scrolling: touch;">
   <img id="theDiv" style="width:100%;" src="http://animal.discovery.com/guides/wild-birds/gallery/mallard_duck.jpg" />
</div>

Try this on your ipad