Как установить размер компонента изображения в Vaadin и сохранить соотношение сторон

У меня есть компонент изображения, который я хотел бы определить размером 500 пикселей на 500 пикселей. У меня проблема в том, что мое изображение не квадратное, но я хотел бы сохранить соотношение сторон при добавлении StreamResource к моему компоненту изображения. Как я могу это сделать, кроме как изменить размер изображения вручную? Другими словами, есть ли в компоненте Image что-то, что позволяет мне автоматически изменять размер изображения, не заставляя его становиться квадратным?


java vaadin vaadin8
person Stephane Grenier    schedule 19.09.2017    source источник
comment
Переезжая сюда, всегда приятно поделиться тем, что вы пробовали. В любом случае, это правда, что в API нет поверхностного использования соотношения сторон. Этот vaadin.com/api/7.3 .5/com/google/gwt/resources/client/ хотя это подсказка, как вы можете это сделать.   -  person Naman    schedule 19.09.2017

Ответы (3)


arrow_upward
2
arrow_downward

Решение, к которому я пришел, заключалось в том, чтобы изменить размер изображения перед отправкой его в пользовательский интерфейс. Другими словами, я делаю некоторые вычисления, где, если изображение больше 500, я затем смотрю, является ли это высотой или шириной, а затем использую то, что больше, в качестве базовой линии. Затем я умножаю соотношение сторон на другое измерение и соответствующим образом преобразую изображение.

Так, например, если у меня есть изображение размером 800x600, я буду использовать 800 в качестве базового, что означает, что 500/800 означает, что изображение должно быть уменьшено до 62,5% от его размера. Затем я уменьшаю 600 на 62,5%, как 600 * 0,625 = 375. Поэтому я изменяю размер изображения, используя свою библиотеку изображений, до 500x375. И если бы изображение было 600x800, я бы изменил его размер до 375x500. Другими словами, я предварительно обрабатываю изображение и полагаюсь на что-либо в графическом интерфейсе, чтобы управлять этим за меня.

person Stephane Grenier    schedule 21.09.2017

arrow_upward
1
arrow_downward

Используя css, вы можете установить максимальную ширину и высоту для достижения желаемого вида.

Сначала отредактируйте файл mytheme.scss и добавьте запись css. Должно выглядеть примерно так

@mixin mytheme {
  @include valo;

  .maxSize500 {
    max-width: 500px;
    max-height: 500px;
  }

}

Чтобы применить это правило с помощью кода, используйте addStyleName и установите размер undefined. Бывший:

myImageComponent.setSizeUndefined(); // this line may not be needed in your project (it wasn't in mine)
myImageComponent.addStyleName("maxSize500");

Теперь соберите, перезапустите свой проект, и вы должны быть g2g.

хсс!

person petey    schedule 19.09.2017
comment
То есть изображение автоматически растягивается с учетом соотношения сторон? - person Steffen Harbich; 21.09.2017

arrow_upward
-2
arrow_downward

Я столкнулся с этой же проблемой. Мне пришлось построить свою собственную логику для изменения размера высоты и ширины изображений в зависимости от ширины браузера в пикселях. Я не верю, что в Vaadin есть что-то из коробки, способное справиться с этим.

Что-то вроде этого:

    if (browserWidth <= 1250){
        height = x;
        width = x;
    }else if (browserWidth <= 1500){
        height = x;
        width = x;
    }else if (browserWidth <= 1750){
        height = x;
        width = x;
    }else if (browserWidth <= 2000){
        height = x;
        width = x;
    }else {
        height = x;
        width = x;
    }

Надеюсь, это поможет.

person PeachesToad    schedule 19.09.2017
comment
Как это помогает решить проблему в вопросе? Решение должно быть независимым от размера окна браузера, и вопрос касается соотношения сторон. - person Steffen Harbich; 21.09.2017