locked
how to move and rotate an image using javascript and html5 at metro style apps?

    Question

  • I am working on a metro style application. I need to move and rotate an image using mouse after clicking (selecting) it. I want to rotate this image at any angle, not just 90, 180 and /or 270 degree. Any ideas about it? Thanks.
    Tuesday, July 17, 2012 6:21 AM

Answers

All replies

  • Hi,

    In general, this requires you to handle the MSPointerDown, MSPointerMove, and MSPointerUp events, and then manipulate CSS rotate transform.

    Best Regards,

    Ming Xu.


    Please mark the replies as answers if they help or unmark if not.
    If you have any feedback about my replies, please contact msdnmg@microsoft.com.
    Microsoft One Code Framework

    Wednesday, July 18, 2012 11:06 AM
    Moderator
  • Hello,

    Typically you can use the "-ms-transform" property to style an element using CSS3. You can specify the angle of rotation as :-

    ms-transform: rotate

    rotates an element, with angle (rotate in above syntax) indicating the amount of rotation about the origin of the element. (Rotate-value parameters are numbers followed by an angle unit identifier: deg, grad, rad, or turn.)

    Sample :-

    function RotateElement()
    {
        var transformElement = document.getElementById("transformElement");
    
        var originX = Number(document.getElementById("originX").value);
        var originY = Number(document.getElementById("originY").value);
        if (isNaN(originX)) originX = 50;
        if (isNaN(originY)) originY = 50;
        var angle = Number(document.getElementById("rotateAngle").value);
        if (isNaN(angle)) angle = 0;
    
        transformElement.style.msTransformOrigin = originX + '% ' + originY + '%';
    
        var transformString = 'rotate(' + angle + 'deg)';
        transformElement.style.msTransform = transformString;
    }

    -Sagar


    Wednesday, July 18, 2012 1:13 PM
    Moderator
  • Wednesday, July 18, 2012 2:47 PM
    Moderator
  • Thanks a lot.

    Where is the source code for the : http://ie.microsoft.com/testdrive/Browser/BrowserSurface/ ?

    Also it just show how to move the image using mouse drag. How to rotate an image to any angle using mouse drag? Any source code?

    Thursday, July 19, 2012 5:44 AM
  • Hi,

    The last two lines in above code snippet are for rotation.

    -Sagar

    Thursday, July 19, 2012 1:59 PM
    Moderator
  • Sorry. Thanks.

    Where is the source code for the : http://ie.microsoft.com/testdrive/Browser/BrowserSurface/ ? 

    The image moving with mouse in this hyperlink looks great.


    Thursday, July 19, 2012 3:53 PM
  • Hi,

    We have not released source code for that demo. But you can hit F12, and then click View => Source to view the source code. Please note it is may needed to figure out which script file is linked, and then download them.

    I have not found a sample online which demonstrates how to rotate an image using mouse. But as pointed out above, to rotate an image, you use CSS transform. To work with mouse, you can use MSPointer*** events. 

    Alternatively, you can also submit a sample request on http://1code.codeplex.com/workitem/list/basic. This service is free.

    Best Regards,

    Ming Xu.


    Please mark the replies as answers if they help or unmark if not.
    If you have any feedback about my replies, please contact msdnmg@microsoft.com.
    Microsoft One Code Framework

    Friday, July 20, 2012 9:49 AM
    Moderator
  • I figure out how to move an image with mouse now. But the problem is the rotation. The above code show how to rotate an image, but it does not show how to rotate an image with mouse. The rotation center should be the center of the image. If anyone can provide this sample code, it will be great. Thanks. 
    Friday, July 20, 2012 4:16 PM
  • Hi,

    I'm afraid I don't have any sample links, but as I mentioned in my previous reply:

       you can also submit a sample request on http://1code.codeplex.com/workitem/list/basic. This service is free.

    you could make a request to OneCode and see whether they can help, that is precisely what the OneCode site has been created for.

    Best Regards,

    Ming Xu.


    Please mark the replies as answers if they help or unmark if not.
    If you have any feedback about my replies, please contact msdnmg@microsoft.com.
    Microsoft One Code Framework

    Monday, July 23, 2012 8:07 AM
    Moderator
  • Thanks. I submitted the request, but no response now.

    In fact, this hyperlink provides the demo: http://demo.superdit.com/jquery_image_rotate/

    But it uses Jquery. I would like to know if metro style apps has thus sample code. 

    • Marked as answer by Dino He Friday, August 3, 2012 7:14 AM
    Monday, July 23, 2012 6:00 PM