locked
How to resize div and its content on pinch zoom?

 > 

    Question

  • Question
    Sign in to vote
    0
    Sign in to vote

    Hi All

    I am building simple paint store app using javascript. i am creating shapes like circle, rectangle and star with different layer of canvas with div as parent. structure will be like this

    <div class="shapecontainer">

    <canvas class="shapes"></canvas>

    <div class="deleteBtn"></div>

    <div class="resizeBtn"></div>

    <div class="rasterizeBtn"></div>

    </div>

    i am able to achieve all the function like delete, rasterize and resize using respective mspointer events.

    my question is it possible to resize "shapecontainer" div using pinch zoom. if possible how? an example will be better.

    thanks in advance

    vinay

    Friday, November 22, 2013 2:24 PM

Answers

  • Question
    Sign in to vote
    0
    Sign in to vote

    Take a look at the Input instantiable gestures sample, which does exactly this. You need to use MSGesture events, which are associated with the simpler pointer events to handle multi-point input. In your case you'll be looking at MSGestureChange and setting up an msTransform style for scale in response to the gesture. Again, the sample does this as well as translation.

    I discuss the subject in my book (Chapter 12 of the second edition preview for 8.1, Chapter 9 of the first edition if you're working with Win8), in the "Gesture Events" section.

    Kraig

    Author, Programming Windows Store Apps with HTML, CSS, and JavaScript, Second Edition, a free ebook from Microsoft Press. First edition (for Windows 8) also available.


    Friday, November 22, 2013 4:53 PM