Cách đặt kích thước của thành phần Hình ảnh trong Vaadin và giữ tỷ lệ khung hình

Question

Tôi có thành phần Hình ảnh mà tôi muốn xác định kích thước 500px x 500px. Vấn đề tôi có là hình ảnh của tôi không phải là hình vuông nhưng tôi muốn giữ tỷ lệ khung hình khi đẩy StreamResource vào thành phần Hình ảnh của tôi. Làm thế nào tôi có thể làm điều này khác hơn là thay đổi kích thước hình ảnh bằng tay? Nói cách khác là có cái gì đó trong thành phần hình ảnh cho phép tôi tự động tái kích thước hình ảnh mà không ép nó trở thành một hình vuông?

Answer 1

Giải pháp mà tôi đã kết thúc là thay đổi kích thước hình ảnh trước khi gửi hình ảnh đến giao diện người dùng. Nói cách khác, tôi thực hiện một số phép tính, nếu hình ảnh lớn hơn 500, thì tôi sẽ xem liệu đó có phải là chiều cao hay chiều rộng không, và sau đó sử dụng cái nào là lớn nhất làm đường cơ sở. Sau đó tôi đa tỷ lệ khung hình cho kích thước khác và chuyển đổi hình ảnh cho phù hợp.

Vì vậy, ví dụ: nếu tôi có hình ảnh 800x600 thì tôi sẽ giả sử sử dụng 800 làm đường cơ sở, nghĩa là 500/800 có nghĩa là hình ảnh phải được giảm xuống còn 62,5% kích thước của hình ảnh đó. Sau đó tôi giảm 600 xuống 62,5%, như trong 600 * 0,625 = 375. Vì vậy, tôi thay đổi kích thước hình ảnh bằng thư viện hình ảnh của tôi thành 500x375. Và nếu hình ảnh là 600x800, tôi sẽ đổi kích thước nó thành 375x500. Nói cách khác, tôi xử lý trước hình ảnh và dựa vào bất cứ thứ gì trong GUI để quản lý điều này cho tôi.

Answer 2

Tôi đã gặp phải sự cố tương tự này. Tôi đã phải xây dựng logic của riêng tôi để thay đổi kích thước chiều cao và chiều rộng của hình ảnh (s) dựa trên chiều rộng pixel của trình duyệt. Tôi không tin có cái gì trong hộp ở Vaadin có thể xử lý được.

Something như thế này:

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; 
    } 

Hy vọng rằng sẽ giúp.

Answer 3

Sử dụng css bạn có thể thực thi chiều rộng và chiều cao tối đa để đạt được giao diện mong muốn.

Trước tiên hãy chỉnh sửa tệp mytheme.scss của bạn và thêm mục nhập css. Nên trông giống như thế này

@mixin mytheme { 
    @include valo; 

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

} 

Để áp dụng quy tắc này thông qua sử dụng mã addStyleName và đặt kích thước thành không xác định. Ví dụ:

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

Bây giờ hãy xây dựng, chạy lại dự án của bạn và bạn phải là g2g.

hths!