/*
* Copyright 2008 Oliver Zoran
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
package gwt.canvas.client;
import com.google.gwt.core.client.GWT;
import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.Event;
import com.google.gwt.user.client.ui.ClickListener;
import com.google.gwt.user.client.ui.ClickListenerCollection;
import com.google.gwt.user.client.ui.Image;
import com.google.gwt.user.client.ui.MouseListener;
import com.google.gwt.user.client.ui.MouseListenerCollection;
import com.google.gwt.user.client.ui.MouseWheelListener;
import com.google.gwt.user.client.ui.MouseWheelListenerCollection;
import com.google.gwt.user.client.ui.SourcesClickEvents;
import com.google.gwt.user.client.ui.SourcesMouseEvents;
import com.google.gwt.user.client.ui.SourcesMouseWheelEvents;
import com.google.gwt.user.client.ui.Widget;
/**
* The <code>Canvas</code> is a widget that you use to draw arbitrary graphics.
* <p>
* When you want to draw a shape, you set the current path to that shape and
* then paint the shape by stroking, filling, or both stroking and filling.
* Stroking is the process of painting a line along the current path. Filling
* is the process of painting the area contained within the path.
* <p>
* You use paths to draw both simple shapes (for example, lines, circles, or
* rectangles) and complex shapes (such as the silhouette of a mountain range)
* in a canvas. You can use a path to both draw the outline of a shape and fill
* the inside of a shape. Prior to building the path, you can define properties
* such as fillStyle or strokeStyle that can be used by drawing primitives to
* fill or stroke the path.
* <p>
* When you close the path, the canvas connects the end of the last line
* segment to the start of the first segment and terminates the current
* subpath. If you don’t close the path by calling closePath before painting,
* the path is implicitly closed for you by drawing primitives that fill or
* clip (but it is not closed for stroking).
*/
public class Canvas extends Widget implements SourcesClickEvents,
SourcesMouseEvents, SourcesMouseWheelEvents {
/**
* Use this constant as a parameter for the
* {@link #setGlobalCompositeOperation(String)} method.
*/
public final static String SOURCE_OVER = "source-over";
/**
* Use this constant as a parameter for the
* {@link #setGlobalCompositeOperation(String)} method.
*/
public final static String DESTINATION_OVER = "destination-over";
/**
* Use this constant as a parameter for the
* {@link #setLineCap(String)} method.
*/
public final static String BUTT = "butt";
/**
* Use this constant as a parameter for the
* {@link #setLineCap(String)} method.
*/
public final static String SQUARE = "square";
/**
* Use this constant either as a parameter for the
* {@link #setLineCap(String)} or the {@link #setLineJoin(String)} method.
*/
public final static String ROUND = "round";
/**
* Use this constant as a parameter for the
* {@link #setLineJoin(String)} method.
*/
public final static String BEVEL = "bevel";
/**
* Use this constant as a parameter for the
* {@link #setLineJoin(String)} method.
*/
public final static String MITER = "miter";
private CanvasImpl impl = (CanvasImpl) GWT.create(CanvasImpl.class);
private ClickListenerCollection clickListeners;
private MouseListenerCollection mouseListeners;
private MouseWheelListenerCollection mouseWheelListeners;
private int width;
private int height;
/**
* Creates a canvas widget with an initial size of 300x150 pixels.
* <p>
* It's opaque background color is white by default. The default CSS
* class selector named "gwt-Canvas" may be used to apply style rules.
*/
public Canvas() {
this(300, 150);
}
/**
* Creates a canvas widget with the specified dimension in pixels.
* <p>
* It's opaque background color is white by default. The default CSS
* class selector named "gwt-Canvas" may be used to apply style rules.
*
* @param width
* @param height
*/
public Canvas(int width, int height) {
setElement(DOM.createElement("canvas"));
impl.init(this);
setStyleName("gwt-Canvas");
setBackgroundColor("#fff");
setWidth(width);
setHeight(height);
}
/**
* This method is deprecated. Please use {@link #setWidth(int)}.
*
* @param width
*/
@Deprecated
public void setWidth(String width) {
width = width.trim();
int w = 0;
if (width.endsWith("px")) {
w = 2;
}
try {
w = Integer.parseInt(width.substring(0, width.length() - w));
} catch (NumberFormatException e) {
throw new IllegalArgumentException(e.getMessage());
}
setWidth(w);
}
/**
* Specifies the width of the canvas. You can specify this value as
* a fixed number of pixels only.
*
* @param width
*/
public void setWidth(int width) {
this.width = width;
impl.setWidth(width);
}
/**
* This method is deprecated. Please use {@link #setHeight(int)}.
*
* @param height
*/
@Deprecated
public void setHeight(String height) {
height = height.trim();
int h = 0;
if (height.endsWith("px")) {
h = 2;
}
try {
h = Integer.parseInt(height.substring(0, height.length() - h));
} catch (NumberFormatException e) {
throw new IllegalArgumentException(e.getMessage());
}
setHeight(h);
}
/**
* Specifies the height of the canvas. You can specify this value as
* a fixed number of pixels only.
*
* @param height
*/
public void setHeight(int height) {
this.height = height;
impl.setHeight(height);
}
/**
* Returns the absolute width of the canvas widget in pixels.
*
* @return
*/
public int getWidth() {
return width;
}
/**
* Returns the absolute height of the canvas widget in pixels.
*
* @return
*/
public int getHeight() {
return height;
}
/**
* Sets the opaque background color of the canvas widget. The widget's
* background color is is <b>not</b> part of the drawing state.
*
* @param color
*/
public void setBackgroundColor(String color) {
if (!color.trim().startsWith("rgba")) {
impl.setBackgroundColor(color);
}
}
/////////////////////////////////////////////////////////////////
// EVENT HANDLING
/////////////////////////////////////////////////////////////////
/**
* @see com.google.gwt.user.client.ui.Widget#onBrowserEvent(Event)
*
* @param event
*/
public void onBrowserEvent(Event event) {
switch (DOM.eventGetType(event)) {
case Event.ONCLICK:
if (clickListeners != null) {
clickListeners.fireClick(this);
}
break;
case Event.ONMOUSEDOWN:
case Event.ONMOUSEUP:
case Event.ONMOUSEMOVE:
case Event.ONMOUSEOVER:
case Event.ONMOUSEOUT:
if (mouseListeners != null) {
mouseListeners.fireMouseEvent(this, event);
}
break;
case Event.ONMOUSEWHEEL:
if (mouseWheelListeners != null) {
mouseWheelListeners.fireMouseWheelEvent(this, event);
}
break;
}
}
/**
* @see com.google.gwt.user.client.ui.SourcesClickEvents#addClickListener(ClickListener)
*
* @param listener
*/
public void addClickListener(ClickListener listener) {
if (clickListeners == null) {
clickListeners = new ClickListenerCollection();
sinkEvents(Event.ONCLICK);
}
clickListeners.add(listener);
}
/**
* @see com.google.gwt.user.client.ui.SourcesClickEvents#removeClickListener(ClickListener)
*
* @param listener
*/
public void removeClickListener(ClickListener listener) {
if (clickListeners != null) {
clickListeners.remove(listener);
}
}
/**
* @see com.google.gwt.user.client.ui.SourcesMouseEvents#addMouseListener(MouseListener)
*
* @param listener
*/
public void addMouseListener(MouseListener listener) {
if (mouseListeners == null) {
mouseListeners = new MouseListenerCollection();
sinkEvents(Event.MOUSEEVENTS);
}
mouseListeners.add(listener);
}
/**
* @see com.google.gwt.user.client.ui.SourcesMouseEvents#removeMouseListener(MouseListener)
*
* @param listener
*/
public void removeMouseListener(MouseListener listener) {
if (mouseListeners != null) {
mouseListeners.remove(listener);
}
}
/**
* @see com.google.gwt.user.client.ui.SourcesMouseWheelEvents#addMouseWheelListener(MouseWheelListener)
*
* @param listener
*/
public void addMouseWheelListener(MouseWheelListener listener) {
if (mouseWheelListeners == null) {
mouseWheelListeners = new MouseWheelListenerCollection();
sinkEvents(Event.ONMOUSEWHEEL);
}
mouseWheelListeners.add(listener);
}
/**
* @see com.google.gwt.user.client.ui.SourcesMouseWheelEvents#removeMouseWheelListener(MouseWheelListener)
*
* @param listener
*/
public void removeMouseWheelListener(MouseWheelListener listener) {
if (mouseWheelListeners != null) {
mouseWheelListeners.remove(listener);
}
}
/////////////////////////////////////////////////////////////////
// CANVAS STATE METHODS
/////////////////////////////////////////////////////////////////
/**
* Restores the current graphics state to the state most recently saved.
* <p>
* If you wish to save the settings of the current drawing environment,
* that is, the current graphics state, you can call the <code>save</code>
* method. When you call <code>save</code>, the canvas saves the current
* graphics state to the top of the graphics state stack.
* <p>
* To restore your drawing environment to a previously saved state, you can
* use this method. When you call <code>restore</code>, the canvas removes
* the most recently saved graphics state from the top of the stack and
* uses that state’s saved settings for the current graphics state.
*/
public void restore() {
impl.restore();
}
/**
* Saves a copy of the current graphics state.
* <p>
* The graphics state contains data describing the current drawing
* environment. Methods that draw to the canvas use the graphics state
* settings to determine how to render their results.
* <p>
* Each canvas maintains a stack of graphics states. If you wish to save
* the settings of the current drawing environment, that is, the current
* graphics state, you can call the <code>save</code> method. When you call
* <code>save</code>, the canvas object saves the current graphics state
* to the top of the graphics state stack.
* <p>
* To restore your drawing environment to a previously saved state, you can
* use the <code>restore</code> method. When you call <code>restore</code>,
* the canvas removes the most recently saved graphics state from the top
* of the stack and uses that state’s saved settings for the current
* graphics state.
* <p>
* Note that not all aspects of the current drawing environment are
* elements of the graphics state. For example, the current path is not
* considered part of the graphics state and is therefore not saved when
* you call this method.
*/
public void save() {
impl.save();
}
/**
* Rotates the user coordinate system of the canvas.
* <p>
* The <code>angle</code> parameter specifies the amount of coordinate
* -space rotation and is measured in radians.
* <p>
* The current transformation matrix (CTM) specifies the mapping from
* device-independent user space coordinates to a device space. By
* modifying the current transformation matrix, you can modify (scale,
* translate, rotate) the objects you draw. It’s important to note the
* order of events necessary to transform an object in a graphics context.
* Prior to drawing the object, you must first transform the coordinate
* space of the context (by calling this method), and then draw the object.
* <p>
* For example, to rotate an image, you must call this method to rotate the
* coordinate space of the context before drawing the image. When you draw
* the image, the canvas draws to the window using the rotated coordinate
* system. You specify both the magnitude and direction of the rotation by
* specifying an angle of adjustment in radians.
* <p>
* To restore the previous coordinate space, you must save the graphics
* state before modifying the CTM, and restore the graphics state after
* drawing.
*
* @param angle
*/
public void rotate(float angle) {
impl.rotate(angle);
}
/**
* See {@link #rotate(float)} for a fully detailed description.
*
* @param angle
*/
public void rotate(double angle) {
impl.rotate((float) angle);
}
/**
* Changes the scale of the canvas coordinate system.
* <p>
* The <code>sx</code> parameter contains a float value with the x-axis
* scale factor. The <code>sy</code> parameter contains a float value with
* the y-axis scale factor.
* <p>
* The current transformation matrix specifies the mapping from device-
* independent user space coordinates to a device space. By modifying the
* current transformation matrix, you can modify (scale, translate, rotate,
* skew) the objects you draw. It is important to note the order of events
* necessary to transform an object in a graphics context. Prior to drawing
* the object, you must first transform the coordinate space of the context
* (by calling this method), and then draw the object.
* <p>
* Scaling operations modify the x- and y-coordinates by a given scaling
* factor. The magnitude of the x and y factors governs whether the new
* coordinates are larger or smaller than the original. For example,
* specifying the value 2.0 for the sx parameter causes subsequently drawn
* objects to appear at twice their specified width. In addition, by making
* the x factor negative, you can flip the coordinates about the y-axis;
* similarly, you can flip coordinates about the x-axis by making the y
* factor negative.
* <p>
* To restore the previous coordinate space, you must save the graphics
* state before modifying the CTM, and restore the graphics state after
* drawing.
*
* @param x
* @param y
*/
public void scale(float x, float y) {
impl.scale(x, y);
}
/**
* See {@link #scale(float, float)} for a fully detailed description.
*
* @param x
* @param y
*/
public void scale(double x, double y) {
impl.scale((float) x, (float) y);
}
/**
* Changes the origin of the canvas coordinate system.
* <p>
* The <code>tx</code> parameter contains a float value with the x-axis
* translation value. The <code>ty</code> parameter contains a float value
* with the y-axis translation value.
* <p>
* The current transformation matrix (CTM) specifies the mapping from
* device-independent user space coordinates to a device space. By
* modifying the current transformation matrix, you can modify (scale,
* translate, rotate) the objects you draw. It’s important to note the
* order of events necessary to transform an object in a graphics context.
* Prior to drawing the object, you must first transform the coordinate
* space of the page (by calling this method), and then draw the object.
* <p>
* This method displaces the x- and y-axes (thus, the origin) of the
* coordinate system by the values you specify. When you drawinto this
* adjusted coordinate space, the x- and y-coordinates of your drawing
* are also displaced.
* <p>
* To restore the previous coordinate space, you must save the graphics
* state before modifying the CTM, and restore the graphics state after
* drawing.
*
* @param x
* @param y
*/
public void translate(float x, float y) {
impl.translate(x, y);
}
/**
* See {@link #translate(float, float)} for a fully detailed description.
*
* @param x
* @param y
*/
public void translate(double x, double y) {
impl.translate((float) x, (float) y);
}
/**
* THIS METHOD IS NOT SUPPORTED! <b>DO NOT USE IT!</b>
* <p>
* Multiply the given matrix with the current transformation matrix.
*
* @param m11
* @param m12
* @param m21
* @param m22
* @param dx
* @param dy
*/
@Deprecated
public void transform(float m11, float m12, float m21, float m22, float dx, float dy) {
impl.transform(m11, m12, m21, m22, dx, dy);
}
/**
* THIS METHOD IS NOT SUPPORTED! <b>DO NOT USE IT!</b>
* <p>
* Set the current transformation matrix.
*
* @param m11
* @param m12
* @param m21
* @param m22
* @param dx
* @param dy
*/
@Deprecated
public void setTransform(float m11, float m12, float m21, float m22, float dx, float dy) {
impl.setTransform(m11, m12, m21, m22, dx, dy);
}
/////////////////////////////////////////////////////////////////
// WORKING WITH PATHS
/////////////////////////////////////////////////////////////////
/**
* Adds an arc of a circle to the current subpath.
* <p>
* The arc is built based on the circle whose origin and radius are
* specified by the <code>x</code>, <code>y</code>, and <code>radius</code>
* parameters. The <code>startAngle</code> parameter specifies the angle of
* the starting point of the arc, measured in radians from the positive
* x-axis. The <code>endAngle</code> parameter specifies the angle of the
* endpoint of the arc, measured in radians from the positive x-axis.
* Specify 1 for the <code>clockwise</code> parameter to draw the arc in a
* clockwise direction; otherwise, specify 0.
* <p>
* If the current path already contains a subpath, the canvas appends a
* straight line segment from the current point to the starting point of
* the arc. If the current path is empty, the canvas creates a new subpath
* for the arc and does not add an initial line segment. After adding the
* arc, the current point is set to the endpoint of the arc.
*
* @param x
* @param y
* @param radius
* @param startAngle
* @param endAngle
* @param anticlockwise
*/
public void arc(float x, float y, float radius, float startAngle, float endAngle, boolean anticlockwise) {
impl.arc(x, y, radius, startAngle, endAngle, anticlockwise);
}
/**
* See {@link #arc(float, float, float, float, float, boolean)} for a fully detailed description.
*
* @param x
* @param y
* @param radius
* @param startAngle
* @param endAngle
* @param anticlockwise
*/
public void arc(double x, double y, double radius, double startAngle, double endAngle, boolean anticlockwise) {
impl.arc((float) x, (float) y, (float) radius, (float) startAngle, (float) endAngle, anticlockwise);
}
/**
* Appends a cubic Bézier curve to the current path.
* <p>
* A cubic curve segment has a start point, two control points, and an
* endpoint. The start point is the current endpoint of the open path. The
* <code>cp1x</code>, <code>cp1y</code>, <code>cp2x</code>, and
* <code>cp2y</code> parameters specify the two control points for the
* path. The <code>x</code> and <code>y</code> parameters specify the new
* endpoint for the path. After adding the segment, the current point is
* reset from the beginning of the new segment to the endpoint of that
* segment.
*
* @param cp1x
* @param cp1y
* @param cp2x
* @param cp2y
* @param x
* @param y
*/
public void cubicCurveTo(float cp1x, float cp1y, float cp2x, float cp2y, float x, float y) {
impl.cubicCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
}
/**
* See {@link #cubicCurveTo(float, float, float, float, float, float)} for a fully detailed description.
*
* @param cp1x
* @param cp1y
* @param cp2x
* @param cp2y
* @param x
* @param y
*/
public void cubicCurveTo(double cp1x, double cp1y, double cp2x, double cp2y, double x, double y) {
impl.cubicCurveTo((float) cp1x, (float) cp1y, (float) cp2x, (float) cp2y, (float) x, (float) y);
}
/**
* Appends a quadratic Bézier curve to the current path.
* <p>
* A quadratic curve segment has a start point, one control point, and an
* endpoint. The start point is the current point of the canvas. The
* <code>cpx</code> and <code>cpy</code> parameters specify the control
* point. The <code>x</code> and <code>y</code> parameters specify the new
* endpoint. After adding the segment, the current point is reset from the
* beginning of the new segment to the endpoint of that segment.
*
* @param cpx
* @param cpy
* @param x
* @param y
*/
public void quadraticCurveTo(float cpx, float cpy, float x, float y) {
impl.quadraticCurveTo(cpx, cpy, x, y);
}
/**
* See {@link #quadraticCurveTo(float, float, float, float)} for a fully detailed description.
*
* @param cpx
* @param cpy
* @param x
* @param y
*/
public void quadraticCurveTo(double cpx, double cpy, double x, double y) {
impl.quadraticCurveTo((float) cpx, (float) cpy, (float) x, (float) y);
}
/**
* Creates a new empty path in the canvas.
* <p>
* You use paths to draw both simple shapes (for example, lines, circles,
* or rectangles) and complex shapes (such as the silhouette of a mountain
* range) in a canvas. You can use a path to both draw the outline of a
* shape and fill the inside of a shape.
* <p>
* Before painting a shape, you must create the shape to be painted using
* the current path. You build a path from a set of subpaths, each of which
* is a list of one or more segments, either straight lines or curves.
* <p>
* A canvas can have only a single path in use at any time. Therefore, if
* the specified context already contains a current path when you call this
* method, the canvas replaces the previous current path with the new path.
* In this case, the canvas discards the old path and any data associated
* with it.
* <p>
* Note: The current path is not part of the graphics state. Consequently,
* saving and restoring the graphics state has no effect on the current
* path.
*/
public void beginPath() {
impl.beginPath();
}
/**
* Closes and terminates an open subpath.
* <p>
* When a subpath is open and you call this method, the canvas closes the
* subpath (draws a straight line that connects the current point to the
* starting point), and terminates the subpath (the current point is no
* longer defined).
* <p>
* If no subpath is open, calling this method does nothing.
* <p>
* Note: You can stroke along an open subpath. When a subpath is open and
* you fill or clip, however, the canvas implicitly closes the subpath for
* you.
*/
public void closePath() {
impl.closePath();
}
/**
* Begins a new subpath at the point you specify.
* <p>
* Before painting a shape in the canvas, you must create the shape to be
* painted using the current path. You build a path from a set of subpaths,
* each of which is a list of one or more segments, either straight lines
* or curves.
* <p>
* This method begins a newsubpath starting at the point you specify with
* the <code>x</code> and <code>y</code> parameters. This point is defined
* to be the “current” point, and it defines the starting point of the next
* line segment. The canvas sets the current point in one of two ways:
* <ul>
* <li>Explicitly, when you call this method to begin a new subpath at a
* given point
* <li>Implicitly, when you add a new curve or straight line segment to the
* subpath; after adding the segment, the current point is reset from the
* beginning of the new segment to the endpoint of that segment
* </ul>
*
* @param x
* @param y
*/
public void moveTo(float x, float y) {
impl.moveTo(x, y);
}
/**
* See {@link #moveTo(float, float)} for a fully detailed description.
*
* @param x
* @param y
*/
public void moveTo(double x, double y) {
impl.moveTo((float) x, (float) y);
}
/**
* Appends a straight line segment from the current point to the point you specify.
* <p>
* You can use straight line segments, cubic and quadratic Bézier curve
* segments, and rectangles to specify a path. You can append a single
* straight line segment to the current subpath using this method. After
* adding the line segment, the current point is reset from the beginning
* of the new line segment to the endpoint of that line segment, as
* specified by the <code>x</code> and <code>y</code> parameters.
*
* @param x
* @param y
*/
public void lineTo(float x, float y) {
impl.lineTo(x, y);
}
/**
* See {@link #lineTo(float, float)} for a fully detailed description.
*
* @param x
* @param y
*/
public void lineTo(double x, double y) {
impl.lineTo((float) x, (float) y);
}
/**
* Adds a new subpath, consisting of a single rectangle, to the canvas.
* <p>
* The parameters for this method all contain float values.
*
* @param x
* @param y
* @param w
* @param h
*/
public void rect(float x, float y, float w, float h) {
impl.rect(x, y, w, h);
}
/**
* See {@link #rect(float, float, float, float)} for a fully detailed description.
*
* @param x
* @param y
* @param w
* @param h
*/
public void rect(double x, double y, double w, double h) {
impl.rect((float) x, (float) y, (float) w, (float) h);
}
/////////////////////////////////////////////////////////////////
// STROKING AND FILLING
/////////////////////////////////////////////////////////////////
/**
* Clears the entire canvas.
* <p>
* When you call this method, the canvas effectively "erases" all of it's
* contents, if any.
*/
public void clear() {
impl.clear();
}
/**
* Paints the area within the current path.
* <p>
* The fill color is an attribute of the graphics state. You can set the
* current fill color by setting a value for the <code>fillStyle</code>
* property.
* <p>
* When you fill the current path, the canvas fills each subpath
* independently. Any subpath that has not been explicitly closed is closed
* implicitly by the fill routines.
*/
public void fill() {
impl.fill();
}
/**
* Paints a line along the current path.
* <p>
* To modify the behavior of this method, you can change any of the
* following graphics state properties with these methods:
* <ul>
* <li>{@link #setLineWidth(float)}
* <li>{@link #setLineJoin(String)}
* <li>{@link #setLineCap(String)}
* <li>{@link #setMiterLimit(float)}
* <li>{@link #setStrokeStyle(String)}
* <li>{@link #setGlobalAlpha(float)}
* </ul>
*/
public void stroke() {
impl.stroke();
}
/**
* Sets the contents of the specified rectangle to the opaque background color.
* <p>
* When you call this method, the canvas effectively "erases" the contents
* of the specified rectangle. The parameters of this method all contain
* float values.
* <p>
* Please note that using the <code>Canvas.DESTINATION_OVER</code>
* operation may break the {@link #clearRect(float, float, float, float)}
* method in Internet Explorer when a new shape is drawn underneath a
* previously cleared area.
* As a workaround please only use <code>Canvas.DESTINATION_OVER</code>
* in conjunction with the {@link #clear()} method OR simply stick to the
* <code>Canvas.SOURCE_OVER</code> operation if you'd like to use the
* {@link #clearRect(float, float, float, float)} method.
*
* @param x
* @param y
* @param w
* @param h
*/
public void clearRect(float x, float y, float w, float h) {
impl.clearRect(x, y, w, h);
}
/**
* See {@link #clearRect(float, float, float, float)} for a fully detailed description.
*
* @param x
* @param y
* @param w
* @param h
*/
public void clearRect(double x, double y, double w, double h) {
impl.clearRect((float) x, (float) y, (float) w, (float) h);
}
/**
* Paints the area within the specified rectangle.
* <p>
* This method uses the current fill color to paint the area of the
* specified rectangle. The parameters of this method all contain float
* values.
* <p>
* As a side effect of calling this method, the canvas clears the current
* path.
*
* @param x
* @param y
* @param w
* @param h
*/
public void fillRect(float x, float y, float w, float h) {
impl.fillRect(x, y, w, h);
}
/**
* See {@link #fillRect(float, float, float, float)} for a fully detailed description.
*
* @param x
* @param y
* @param w
* @param h
*/
public void fillRect(double x, double y, double w, double h) {
impl.fillRect((float) x, (float) y, (float) w, (float) h);
}
/**
* Paints an outline of a rectangle.
* <p>
* This method uses the current stroke color to paint the path represented
* by the specified rectangle. The parameters of this method all contain
* float values.
* <p>
* To alter the appearance of the painted outline, you can modify the
* following attributes of the graphics state:
* <ul>
* <li>{@link #setLineWidth(float)}
* <li>{@link #setLineJoin(String)}
* <li>{@link #setLineCap(String)}
* <li>{@link #setMiterLimit(float)}
* <li>{@link #setStrokeStyle(String)}
* <li>{@link #setGlobalAlpha(float)}
* </ul>
*
* @param x
* @param y
* @param w
* @param h
*/
public void strokeRect(float x, float y, float w, float h) {
impl.strokeRect(x, y, w, h);
}
/**
* See {@link #strokeRect(float, float, float, float)} for a fully detailed description.
*
* @param x
* @param y
* @param w
* @param h
*/
public void strokeRect(double x, double y, double w, double h) {
impl.strokeRect((float) x, (float) y, (float) w, (float) h);
}
/////////////////////////////////////////////////////////////////
// GRADIENT AND PATTERN STYLES
/////////////////////////////////////////////////////////////////
/**
* Returns a gradient object representing a linear gradient.
* <p>
* This method takes in two coordinates, <code>(x0, y0)</code> and
* <code>(x1, y1)</code>, and returns an object that represents a gradient
* between them.
* <p>
* Use <code>addColorStop()</code> to add colors and offsets to a gradient.
* The 0 offset in this case is the start of the gradient
* <code>(x0, y0)</code> while the 1 offset is the end of the gradient
* <code>(x1, y1)</code>.
* <p>
* The returned object can be assigned to the <code>fillStyle</code> and
* <code>strokeStyle</code> properties or used in comparisons with them.
*/
public void createLinearGradient(float x0, float y0, float x1, float y1) {
impl.createLinearGradient(x0, y0, x1, y1);
}
/**
* Returns a pattern object representing a repeating pattern.
* <p>
* This method takes an image and a repetition style and produces a pattern
* style that you can use when filling in your shapes. The repetition
* parameter accepts a string as its value:
* <ul>
* <li><code>"repeat"</code>
* <li><code>"repeat-x"</code>
* <li><code>"repeat-y"</code>
* <li><code>"no-repeat"</code>
* </ul>
* The returned object can be assigned to the <code>fillStyle</code> and
* <code>strokeStyle</code> properties or used in comparisons with them.
*/
public void createPattern(Image image, String repetition) {
impl.createPattern(image, repetition);
}
/**
* Returns a gradient object representing a radial gradient.
* <p>
* This method takes in two coordinates, <code>(x0, y0)</code> and
* <code>(x1, y0)</code> and corresponding radii. It creates two circles
* using the coordinates and the radii provided and returns an object that
* has a gradient between the edges of the circles.
* <p>
* Use <code>addColorStop()</code> to add colors and offsets to a gradient.
* The 0 offset in this case is the circumference of the first circle
* <code>(x0, y0, r0)</code> while the 1 offset is the circumference of the
* second circle <code>(x1, y1, r1)</code>.
* <p>
* The returned object can be assigned to the <code>fillStyle</code> and
* <code>strokeStyle</code> properties or used in comparisons with them.
*/
public void createRadialGradient(float x0, float y0, float r0, float x1, float y1, float r1) {
impl.createRadialGradient(x0, y0, r0, x1, y1, r1);
}
/////////////////////////////////////////////////////////////////
// DRAWING IMAGES
/////////////////////////////////////////////////////////////////
/**
* See other <code>drawImage()</code> method for a fully detailed description.
*
* @see Canvas#drawImage(Image, float, float, float, float, float, float, float, float)
*/
public void drawImage(Image image, float x, float y) {
impl.drawImage(image, x, y);
}
/**
* See other <code>drawImage()</code> method for a fully detailed description.
*
* @see Canvas#drawImage(Image, float, float, float, float, float, float, float, float)
*/
public void drawImage(Image image, float x, float y, float width, float height) {
impl.drawImage(image, x, y, width, height);
}
/**
* Draws an image in the specified rectangle.
* <p>
* This method is overloaded with three variants, used to draw the contents
* of a JavaScript Image object into the context.
* <p>
* The first of these, <code>drawImage(image, x, y)</code>, draws the image
* at the <code>x</code> and <code>y</code> coordinates within the context.
* The image is sized as it is in the object.
* <p>
* The second method, <code>drawImage(image, x, y, width, height)</code>,
* is where <code>x</code>, <code>y</code>, <code>width</code>, and
* <code>height</code> parameters contain values representing the bounding
* rectangle for the image. These values are specified in the coordinate
* system of the canvas. If the specified coordinates lie outside the
* canvas bounds, the image will be clipped.
* <p>
* The third method, <code>context.drawImage(image, sx, sy, swidth,
* sheight, dx, dy, dwidth, dheight)</code>, draws the portion of the image
* specified by the source rectangle (<code>sx, sy, swidth</code>, and
* <code>sheight</code>) onto the canvas at the specified destination
* rectangle (<code>dx, dy, dwidth, dheight</code>). The source rectangle
* is specified in the image coordinate space and the destination rectangle
* is specified in the canvas coordinate space.
*/
public void drawImage(Image image, float sx, float sy, float swidth, float sheight,
float dx, float dy, float dwidth, float dheight)
{
impl.drawImage(image, sx, sy, swidth, sheight, dx, dy, dwidth, dheight);
}
/////////////////////////////////////////////////////////////////
// SETTERS AND GETTERS
/////////////////////////////////////////////////////////////////
/**
* A float value indicating the alpha channel value, which determines the
* opacity of content drawn on the canvas. The range of values is between
* 0.0 (fully transparent) and 1.0 (no additional transparency). By
* default, this parameter’s value is 1.0.
* <p>
* The canvas uses the alpha value in the current graphics state to
* determine how to composite newly painted objects.
*
* @param globalAlpha
*/
public void setGlobalAlpha(float globalAlpha) {
impl.setGlobalAlpha(globalAlpha);
}
/**
* See {@link #setGlobalAlpha(float)} for a fully detailed description.
*
* @param globalAlpha
*/
public void setGlobalAlpha(double globalAlpha) {
impl.setGlobalAlpha((float) globalAlpha);
}
/**
* See setter method for a fully detailed description.
*
* @see Canvas#setGlobalAlpha(float)
*
* @return
*/
public float getGlobalAlpha() {
return impl.getGlobalAlpha();
}
/**
* Determines how the canvas is displayed relative to any background
* content. The string identifies the desired compositing mode. If you do
* not set this value explicitly, the canvas uses the
* <code>Canvas.SOURCE_OVER</code> compositing mode.
* <p>
* The valid compositing operators are:
* <ul>
* <li>Canvas.SOURCE_OVER
* <li>Canvas.DESTINATION_OVER
* </ul>
* <p>
* Please note that using the <code>Canvas.DESTINATION_OVER</code>
* operation may break the {@link #clearRect(float, float, float, float)}
* method in Internet Explorer when a new shape is drawn underneath a
* previously cleared area.
* As a workaround please only use <code>Canvas.DESTINATION_OVER</code>
* in conjunction with the {@link #clear()} method OR simply stick to the
* <code>Canvas.SOURCE_OVER</code> operation if you'd like to use the
* {@link #clearRect(float, float, float, float)} method.
*
* @param globalCompositeOperation
*/
public void setGlobalCompositeOperation(String globalCompositeOperation) {
impl.setGlobalCompositeOperation(globalCompositeOperation);
}
/**
* See setter method for a fully detailed description.
*
* @see Canvas#setGlobalCompositeOperation(String)
*
* @return
*/
public String getGlobalCompositeOperation() {
return impl.getGlobalCompositeOperation();
}
/**
* The color or style the canvas applies when stroking paths. When you set
* this property, the canvas sets the stroke style parameter of the
* graphics state.
* <p>
* If you intend for the stroke style to be a color, you can set it in
* several different ways depending on the color space you intend to use.
* For web-safe colors, pass a web color specification string of the form
* <code>"#RRGGBB"</code>, which represents an RGB color using hexidecimal
* numbers.
* <p>
* If you want the shape stroke to have an alpha, use the CSS
* <code>rgba(r, g, b, alpha)</code> functional-notation style. Use float
* values between 0 and 255 for the <code>r</code>, <code>g</code>, and
* <code>b</code> parameters. The <code>alpha</code> parameter contains a
* float value, between 0.0 and 1.0, indicating the alpha channel value,
* which determines the opacity of the color.
* <p>
* You can also set the stroke style to be a gradient or pattern. Use the
* <code>createLinearGradient</code>, <code>createRadialGradient</code>,
* and <code>createPattern</code> methods to define a style that you can
* apply to this property.
*
* @param strokeStyle
*/
public void setStrokeStyle(String strokeStyle) {
impl.setStrokeStyle(strokeStyle);
}
/**
* See setter method for a fully detailed description.
*
* @see Canvas#setStrokeStyle(String)
*
* @return
*/
public String getStrokeStyle() {
return impl.getStrokeStyle();
}
/**
* The color or style the canvas applies when filling paths. When you set
* this property, the canvas sets the fill style parameter of the graphics
* state.
* <p>
* If you intend for the fill style to be a color, you can set it in
* several different ways depending on the color space you intend to use.
* For web-safe colors, pass a web color specification string of the form
* <code>"#RRGGBB"</code>, which represents an RGB color using hexidecimal
* numbers.
* <p>
* If you want the shape fill to have an alpha, use the CSS
* <code>rgba(r, g, b, alpha)</code> functional-notation style. Use integer
* values between 0 and 255 for the <code>r</code>, <code>g</code>, and
* <code>b</code> parameters. The <code>alpha</code> parameter contains a
* float value, between 0.0 and 1.0, indicating the alpha channel value,
* which determines the opacity of the color.
* <p>
* You can also set the fill style to be a gradient or pattern. Use the
* <code>createLinearGradient</code>, <code>createRadialGradient</code>,
* and <code>createPattern</code> methods to define a style that you can
* apply to this property.
*
* @param fillStyle
*/
public void setFillStyle(String fillStyle) {
impl.setFillStyle(fillStyle);
}
/**
* See setter method for a fully detailed description.
*
* @see Canvas#setFillStyle(String)
*
* @return
*/
public String getFillStyle() {
return impl.getFillStyle();
}
/**
* A float value indicating the line width for drawing operations. This
* value must be greater than 0. You can affect the width of lines and
* curves that the canvas draws by modifying the line width property of the
* graphics state. The line width is the total width of the line, expressed
* in units of the user space. The line surrounds the center of the path,
* with half of the total width on either side.
*
* @param lineWidth
*/
public void setLineWidth(float lineWidth) {
impl.setLineWidth(lineWidth);
}
/**
* See {@link #setLineWidth(float)} for a fully detailed description.
*
* @param lineWidth
*/
public void setLineWidth(double lineWidth) {
impl.setLineWidth((float) lineWidth);
}
/**
* See setter method for a fully detailed description.
*
* @see Canvas#setLineWidth(float)
*
* @return
*/
public float getLineWidth() {
return impl.getLineWidth();
}
/**
* A string value that determines the end style used when drawing a line.
* Specify the string <code>Canvas.BUTT</code> for a flat edge that is
* perpendicular to the line itself, <code>Canvas.ROUND</code> for round
* endpoints, or <code>Canvas.SQUARE</code> for square endpoints. If you
* do not set this value explicitly, the canvas uses the
* <code>Canvas.BUTT</code> line cap style.
*
* @param lineCap
*/
public void setLineCap(String lineCap) {
impl.setLineCap(lineCap);
}
/**
* See setter method for a fully detailed description.
*
* @see Canvas#setLineCap(String)
*
* @return
*/
public String getLineCap() {
return impl.getLineCap();
}
/**
* A string value that determines the join style between lines. Specify
* the string <code>Canvas.ROUND</code> for round joins,
* <code>Canvas.BEVEL</code> for beveled joins, or
* <code>Canvas.MITER</code> for miter joins. If you do not set this
* value explicitly, the canvas uses the <code>Canvas.MITER</code>
* line cap style.
*
* @param lineJoin
*/
public void setLineJoin(String lineJoin) {
impl.setLineJoin(lineJoin);
}
/**
* See setter method for a fully detailed description.
*
* @see Canvas#setLineJoin(String)
*
* @return
*/
public String getLineJoin() {
return impl.getLineJoin();
}
/**
* A float value with the new miter limit. You use this property to specify
* how the canvas draws the juncture between connected line segments. If
* the line join is set to <code>Canvas.MITER</code>, the canvas uses the
* miter limit to determine whether the lines should be joined with a bevel
* instead of a miter. The canvas divides the length of the miter by the
* line width. If the result is greater than the miter limit, the style is
* converted to a bevel.
*
* @param miterLimit
*/
public void setMiterLimit(float miterLimit) {
impl.setMiterLimit(miterLimit);
}
/**
* See {@link #setMiterLimit(float)} for a fully detailed description.
*
* @param miterLimit
*/
public void setMiterLimit(double miterLimit) {
impl.setMiterLimit((float) miterLimit);
}
/**
* See setter method for a fully detailed description.
*
* @see Canvas#setMiterLimit(float)
*
* @return
*/
public float getMiterLimit() {
return impl.getMiterLimit();
}
}