locked
Individual Image gesture control in winjs canvas

    Question

  • I have tried the following code in order to implement gesture control over individual images placed inside the canvas.But this works only for the whole canvas not for the individual elements

    var can = document.getElementById("canvas");
    
            for (var i = 0; i < 10; i++) {
                onjarray[i] = document.getElementById("Img" + i);
                can.appendChild(onjarray[i]);
            }
    
    
                can.originalTransform = can.style.transform;
                gObj1 = new MSGesture();
                // Defining gesture object for Pen, mouse and touch
                gObj1.target = can;
                can.gesture = gObj1;
                can.gesture.pointerType = null;
    
                can.addEventListener("MSPointerDown", onPointerDown, false);
                can.addEventListener("MSGestureTap", onTap, false);
                can.addEventListener("MSGestureHold", onHold, false);
                can.addEventListener("MSGestureChange", onGestureChange, false);
                can.addEventListener("wheel", onMouseWheel, false);
                // Mouse Wheel does not generate onPointerUp
                can.addEventListener("MSGestureEnd", onGestureEnd, false);

    can some one point me towards the rightway to have gesture control over individual elemnts place in the canvas

    Thanks,

    Friday, February 08, 2013 5:35 AM

All replies

  • Hi Hari,

    I think in the above code you are adding event listener to the canvas but not to the image so that it is working for canvas.

    Please try adding event listener to the image in the above for loop.

    I think that will be helpful.


    raja

    Friday, February 08, 2013 6:11 AM
  • Hi Raja KPV,

       I have already tried adding event listener to the image and it didn't work. Here is the sample code for clear understanding. 

          var can=document.getElementByid("canvas");
    
          for (var i = 0; i < 10; i++) {
                onjarray[i] = document.getElementById("Img" + i);
                can.appendChild(onjarray[i]);
    
               can.children[i].originalTransform = can.children[i].style.transform;
                gObj1[i] = new MSGesture();
                // Defining gesture object for Pen, mouse and touch
                gObj1[i].target = can.children[i];
                can.children[i].gesture = gObj1[i];
                can.children[i].gesture.pointerType = null;
    
                can.children[i].addEventListener("MSPointerDown", onPointerDown, false);
                can.children[i].addEventListener("MSGestureTap", onTap, false);
                can.children[i].addEventListener("MSGestureHold", onHold, false);
                can.children[i].addEventListener("MSGestureChange", onGestureChange, false);
                can.children[i].addEventListener("wheel", onMouseWheel, false);
                // Mouse Wheel does not generate onPointerUp
                can.children[i].addEventListener("MSGestureEnd", onGestureEnd, false);
            }
    

    Am i doing something wrong? If so, suggest me the right way to do it.

    Thanks.

    Friday, February 08, 2013 9:08 AM