com.google.gwt.widgetideas.graphics.client
Class GWTCanvas

java.lang.Object
  extended by com.google.gwt.user.client.ui.UIObject
      extended by com.google.gwt.user.client.ui.Widget
          extended by com.google.gwt.widgetideas.graphics.client.GWTCanvas
All Implemented Interfaces:
com.google.gwt.user.client.EventListener

public class GWTCanvas
extends com.google.gwt.user.client.ui.Widget

2D Graphics API. API mimicks functionality found in the Javascript canvas API (see canvas tutorial).

Performance may scale differently for IE than for browsers with a native canvas implementation. Sub-pixel precision is supported where possible.


Nested Class Summary
 
Nested classes/interfaces inherited from class com.google.gwt.user.client.ui.UIObject
com.google.gwt.user.client.ui.UIObject.DebugIdImpl, com.google.gwt.user.client.ui.UIObject.DebugIdImplEnabled
 
Field Summary
 
Fields inherited from class com.google.gwt.user.client.ui.UIObject
DEBUG_ID_PREFIX
 
Constructor Summary
GWTCanvas()
          Creates a GWTCanvas element.
GWTCanvas(int coordX, int coordY)
          Creates a GWTCanvas element.
GWTCanvas(int coordX, int coordY, int pixelX, int pixelY)
          Creates a GWTCanvas element.
 
Method Summary
 void arc(float x, float y, float radius, float startAngle, float endAngle, boolean antiClockwise)
          Draws an arc.
 void beginPath()
          Erases the current path and prepares it for a new path.
 void clear()
          Clears the entire canvas.
 void closePath()
          Closes the current path.
 void cubicCurveTo(float cp1x, float cp1y, float cp2x, float cp2y, float x, float y)
          Does nothing if the context's path is empty.
 void drawImage(ImageHandle img, int offsetX, int offsetY)
          Draws an input image to a specified position on the canvas.
 void drawImage(ImageHandle img, int offsetX, int offsetY, int width, int height)
          Draws an input image at a given position on the canvas.
 void fill()
          Fills the current path according to the current fillstyle.
 void fillRect(float startX, float startY, float width, float height)
          Fills a rectangle of the specified dimensions, at the specified start coords, according to the current fillstyle.
 int getHeight()
          Returns the height in pixels of the canvas.
 int getWidth()
          Returns the width in pixels of the canvas.
 void lineTo(float x, float y)
          Adds a line from the last point in the current path to the point defined by x and y.
 void moveTo(float x, float y)
          Makes the last point in the current path be (x,y).
 void quadraticCurveTo(float cpx, float cpy, float x, float y)
          Does nothing if the context has an empty path.
 void rect(float startX, float startY, float width, float height)
          Adds a rectangle to the current path, and closes the path.
 void resize(int width, int height)
          Convenience function for resizing the canvas with consistent coordinate and screen pixel spaces.
 void restoreContext()
          Restores the last saved context from the context stack.
 void rotate(float angle)
          Adds a rotation of the specified angle to the current transform.
 void saveContext()
          Saves the current context to the context stack.
 void scale(float x, float y)
          Adds a scale transformation to the current transformation matrix.
 void setCoordSize(int width, int height)
          Sets the coordinate space of the Canvas.
 void setFillStyle(Color color)
          Set the current Fill Style to the specified color.
 void setGlobalAlpha(float alpha)
          Set the global transparency to the specified alpha.
 void setLineWidth(float width)
          Sets the current context's linewidth.
 void setPixelHeight(int height)
          Sets the height of the canvas in pixels.
 void setPixelWidth(int width)
          Sets the CSS property in pixels for the canvas.
 void setStrokeStyle(Color color)
          Set the current Stroke Style to the specified color.
 void stroke()
          Strokes the current path according to the current stroke style.
 void strokeRect(float startX, float startY, float width, float height)
          Strokes a rectangle defined by the supplied arguments.
 void transform(float m11, float m12, float m21, float m22, float dx, float dy)
          The transform(m11, m12, m21, m22, dx, dy) method must multiply the current transformation matrix with the input matrix.
 void translate(float x, float y)
          Applies a translation (linear shift) by x in the horizontal and by y in the vertical.
 
Methods inherited from class com.google.gwt.user.client.ui.Widget
doAttachChildren, doDetachChildren, getParent, isAttached, onAttach, onBrowserEvent, onDetach, onLoad, onUnload, removeFromParent, setElement
 
