locked
Pinch to scale <img> tag in html5 metro app

    Question

  • Hello,

    I have been working on a project that requires image manipulation via touch input. I am trying to scale and rotate multiple images on the pinch and rotation gestures, however I cannot get this to work at all. I have looked through the gesture samples and documentation and even searched around on Google, but I have not been able to get a straight answer concerning this functionality. Can anybody help me implement this feature into my project?

    Thanks in advance,
    Christopher Simon

    Thursday, June 13, 2013 12:31 AM

All replies

  • hiiii,

    what your sample code look like?

    Wednesday, June 19, 2013 9:23 AM
  • Right now, the image will move when dragged, however it scales incorrectly and will not rotate at all. In addition, some inertia is applied and I am not sure how to disable it.

    (function () {
        "use strict";
    
        var page = WinJS.UI.Pages.define("default.html",
        {
                //Call up an induvidual manipulation image from the array
                var manipulationImage = document.getElementById("image");
    
                //Give the current img manipulation handlers
                manipulationImage.addEventListener("MSGestureChange", translateHandler);
                manipulationImage.addEventListener("MSPointerDown", downHandler);
    
        });
    
        WinJS.Binding.optimizeBindingReferences = true;
    
        var app = WinJS.Application;
        var activation = Windows.ApplicationModel.Activation;
    
        app.onactivated = function (args) {
            if (args.detail.kind === activation.ActivationKind.launch) {
                if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                    // TODO: This application has been newly launched. Initialize
                    // your application here.
                } else {
                    // TODO: This application has been reactivated from suspension.
                    // Restore application state here.
                }
                args.setPromise(WinJS.UI.processAll());
            }
        };
    
        app.oncheckpoint = function (args) {
            // TODO: This application is about to be suspended. Save any state
            // that needs to persist across suspensions here. You might use the
            // WinJS.Application.sessionState object, which is automatically
            // saved and restored across suspension. If you need to complete an
            // asynchronous operation before your application is suspended, call
            // args.setPromise().
        };
        function getManipulationElement(element) {
            var retValue = element;
            while (!WinJS.Utilities.hasClass(retValue, "ManipulationElement"))
            {
                retValue = retValue.parentNode;
            }
    
            // Now that we found the correct element, ensure that it has been initialized.
            if (retValue.scale === null || typeof retValue.scale === "undefined")
            {
                retValue.scale = 1;
            }
            if (retValue.translationX === null || typeof retValue.translationX === "undefined")
            {
                retValue.translationX = 0;
            }
            if (retValue.translationY === null || typeof retValue.translationY === "undefined")
            {
                retValue.translationY = 0;
            }
    
            if (retValue.gestureObject === null || typeof retValue.gestureObject === "undefined")
            {
                retValue.gestureObject = new MSGesture();
                retValue.gestureObject.target = retValue;
            }
            return retValue;
        };
    
        function translateHandler(eventObject)
        {
            var target = getManipulationElement(eventObject.target);
    
            target.style.transitionDuration = "0ms";
            target.translationX += eventObject.translationX;
            target.translationY += eventObject.translationY;
    
            //Restrictions
            //When the image is scaled, this functionality breaks
            if (target.translationX < 0) {
                target.translationX = 0;
            }
            if (target.translationX > (screen.width - target.width)) {
                target.translationX = (screen.width - target.width);
            }
            if (target.translationY < 0)
            {
                target.translationY = 0;
            }
            if (target.translationY > (screen.height - target.height))
            {
                target.translationY = (screen.height - target.height);
            }
            target.scale *= eventObject.scale;
            target.translateHandler = eventObject.translateHandler;
            target.style.transform = "translate(" + target.translationX * target.scale + "px," + target.translationY * target.scale + "px)" + "scale(" + target.scale + ")";
        }
    
        function downHandler(eventObject)
        {
            var target = getManipulationElement(eventObject.target);
            target.gestureObject.addPointer(eventObject.pointerId);
        }
        
        app.start();
    })();

    Friday, June 21, 2013 11:49 PM