Welcome to NavWin!
  

Introduction

If you need to do some drawing then you need to be using the Canvas control. It is quite likely that Canvas support will be offered by a future version of GWT (if it isn’t already). However, it you want to get something up and running quickly, using the bog-standard GWT, then the following notes may help you.

Embed the Canvas in an HTML class

The easiest way to get your Canvas control is to inherit an HTML call which can be added directly a Panel. You can then add a native function to get to the 2d context into a class variable.

Public class NavWinWidgetCanvas extends HTML

{

 

      JavaScriptObject _context = null;

     

      public NavWinWidgetCanvas(int widthPixels, int heightPixels)

      {

            String html = "<canvas width='" + widthPixels + "' height='" + heightPixels + "'>Your browser does not support the canvas element.</canvas>";

            this.setHTML(html);

            Node canvas = getCanvas();

            _context = getContext(canvas);

      }

 

      private Node getCanvas()

      {

            Element elem = this.getElement();

            return elem.getChild(0);

      }

      private final native JavaScriptObject getContext(JavaScriptObject canvas) /*-{

            return canvas.getContext("2d");

      }-*/;

 

}

 

Add some drawing functions

You can add functions to draw lines as below. Circles and rectangles can have similar interfaces.

      private final native void drawLine(JavaScriptObject context, float x1, float y1, float x2, float y2) /*-{

            context.beginPath();

            context.moveTo(x1,y1);

            context.lineTo(x2,y2); 

            context.stroke();

            context.closePath();

      }-*/;

 

Adding colour

Lines and solid shapes have separate drawing contexts. You can either add functions to access them separately, or you can simple add higher level functions to set them both, as below

      private final native void setColor(JavaScriptObject context, String color) /*-{

            context.fillStyle = color;

            context.strokeStyle = color;

 

      }-*/;

 

Once a context has been given a colour it will remain set at that colour for all subsequent drawing actions.

Drawing a dashed line

There is no direct support for drawing a dashed line so you have to provide support for this yourself. The following code is adapted from this web page from David Owens.

http://davidowens.wordpress.com/2010/09/07/html-5-canvas-and-dashed-lines/

The code has been tested and the output looks like this (drawing a dashed line at 10o angles around an origin (and a corresponding one with solid lines).

 

      private void drawDashedLine(JavaScriptObject context, float fromX, float fromY, float toX, float toY, JsArrayInteger pattern)

      {

           

            beginPath(context);

           

            Boolean xgreaterThan = true;

            Boolean ygreaterThan = true;

           

             if (fromY - toY > 0)

                  ygreaterThan = false;

             if (fromX - toX > 0)

                  xgreaterThan = false;

 

              MoveTo(context, fromX, fromY);

              float offsetX = fromX;

              float offsetY = fromY;

              int idx = 0;

              Boolean dash = true;

              float ang = (float) Math.atan2(toY - fromY, toX - fromX);

              float cosAng = (float) Math.cos(ang);

              float sinAng = (float) Math.sin(ang);

             

              while (!(thereYet(xgreaterThan, offsetX, toX) && thereYet(ygreaterThan, offsetY, toY))) {

                int len = pattern.get(idx);

 

                offsetX = cap(xgreaterThan, toX, offsetX + (cosAng * len));

                offsetY = cap(ygreaterThan, toY, offsetY + (sinAng * len));

 

                if (dash)

                  LineTo(context, offsetX, offsetY);

                else

                  MoveTo(context, offsetX, offsetY);

 

                idx = (idx + 1) % pattern.length();

                dash = !dash;

              }

             

              endPath(context);

           

      }

 

      private Boolean thereYet(Boolean greaterThan, float a, float b)

      {

            if (greaterThan)

                  return a >= b;

            else

                  return a <= b;

      }

      private float cap(Boolean greaterThan, float a, float b)

      {

            if (greaterThan)

                  return Math.min(a, b);

            else

                  return Math.max(a, b);

      }

      private final native void beginPath(JavaScriptObject context) /*-{

            context.beginPath();

      }-*/;

      private final native void endPath(JavaScriptObject context) /*-{

            context.stroke();

            context.closePath();

      }-*/;

 

Drawing Angled Text

You can draw angled text quite easily, but trying to work out where to start drawing it is a different matter.