Methods inherited from class com.google.gwt.user.client.ui.UIObject
addStyleDependentName, addStyleName, ensureDebugId, ensureDebugId, getAbsoluteLeft, getAbsoluteTop, getElement, getOffsetHeight, getOffsetWidth, getStyleElement, getStyleName, getStyleName, getStylePrimaryName, getStylePrimaryName, getTitle, isVisible, isVisible, onEnsureDebugId, removeStyleDependentName, removeStyleName, setHeight, setPixelSize, setSize, setStyleName, setStyleName, setStyleName, setStylePrimaryName, setStylePrimaryName, setTitle, setVisible, setVisible, setWidth, sinkEvents, toString, unsinkEvents
 
Methods inherited from class java.lang.Object
clone, equals, finalize, getClass, hashCode, notify, notifyAll, wait, wait, wait
 

Constructor Detail

GWTCanvas

public GWTCanvas()
Creates a GWTCanvas element. Element type depends on deferred binding. Default is CANVAS HTML5 DOM element. In the case of IE it should be VML.

Screen size of canvas in pixels defaults to 300x150 pixels.


GWTCanvas

public GWTCanvas(int coordX,
                 int coordY)
Creates a GWTCanvas element. Element type depends on deferred binding. Default is CANVAS HTML5 DOM element. In the case of IE it should be VML.

Screen size of canvas in pixels defaults to the coordinate space dimensions for this constructor.

Parameters:
coordX - the size of the coordinate space in the x direction
coordY - the size of the coordinate space in the y direction

GWTCanvas

public GWTCanvas(int coordX,
                 int coordY,
                 int pixelX,
                 int pixelY)
Creates a GWTCanvas element. Element type depends on deferred binding. Default is CANVAS HTML5 DOM element. In the case of IE it should be VML.

Different coordinate spaces and pixel spaces will cause aliased scaling. Use scale(float,float) and consistent coordinate and pixel spaces for better results.

Parameters:
coordX - the size of the coordinate space in the x direction
coordY - the size of the coordinate space in the y direction
pixelX - the CSS width in pixels of the canvas element
pixelY - the CSS height in pixels of the canvas element
Method Detail

arc

public void arc(float x,
                float y,
                float radius,
                float startAngle,
                float endAngle,
                boolean antiClockwise)
Draws an arc. If the context has a non-empty path, then the method must add a straight line from the last point in the path to the start point of the arc.

Parameters:
x - center X coordinate
y - center Y coordinate
radius - radius of drawn arc
startAngle - angle measured from positive X axis to start of arc CW
endAngle - angle measured from positive X axis to end of arc CW
antiClockwise - direction that the arc line is drawn

beginPath

public void beginPath()
Erases the current path and prepares it for a new path.


clear

public void clear()
Clears the entire canvas.


closePath

public void closePath()
Closes the current path. "Closing" simply means that a line is drawn from the last element in the path back to the first.


cubicCurveTo

public void cubicCurveTo(float cp1x,
                         float cp1y,
                         float cp2x,
                         float cp2y,
                         float x,
                         float y)
Does nothing if the context's path is empty. Otherwise, it connects the last point in the path to the given point (x, y) using a cubic Bˇzier curve with control points (cp1x, cp1y) and (cp2x, cp2y). Then, it must add the point (x, y) to the path. This function corresponds to the bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) method in canvas element Javascript API.

Parameters:
cp1x - x coord of first Control Point
cp1y - y coord of first Control Point
cp2x - x coord of second Control Point
cp2y - y coord of second Control Point
x - x coord of point
y - x coord of point

drawImage

public void drawImage(ImageHandle img,
                      int offsetX,
                      int offsetY)
Draws an input image to a specified position on the canvas. Size defaults to the default dimensions of the image.

Parameters:
img - the image to be drawn
offsetX - x coord of the top left corner in the destination space
offsetY - y coord of the top left corner in the destination space

drawImage

public void drawImage(ImageHandle img,
                      int offsetX,
                      int offsetY,
                      int width,
                      int height)
Draws an input image at a given position on the canvas. Resizes image according to specified width and height.

We recommend that the pixel and coordinate spaces be the same to provide consistent positioning and scaling results

Parameters:
img - The image to be drawn
offsetX - x coord of the top left corner in the destination space
offsetY - y coord of the top left corner in the destination space
width - the size of the image in the destination space
height - the size of the image in the destination space

fill

public void fill()
Fills the current path according to the current fillstyle.


fillRect

public void fillRect(float startX,
                     float startY,
                     float width,
                     float height)
Fills a rectangle of the specified dimensions, at the specified start coords, according to the current fillstyle.

