Рисование на холсте с GWT - PullRequest
Новая
       11

Рисование на холсте с GWT

1 голос
/ 04 октября 2011

У меня есть два изображения, которые я хочу нарисовать в объекте canvas.Я получил эти изображения с сервера, и когда вызывается loadHandler, я получаю размеры изображения (они имеют одинаковую ширину и высоту) и вычисляю размеры холста.Затем я рисую каждое изображение в рассчитанной позиции x, y на холсте.Проблема в том, что на холсте появляется только одно изображение.Почему?

Вот часть кода: 

final Image siImg = new Image();
            siImg.setVisible(false);
            siImg.setUrl(Constants.URL_PREFIX + siPath);
            siImg.addLoadHandler(new LoadHandler() {

                @Override
                public void onLoad(LoadEvent event) {

                    int siWidth = siImg.getWidth();
                    int siHeight = siImg.getHeight();

                    siImg.removeFromParent();

                    if (!CategoryTableView.this.dimFromBg) {
                        CategoryTableView.this.width = siWidth;
                        CategoryTableView.this.height = siHeight * sSize;
                        //CategoryTableView.this.setPixelSize(CategoryTableView.this.width, CategoryTableView.this.height);
                        CategoryTableView.this.canvas.setPixelSize(CategoryTableView.this.width, CategoryTableView.this.height);
                        CategoryTableView.this.canvas.setCoordinateSpaceHeight(CategoryTableView.this.height);
                        CategoryTableView.this.canvas.setCoordinateSpaceWidth(CategoryTableView.this.width);
                        CategoryTableView.this.dimFromBg = true;
                    }

                    ImageElement imageElement = (ImageElement) siImg.getElement().cast();

                    int left = xOff;
                    int top = yOff + (siHeight * fi);


                    CategoryTableView.this.context.drawImage(imageElement, left, top);

                }

            });
            RootPanel.get().add(siImg);

Хорошо, я думаю, что я нахожу это ... мне нужно каждый раз сохранять состояние контекста.Это правильно?(Потому что это работает сейчас!)

1 Ответ

3 голосов
/ 05 октября 2011

Вы добавляете изображение в корневую панель в последней строке 

final Image siImg = new Image();
...
RootPanel.get().add(siImg);

вместо добавления вашего холста. Таким образом, вы увидите только изображение вместо холста. Вы должны добавить холст на корневую панель и нарисовать оба изображения на холсте. Из соображений производительности лучше рисовать в буфер, а не прямо на холст. Вот небольшой пример: 

Canvas canvas = Canvas.createIfSupported();
Canvas backBuffer = Canvas.createIfSupported();

Context2d context = canvas.getContext2d();
Context2d backBufferContext = backBuffer.getContext2d();

Image image1 = new Image("http://your.url.to/image.jpg");
image1.addLoadHandler(new LoadHandler() {       
    public void onLoad(LoadEvent event) {
        // do anything you want here
        doDraw();
    }
});

Image image2 = new Image("http://your.url.to/image2.jpg");
image2.addLoadHandler(new LoadHandler() {       
    public void onLoad(LoadEvent event) {
        // do anything you want here
        doDraw();
    }
});

RootPanel.get().add(canvas);

И метод draw будет выглядеть так: 

public void doDraw() {
    backBufferContext.setFillStyle(redrawColor);
    backBufferContext.fillRect(0, 0, width, height);
    ImageElement imageElement = ImageElement.as(image1.getElement());
    backBufferContext.drawImage(imageElement, 0, 0, 1024, 768, 0, 0, 102, 76);

    ImageElement imageElement = ImageElement.as(image2.getElement());
    backBufferContext.drawImage(imageElement, 0, 0, 1024, 768, 102, 76, 102, 76);

    context.drawImage(backBufferContext.getCanvas(), 0, 0);
}

Обратите внимание: Вы должны использовать глобальные переменные в этом примере. Измените это в соответствии со своими потребностями, передав аргументы / классы или определив переменные для всего класса. Также области рисования жестко закодированы в этом примере: это вы также должны изменить в соответствии с вашими потребностями.

...