Friday, November 15, 2013

canvas toDataUrl() works in mouse event but not in touch event

Hello,

I have implemented a signature widget using the GWT 2.5 Canvas. It works great on the desktop (mouse event), but not on a tablet (touch event). Unfortunately the only table I have available for testing is an Android 2.3.4 tablet. So here is my code snippet:

      _canvas.setTabIndex(tabIndex);
      _canvas.addStyleName("neoheader");
      _canvas.setSize(width + "px", height + "px");
      _canvas.setCoordinateSpaceHeight(height);
      _canvas.setCoordinateSpaceWidth(width);

      final Context2d context = _canvas.getContext2d();
      context.setLineWidth(2);
      context.setStrokeStyle(CssColor.make(0,0,0));

      _canvas.addMouseMoveHandler(new MouseMoveHandler() {
      public void onMouseMove(MouseMoveEvent event) {
        if (_drawing) {
          int thisX = event.getRelativeX(_canvas.getElement());
          int thisY = event.getRelativeY(_canvas.getElement());
          if (_lastX >= 0 && _lastY >= 0) {
        _exists = true;
        context.beginPath();
        context.moveTo(_lastX, _lastY);
        context.lineTo(thisX, thisY);
        context.stroke();
          }
          _lastX = thisX;
          _lastY = thisY;
        }
      }
    });
      _canvas.addMouseDownHandler(new MouseDownHandler() {
      public void onMouseDown(MouseDownEvent event) { _drawing = true; }
    });
      _canvas.addMouseOutHandler(new MouseOutHandler() {
      public void onMouseOut(MouseOutEvent event) {
        _lastX = -1;
        _lastY = -1;
        _drawing = false;
        _canvas.setFocus(false);
        if (_exists) _handler.sigChanged(_canvas.toDataUrl());
      }
    });
      _canvas.addMouseUpHandler(new MouseUpHandler() {
      public void onMouseUp(MouseUpEvent event) {
        _lastX = -1;
        _lastY = -1;
        _drawing = false;
        _canvas.setFocus(false);
        if (_exists) _handler.sigChanged(_canvas.toDataUrl());
      }
    });
     
      _canvas.addTouchMoveHandler(new TouchMoveHandler() {
      public void onTouchMove(TouchMoveEvent event) {
        if (event.getTouches().length() > 0) {
          Touch touch = event.getTouches().get(0);
          int thisX = touch.getRelativeX(_canvas.getElement());
          int thisY = touch.getRelativeY(_canvas.getElement());
          if (_lastX >= 0 && _lastY >= 0) {
        _exists = true;
        context.beginPath();
        context.moveTo(_lastX, _lastY);
        context.lineTo(thisX, thisY);
        context.stroke();
          }
          _lastX = thisX;
          _lastY = thisY;
        }
        event.preventDefault();
        event.stopPropagation();
      }
    });
     
      _canvas.addTouchStartHandler(new TouchStartHandler() {
      public void onTouchStart(TouchStartEvent event) {
        event.preventDefault();
      }
    });
     
      _canvas.addTouchEndHandler(new TouchEndHandler() {
      public void onTouchEnd(TouchEndEvent event) {
        if (_exists) {
          _lastX = -1;
          _lastY = -1;
          _canvas.setFocus(false);
          _handler.sigChanged(_canvas.toDataUrl());
          com.google.gwt.user.client.Window.alert("onTouchEnd: " + _canvas.toDataUrl());
        }
        event.preventDefault();
      }
    });

As I said it works flawlessly in a desktop web browser using mouse events, but on the tablet _canvas.toDataUrl() always returns "data:," even though the canvas has been visibly drawn on. Any help would be greatly appreciated.

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-web-toolkit+unsubscribe@googlegroups.com.
To post to this group, send email to google-web-toolkit@googlegroups.com.
Visit this group at http://groups.google.com/group/google-web-toolkit.
For more options, visit https://groups.google.com/groups/opt_out.

No comments:

Post a Comment