Parameters:
startX - x coord of the top left corner in the destination space
startY - y coord of the top left corner in the destination space
width - destination width of image
height - destination height of image

getHeight

public int getHeight()
Returns the height in pixels of the canvas.

Returns:
returns the height in pixels of the canvas

getWidth

public int getWidth()
Returns the width in pixels of the canvas.

Returns:
returns the width in pixels of the canvas

lineTo

public void lineTo(float x,
                   float y)
Adds a line from the last point in the current path to the point defined by x and y.

Parameters:
x - x coord of point
y - y coord of point

moveTo

public void moveTo(float x,
                   float y)
Makes the last point in the current path be (x,y).

Parameters:
x - x coord of point
y - y coord of point

quadraticCurveTo

public void quadraticCurveTo(float cpx,
                             float cpy,
                             float x,
                             float y)
Does nothing if the context has an empty path. Otherwise it connects the last point in the path to the given point (x, y) using a quadratic Bˇzier curve with control point (cpx, cpy), and then adds the given point (x, y) to the path.

Parameters:
cpx - x coord of the control point
cpy - y coord of the control point
x - x coord of the point
y - y coord of the point

rect

public void rect(float startX,
                 float startY,
                 float width,
                 float height)
Adds a rectangle to the current path, and closes the path.

Parameters:
startX - x coord of the top left corner of the rectangle
startY - y coord of the top left corner of the rectangle
width - the width of the rectangle
height - the height of the rectangle

resize

public void resize(int width,
                   int height)
Convenience function for resizing the canvas with consistent coordinate and screen pixel spaces. Equivalent to doing:

 canvas.setCoordSize(width, height);
 canvas.setPixelHeight(height);
 canvas.setPixelWidth(width);
 

Parameters:
width -
height -

restoreContext

public void restoreContext()
Restores the last saved context from the context stack.


rotate

public void rotate(float angle)
Adds a rotation of the specified angle to the current transform.

Parameters:
angle - the angle to rotate by, in radians

saveContext

public void saveContext()
Saves the current context to the context stack.


scale

public void scale(float x,
                  float y)
Adds a scale transformation to the current transformation matrix.

Parameters:
x - ratio that we must scale in the X direction
y - ratio that we must scale in the Y direction

setCoordSize

public void setCoordSize(int width,
                         int height)
Sets the coordinate space of the Canvas.

This will erase the canvas contents!

Parameters:
width - the size of the x component of the coordinate space
height - the size of the y component of the coordinate space

setFillStyle

public void setFillStyle(Color color)
Set the current Fill Style to the specified color.

Parameters:
color - Color

setGlobalAlpha

public void setGlobalAlpha(float alpha)
Set the global transparency to the specified alpha.

Parameters:
alpha - alpha value

setLineWidth

public void setLineWidth(float width)
Sets the current context's linewidth. Line width is the thickness of a stroked line.

Parameters:
width - the width of the canvas

setPixelHeight

public void setPixelHeight(int height)
Sets the height of the canvas in pixels. Also defines the height of the coordinate space as an integer value.

Parameters:
height - the height of the canvas

setPixelWidth

public void setPixelWidth(int width)
Sets the CSS property in pixels for the canvas.

Parameters:
width - width of the canvas

setStrokeStyle

public void setStrokeStyle(Color color)
Set the current Stroke Style to the specified color.

Parameters:
color - Color

stroke

public void stroke()
Strokes the current path according to the current stroke style.


strokeRect

public void strokeRect(float startX,
                       float startY,
                       float width,
                       float height)
Strokes a rectangle defined by the supplied arguments.

Parameters:
startX - x coord of the top left corner
startY - y coord of the top left corner
width - width of the rectangle
height - height of the rectangle

transform

public void transform(float m11,
                      float m12,
                      float m21,
                      float m22,
                      float dx,
                      float dy)
The transform(m11, m12, m21, m22, dx, dy) method must multiply the current transformation matrix with the input matrix. Input described by:
 m11   m21   dx
 m12   m22   dy
 0      0     1 

Parameters:
m11 - top left cell of 2x2 rotation matrix
m12 - top right cell of 2x2 rotation matrix
m21 - bottom left cell of 2x2 rotation matrix
m22 - bottom right cell of 2x2 rotation matrix
dx - Translation in X direction
dy - Translation in Y direction

translate

public void translate(float x,
                      float y)
Applies a translation (linear shift) by x in the horizontal and by y in the vertical.

Parameters:
x - amount to shift in the x direction
y - amount to shift in the y direction