java - 在 GWT 中动态添加 Canvas

Question

我目前正在开发图像编辑器应用程序。 我试图在我的应用程序中提供选项来处理不同的图层，例如在 GIMP 或 Photoshop 中。我的方法是添加一个 Canvas对于用户添加的每一层。 一切都工作得很好，但不知何故，我动态添加的 Canvas 没有显示。

在我的类构造函数中，我添加了 1 个通用 Canvas ，其中包含背景图像且无法编辑。该 Canvas (全局)确实显示并正常工作。所有可以编辑的图层都存储在 List<Canvas> canvasLayers 中。 .

这是应该将 Canvas 添加到我的 List 的方法和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();
}

它所做的就是创建一个 Canvas ，将其大小设置为主宽度和高度，设置其 id 和 z-index，将 Canvas 添加到我的 Canvas 列表，将处理程序添加到 Canvas (clickhandler，onMouseDownHandler，...)并将 Canvas 添加到主上下文中。

添加 Canvas 时，ScaledImageWidth 和 -Height 绝对不为 null 或 0。

有什么想法吗？

编辑:通过添加 fpCanvas.layout() 解决了问题；到方法结束。 我的表单面板只需刷新<.< ....

Answer 1

以下是我管理 Canvas 层的方法:

公共(public)抽象类Layer 扩展复合 {

/**
 * 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();
}

}

并添加它:

    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 );
    (...)