gwt - 可滚动图像 smartgwt

Question

我写了一个代码来放大，并使用 smartGWT 缩小图像。但问题是包含 Canvas 无法显示它的滚动条如何解决

public class ImageViewer implements EntryPoint {

static int counter = 0;
int widths[] = new int[5];
int hights[] = new int[5];
int originalW=0;
int originalH=0;

public void onModuleLoad() {
    // -------tool bar ---------------
    ToolStrip toolbar = new ToolStrip();  
    toolbar.setWidth("100%"); 
    toolbar.addFill();

    ToolStripButton max = new ToolStripButton("  +  ");
    ToolStripButton min = new ToolStripButton("  -  ");
    ToolStripButton auto = new ToolStripButton(" auto ");

    ToolStripButton print = new ToolStripButton(" print ");
    ToolStripButton save = new ToolStripButton(" save ");

    toolbar.addButton(max);
    toolbar.addButton(min);
    toolbar.addButton(auto);

    toolbar.addSeparator();

    toolbar.addButton(print);
    toolbar.addButton(save);
    // -------------------------------
    HLayout hLayout = new HLayout();
    VLayout vLayout = new VLayout();


    SectionStack sectionStack = new SectionStack();
    sectionStack.setWidth("100%");
    sectionStack.setHeight("100%");
    sectionStack.setVisibilityMode(VisibilityMode.MULTIPLE);
    sectionStack.setAnimateSections(true);
    sectionStack.setOverflow(Overflow.HIDDEN);

    SectionStackSection summarySection = new SectionStackSection();
    summarySection.setTitle("Image Viewer");
    summarySection.setExpanded(true);
    summarySection.setItems(hLayout);

    sectionStack.setSections(summarySection);

    TreeGrid treeGrid = new TreeGrid();
    treeGrid.setWidth("20%");
    treeGrid.setShowConnectors(true);
    treeGrid.setShowResizeBar(true);


    final Canvas imgCanvas = new Canvas();
    imgCanvas.setShowEdges(true);

    final Img img = new Img("http://www.google.com/intl/en_ALL/images/srpr/logo1w.png");
    img.setParentElement(imgCanvas);
    img.draw();
    img.setImageType(ImageStyle.CENTER);
    originalW = img.getWidth();
    originalH = img.getHeight();
    widths[0] = originalW;
    hights[0] = originalH;

    widths[1] = widths[0]*2;
    hights[1] = hights[0]*2;

    widths[2] = widths[1]*2;
    hights[2] = hights[1]*2;

    widths[3] = widths[2]*2;
    hights[3] = hights[2]*2;

    widths[4] = widths[3]*2;
    hights[4] = hights[3]*2;



    hLayout.setMembers(treeGrid, vLayout);
    vLayout.setMembers(toolbar,imgCanvas);

    RootPanel.get("imgPanel").add(sectionStack);


    //-------------- handelers --------------------

    max.addClickHandler(new ClickHandler() {

        @Override
        public void onClick(ClickEvent event) {
            img.setImageType(ImageStyle.STRETCH);
            if (counter <4){
                counter++;
                img.animateRect(0, 0, widths[counter] , hights[counter]);   
            }
        }
    });

    min.addClickHandler(new ClickHandler() {

        @Override
        public void onClick(ClickEvent event) {
            img.setImageType(ImageStyle.STRETCH);
            if (counter > 0){
                counter--;
                img.animateRect(0, 0, widths[counter], hights[counter]);
            }               
        }
    });

    auto.addClickHandler(new ClickHandler() {

        @Override
        public void onClick(ClickEvent event) {
            img.setImageType(ImageStyle.CENTER);
            img.animateRect(0, 0, originalW, originalH);
            imgCanvas.adjustForContent(true);

        }
    });
    //---------------------------------------------
}

}

Answer 1

imgCanvas.setOverflow(Overflow.AUTO)。如果 Img 大于 imgCanvas 的指定大小，则 imgCanvas 将根据需要显示滚动条。