Question

我目前正在开发一个图像编辑器应用程序。我正在尝试在我的应用程序中提供使用GIMP或Photoshop等不同层的选项。我的方法是为用户添加的每个图层添加Canvas。一切都工作得很好但不知怎的，我动态添加的画布没有出现。

在我的类构造函数中，我添加了一个通用画布，它包含一个背景图像，无法编辑。这个画布（它是全局的）确实显示并正常工作。可以编辑的所有图层都存储在List<Canvas> canvasLayers。

中

这是应该向我的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();
}

它只是创建一个画布，将其大小设置为主宽度和高度，设置其id和z-index，将画布添加到我的canvaslist，向画布添加处理程序（clickhandler，onMouseDownHandler，...）并将画布添加到主上下文中。

添加画布时，ScaledImageWidth和-Height肯定不为null或0。

有什么想法吗？

编辑：通过添加fpCanvas.layout（）解决问题;到方法的最后。我的formpanel只需要刷新＆lt;。＆lt;。 ....

Answer 1

以下是我管理画布层的方法：

公共抽象类Layer 扩展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();
}

}

并添加它：

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

Answer 2

通过添加fpCanvas.layout（）解决了这个问题;到方法的最后。我的formpanel只需要刷新＆lt;。＆lt;。 ....

在GWT中动态添加画布

2 个答案: