Масштабирование изображения в GWT - PullRequest
Новая
       65

Масштабирование изображения в GWT

22 голосов
/ 14 февраля 2010

Изменение размера Изображения Виджет в GWT изменяет размер элемента изображения, но не масштабирует изображение на экране. Поэтому следующее не будет работать: 

Image image = new Image(myImageResource);
image.setHeight(newHeight);
image.setWidth(newWidth);
image.setPixelSize(newWidth, newHeight);

Это потому, что GWT реализует свой виджет Изображение , установив background-image элемента HTML <img... /> в качестве изображения, используя CSS.

Как получить реальное изображение для изменения размера?

Ответы [ 7 ]

34 голосов
/ 14 февраля 2010

Я видел эту запись в блоге , которая решает проблему с помощью GWT DataResource вместо ImageResource. Оказывается, что та же самая техника на самом деле будет работать с ImageResource, если вы используете ее следующим образом: 

Image image = new Image(myImageResource.getURL());
image.setPixelSize(getLength(), getHeight());

Чтобы сохранить соотношение сторон, рассчитайте его следующим образом: 

Image image = new Image(myImageResource.getURL());
image.setPixelSize(newWidth, myImageResource.getHeight() * newWidth / myImageResource.getWidth());

Начиная с GWT 2.4, используйте (см. здесь ): 

Image image = new Image(myImageResource.getSafeUri());
image.setPixelSize(newWidth, myImageResource.getHeight() * newWidth / myImageResource.getWidth());
11 голосов
/ 26 апреля 2012

Если мы хотим сделать то же самое в UIbinder. Из внешнего ресурса тогда:

Например, у нас есть в источнике 

@Source("images/logo.png")
ImageResource getLogo();

В шаблоне UiBinder объявите элемент <ui:with>: 

<ui:with field='res' type='com.myapp.client.Resources'/>

и ниже: 

<g:Image url='{res.getLogo.getSafeUri.asString}'  pixelSize="Width, Height" />

в старшей версии GWT: 

<g:Image url='{res.getLogo.getURL}'  pixelSize="Width, Height" />

но сейчас - устарел.

Не использовать: 

<g:Image resource='{res.getLogo}' pixelSize="Width, Height" />

потому что он не масштабирует изображения

3 голосов
/ 27 октября 2010

Мое окончательное решение состояло в том, чтобы добавить обработчик загрузки к изображению, чтобы изменить его размер в соответствии с размерами загруженного изображения (т.е. с учетом соотношения). 

image.addLoadHandler(new LoadHandler() {
        @Override
        public void onLoad(LoadEvent event) {
            Element element = event.getRelativeElement();
            if (element == image.getElement()) {
                int originalHeight = image.getOffsetHeight();
                int originalWidth = image.getOffsetWidth();
                if (originalHeight > originalWidth) {
                    image.setHeight(MAX_IMAGE_HEIGHT + "px");
                } else {
                    image.setWidth(MAX_IMAGE_WIDTH + "px");
                }
            }
        }
    });

, где MAX_IMAGE_WIDTH и MAX_IMAGE_HEIGHT - это константы, определяющие максимально допустимый размер изображения.

3 голосов
/ 17 февраля 2010

Попробуйте виджет загрузчика изображений http://code.google.com/p/gwt-image-loader Класс FitImage предоставляет то, что вы ищете.

PS: примените также патчи от проблем, так как есть некоторые незначительные ошибки, которые я исправил

1 голос
/ 27 февраля 2013

Я написал класс, который принимает объект ImageResource, и вы можете установить требуемый размер изображения в пикселях. Для достижения цели используются CSS background-Position и CSS background-size:

Исходный код класса ScalableImage: 

package de.tu_freiberg.informatik.vonwenckstern.client;
// class is written by Michael von Wenckstern, and is also used in ist diploma Thesis
// (this is only for my super visor, that he does not think I copied it from stackoverflow
// without mention the source) - this class is free to use for every body

import com.google.gwt.resources.client.ImageResource;
import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.ui.Image;

public class ScalableImage extends Image {
    private int width;
    private int height;
    private ImageResource res;

    public ScalableImage(ImageResource res, int width, int height) {
        this.setUrl(res.getSafeUri());
        this.res = res;
        this.width = width;
        this.height = height;
    }

    @Override
    public void onLoad() {
        int widthOfBigImage = this.getOffsetWidth();
        int heightOfBigImage = this.getOffsetHeight();
        double scaleX = width / res.getWidth();
        double scaleY = height / res.getHeight();
        this.setResource(res);
        DOM.setStyleAttribute(getElement(), "backgroundPosition", Integer.toString((int) (res.getLeft() * -1 * scaleX))+"px "+
                Integer.toString((int) (res.getTop() * -1 * scaleY))+"px ");
        DOM.setStyleAttribute(getElement(), "backgroundSize", Integer.toString((int) (widthOfBigImage * scaleX))+"px "+
                Integer.toString((int) (heightOfBigImage * scaleY))+"px ");
        this.setPixelSize((int) (res.getWidth()* scaleX), (int) (res.getHeight() * scaleY));
    }
}

Вы можете использовать этот класс следующим образом: 

rootPanel.add(new ScalableImage(Images.Util.getImages().img0(), 60, 60));

Если вы используете этот класс вместе с PushButton, вам нужно добавить PushButton в RootPanel, потому что в противном случае функция onLoad () не вызывается. Пример исходного кода будет выглядеть так: 

for(ImageResource imRes: latexIconsClientBundle) {
            ScalableImage im = new ScalableImage(imRes, 60, 60);
            RootPanel.get().add(im); // PushButton class does not fire onAttach event, so we need to attach the image to the RootPanel
            PushButton btn = new PushButton(im);
            btn.setPixelSize(60, 60);
            if(++col > 9) {
                row++;
                col = 0;
            }
            this.setWidget(row, col, btn);
        }
0 голосов
/ 25 мая 2013

Из всех моих тестов safeURI работает только в том случае, если в вашем пакете ОДИН образ ... Поэтому использовать его бесполезно, потому что у вас есть один cache.png от Bundle, поэтому он ничего не оптимизирует!

0 голосов
/ 25 марта 2011

Вот как я использую элемент canvas для масштабирования изображений с использованием HTML5.

http://code.google.com/p/gwt-examples/wiki/gwt_hmtl5

Брэндон Доннельсон http://gwt -examples.googlecode.com http://c.gawkat.com

...