GWT - Add touch support to canvas

I have worked in the image viewer with support GWT scroll and touch.
The audience images using canvas + SVG transformation is detected so that the image can be panned and zoomed.No problems with scrolls, but I have a problem when showing images on smart phones.I have tried several other methods to handle events on canvas in GWT but failed.

Finally, I found an example of event handling in native JS and give a try. Luckyly it works.
I lost the URL of the referring page, but I'll try to find and update this post later.

The example :
I put all the event declaration in a function.
private native void attachTouch(JavaScriptObject ele) /*-{
    var ref = this;
    ele.ontouchstart = function(evt) {
      evt.preventDefault();
      var x2=-100;
      var y2=-100;
      if(evt.touches.length > 1){
        x2=evt.touches[1].pageX;
        y2=evt.touches[1].pageY;
      }
      ref.@net.vcari.webipc.client.graphics.ImageViewerSvgPanel::setInitialTouch(IIII)(evt.touches[0].pageX, evt.touches[0].pageY,x2,y2);
    }
    ele.ontouchmove = function(evt) {
      evt.preventDefault();
      var x2=-100;
      var y2=-100;
      if(evt.touches.length > 1){
        x2=evt.touches[1].pageX;
        y2=evt.touches[1].pageY;
      }
      ref.@net.vcari.webipc.client.graphics.ImageViewerSvgPanel::onTouchMove(IIII)(evt.touches[0].pageX, evt.touches[0].pageY,x2,y2);
    }
    ele.ontouchend = function(evt) {
      evt.preventDefault();
      ref.@net.vcari.webipc.client.graphics.ImageViewerSvgPanel::onEndTouch(II)(evt.pageX, evt.pageY);
    }
  }-*/;

Add touch events to the canvas:
attachTouch(canvas.getElement());

Yayy.....

0 comments:

 
Copyright © peyotest