CODEWITHSUNDEEP
javagwtcanvas
schnikk
schnikk

Reputation: 43

Adding canvas dynamically in GWT

I'm currently working on an image editor application. I'm trying to provide the option in my application to work with different layers like in GIMP or Photoshop. My approach is to add a Canvas for each layer the user added. Everything is working pretty nice but somehow my dynamically added canvases don't show up.

In my classes constructor I added 1 general canvas which holds a background-image and which can't be edited. This canvas(which is global) does show up and works properly. All layers that can be edited are stored in a List<Canvas> canvasLayers.

This is the method which should add a canvas to my List and Formpanel.

public void addCanvasLayer(String layerName, int id){
    Canvas newCanvas = Canvas.createIfSupported();

    newCanvas.setWidth(this.scaledImageWidth + "px");
    newCanvas.setHeight(this.scaledImageHeight + "px");
    newCanvas.setCoordinateSpaceWidth(this.scaledImageWidth);
    newCanvas.setCoordinateSpaceHeight(this.scaledImageHeight);

    newCanvas.getElement().setId(layerName);
    newCanvas.getElement().getStyle().setZIndex(id);

    this.fpCanvas.add(newCanvas, new AbsoluteData(0, 0));

    this.canvasLayers.add(newCanvas);
    this.addCanvasHandler(newCanvas);

    context = newCanvas.getContext2d();
}

All it does is creating a canvas, setting its size to the main width and height, setting its id and z-index, adding the canvas to my canvaslist, adding handlers to the canvas(clickhandler, onMouseDownHandler,...) and adding the canvas to the main context.

ScaledImageWidth and -Height definitely are NOT null or 0 when adding the canvas.

Any ideas?

Edit: Solved the problem by adding fpCanvas.layout(); to the end of the method. My formpanel just had to be refreshed <.< ....

Upvotes: 3

Views: 860

Answers (2)

schnikk
schnikk

Reputation: 43

Solved the problem by adding fpCanvas.layout(); to the end of the method. My formpanel just had to be refreshed <.< ....

Upvotes: 1

StephaneM
StephaneM

Reputation: 4899

Here is how I manage layers of canvas:

public abstract class Layer extends Composite {

/**
 * The canvas used in this layer
 */
private Canvas m_canvas;


public Layer()
{
    m_canvas = Canvas.createIfSupported();
    initWidget( m_canvas );
}

/**
 * Get the name of the layer (debug purpose only)
 * @return the name of the layer
 */
protected abstract String getLayerName();

/**
 * Set the z-index of the layer
 * @param zindex the new z-index
 */
public void setZ( int zindex )
{
    m_canvas.getElement().getStyle().setZIndex( zindex );
}

public int getZ()
{
    return Integer.parseInt( m_canvas.getElement().getStyle().getZIndex() );
}

@Override
public void setPixelSize( int width, int height )
{
    super.setPixelSize( width, height );
    m_canvas.setCoordinateSpaceWidth( width );
    m_canvas.setCoordinateSpaceHeight( height );
}

/**
 * Draw the layer
 */
public void draw()
{
}

/**
 * Get the context2d where this layer will be drawn
 * 
 * @return the Context2d
 */
public final Context2d getContext2d()
{
    return m_canvas.getContext2d();
}

/**
 * Clear the layer
 */
public void clear()
{
    Context2d context2d = getContext2d();
    if ( m_canvas != null && m_canvas.isAttached() )
    {
        context2d.clearRect( 0, 0, m_canvas.getOffsetWidth(), m_canvas.getOffsetHeight() );
    }
}

public LayoutPanel getEnclosingLayoutPanel()
{
    return (LayoutPanel)getParent();
}

}

and to add it:

    public void addLayer( Layer layer, int zindex )
{
    // m_main is a LayoutPanel
    int width = m_main.getOffsetWidth();
    int height = m_main.getOffsetHeight();
    m_layers.add( layer );
    layer.setZ( zindex );
    if ( m_main.getWidgetCount() > 0 )
    {
        m_main.insert( layer, 1 );
    }
    else
    {
        m_main.add( layer );
    }
    layer.setPixelSize( width, height );
    (...)

Upvotes: 1

Related Questions