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,

Answer 1

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

Answer 2

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.