A Thumbnail is an image that when clicked, it is shown much larger on the screen with an overlay to highlight the image and its details, here you can see an interactive example: W3 School thumbnails
Thumbnails are very common in web pages, in this case, I will show you how to create these thumbnails in JavaFx desktop application, for this we will require the latest version of FxPopup, a library to create popups and more in your application
<span><dependency></span><span><groupId></span>io.github.hugoquinn2<span></groupId></span><span><artifactId></span>fxpopup<span></artifactId></span><span><version></span>1.1.0<span></version></span><span></dependency></span><span><dependency></span> <span><groupId></span>io.github.hugoquinn2<span></groupId></span> <span><artifactId></span>fxpopup<span></artifactId></span> <span><version></span>1.1.0<span></version></span> <span></dependency></span><dependency> <groupId>io.github.hugoquinn2</groupId> <artifactId>fxpopup</artifactId> <version>1.1.0</version> </dependency>
Enter fullscreen mode Exit fullscreen mode
Makin a simple Thumbnail
To create a simple thumbnail we will only require an overlay and an image, with the following example you can create a thumbail
<span>Rectangle</span> <span>overlay</span><span>;</span><span>FxPopup</span> <span>fxPopup</span><span>;</span><span>ImageView</span> <span>imageView</span><span>;</span><span>@FXML</span><span>public</span> <span>void</span> <span>initialize</span><span>()</span> <span>{</span><span>// FxPopup object</span><span>fxPopup</span> <span>=</span> <span>new</span> <span>FxPopup</span><span>();</span><span>// Image example</span><span>imageView</span> <span>=</span> <span>new</span> <span>ImageView</span><span>(</span><span>"https://th.bing.com/th/id/OIP.TnnO-9C6THhBBCzOhTe7mQHaFj?rs=1&pid=ImgDetMain"</span><span>);</span><span>// Making a Overlay</span><span>overlay</span> <span>=</span> <span>new</span> <span>Rectangle</span><span>();</span><span>overlay</span><span>.</span><span>setFill</span><span>(</span><span>Color</span><span>.</span><span>BLACK</span><span>);</span><span>overlay</span><span>.</span><span>setOpacity</span><span>(</span><span>0.3</span><span>);</span><span>// Remove image and overlay when the overlay is clicked</span><span>overlay</span><span>.</span><span>setOnMouseClicked</span><span>(</span><span>event</span> <span>-></span> <span>{</span><span>MasterUtils</span><span>.</span><span>remove</span><span>(</span><span>imageView</span><span>);</span><span>MasterUtils</span><span>.</span><span>remove</span><span>(</span><span>overlay</span><span>);</span><span>});</span><span>}</span><span>@FXML</span><span>protected</span> <span>void</span> <span>onThumbnails</span><span>()</span> <span>{</span><span>// Show overlay before image</span><span>fxPopup</span><span>.</span><span>show</span><span>(</span><span>overlay</span><span>,</span> <span>Pos</span><span>.</span><span>CENTER</span><span>);</span><span>// Bind Overlay with root, for max size</span><span>overlay</span><span>.</span><span>widthProperty</span><span>().</span><span>bind</span><span>(((</span><span>Pane</span><span>)</span> <span>MasterUtils</span><span>.</span><span>getRoot</span><span>()).</span><span>widthProperty</span><span>());</span><span>overlay</span><span>.</span><span>heightProperty</span><span>().</span><span>bind</span><span>(((</span><span>Pane</span><span>)</span> <span>MasterUtils</span><span>.</span><span>getRoot</span><span>()).</span><span>heightProperty</span><span>());</span><span>// Show image above Overlay</span><span>fxPopup</span><span>.</span><span>show</span><span>(</span><span>imageView</span><span>,</span> <span>Pos</span><span>.</span><span>CENTER</span><span>);</span><span>}</span><span>Rectangle</span> <span>overlay</span><span>;</span> <span>FxPopup</span> <span>fxPopup</span><span>;</span> <span>ImageView</span> <span>imageView</span><span>;</span> <span>@FXML</span> <span>public</span> <span>void</span> <span>initialize</span><span>()</span> <span>{</span> <span>// FxPopup object</span> <span>fxPopup</span> <span>=</span> <span>new</span> <span>FxPopup</span><span>();</span> <span>// Image example</span> <span>imageView</span> <span>=</span> <span>new</span> <span>ImageView</span><span>(</span><span>"https://th.bing.com/th/id/OIP.TnnO-9C6THhBBCzOhTe7mQHaFj?rs=1&pid=ImgDetMain"</span><span>);</span> <span>// Making a Overlay</span> <span>overlay</span> <span>=</span> <span>new</span> <span>Rectangle</span><span>();</span> <span>overlay</span><span>.</span><span>setFill</span><span>(</span><span>Color</span><span>.</span><span>BLACK</span><span>);</span> <span>overlay</span><span>.</span><span>setOpacity</span><span>(</span><span>0.3</span><span>);</span> <span>// Remove image and overlay when the overlay is clicked</span> <span>overlay</span><span>.</span><span>setOnMouseClicked</span><span>(</span><span>event</span> <span>-></span> <span>{</span> <span>MasterUtils</span><span>.</span><span>remove</span><span>(</span><span>imageView</span><span>);</span> <span>MasterUtils</span><span>.</span><span>remove</span><span>(</span><span>overlay</span><span>);</span> <span>});</span> <span>}</span> <span>@FXML</span> <span>protected</span> <span>void</span> <span>onThumbnails</span><span>()</span> <span>{</span> <span>// Show overlay before image</span> <span>fxPopup</span><span>.</span><span>show</span><span>(</span><span>overlay</span><span>,</span> <span>Pos</span><span>.</span><span>CENTER</span><span>);</span> <span>// Bind Overlay with root, for max size</span> <span>overlay</span><span>.</span><span>widthProperty</span><span>().</span><span>bind</span><span>(((</span><span>Pane</span><span>)</span> <span>MasterUtils</span><span>.</span><span>getRoot</span><span>()).</span><span>widthProperty</span><span>());</span> <span>overlay</span><span>.</span><span>heightProperty</span><span>().</span><span>bind</span><span>(((</span><span>Pane</span><span>)</span> <span>MasterUtils</span><span>.</span><span>getRoot</span><span>()).</span><span>heightProperty</span><span>());</span> <span>// Show image above Overlay</span> <span>fxPopup</span><span>.</span><span>show</span><span>(</span><span>imageView</span><span>,</span> <span>Pos</span><span>.</span><span>CENTER</span><span>);</span> <span>}</span>Rectangle overlay; FxPopup fxPopup; ImageView imageView; @FXML public void initialize() { // FxPopup object fxPopup = new FxPopup(); // Image example imageView = new ImageView("https://th.bing.com/th/id/OIP.TnnO-9C6THhBBCzOhTe7mQHaFj?rs=1&pid=ImgDetMain"); // Making a Overlay overlay = new Rectangle(); overlay.setFill(Color.BLACK); overlay.setOpacity(0.3); // Remove image and overlay when the overlay is clicked overlay.setOnMouseClicked(event -> { MasterUtils.remove(imageView); MasterUtils.remove(overlay); }); } @FXML protected void onThumbnails() { // Show overlay before image fxPopup.show(overlay, Pos.CENTER); // Bind Overlay with root, for max size overlay.widthProperty().bind(((Pane) MasterUtils.getRoot()).widthProperty()); overlay.heightProperty().bind(((Pane) MasterUtils.getRoot()).heightProperty()); // Show image above Overlay fxPopup.show(imageView, Pos.CENTER); }
Enter fullscreen mode Exit fullscreen mode
Although this code is enough to create thumbnails, we can improve this by making all images always have this thumnails
Making a Custom ImageView for Thumbnails
we’re going to create our own controller using FxPopup, so when creating this object it will always have the option to show the thumbnail of the image
<span>public</span> <span>class</span> <span>ThumbnailImage</span> <span>extends</span> <span>ImageView</span> <span>{</span><span>// Thumbnail Structure</span><span>Rectangle</span> <span>overlay</span><span>;</span><span>FxPopup</span> <span>fxPopup</span><span>;</span><span>ImageView</span> <span>thumbImage</span><span>;</span><span>// Thumbnail config</span><span>double</span> <span>scaleThumbImage</span> <span>=</span> <span>0.6</span><span>;</span><span>double</span> <span>overlayOpacity</span> <span>=</span> <span>0.3</span><span>;</span><span>Color</span> <span>overlayColor</span> <span>=</span> <span>Color</span><span>.</span><span>BLACK</span><span>;</span><span>// Thumbnail classes for CSS styles</span><span>String</span> <span>DEFAULT_CLASS_OVERLAY</span> <span>=</span> <span>"overlay"</span><span>;</span><span>String</span> <span>DEFAULT_THUMB_IMAGE</span> <span>=</span> <span>"thumb-image"</span><span>;</span><span>// Constructor null, path and Image, for customization</span><span>public</span> <span>ThumbnailImage</span><span>()</span> <span>{</span><span>this</span><span>(</span><span>null</span><span>,</span> <span>null</span><span>);}</span><span>public</span> <span>ThumbnailImage</span><span>(</span><span>String</span> <span>s</span><span>)</span> <span>{</span><span>this</span><span>(</span><span>s</span><span>,</span> <span>null</span><span>);}</span><span>public</span> <span>ThumbnailImage</span><span>(</span><span>Image</span> <span>image</span><span>)</span> <span>{</span><span>this</span><span>(</span><span>null</span><span>,</span> <span>image</span><span>);}</span><span>// General constructor class</span><span>private</span> <span>ThumbnailImage</span><span>(</span><span>String</span> <span>s</span><span>,</span> <span>Image</span> <span>image</span><span>)</span> <span>{</span><span>fxPopup</span> <span>=</span> <span>new</span> <span>FxPopup</span><span>();</span><span>thumbImage</span> <span>=</span> <span>new</span> <span>ImageView</span><span>();</span><span>overlay</span> <span>=</span> <span>new</span> <span>Rectangle</span><span>();</span><span>// Set classes</span><span>thumbImage</span><span>.</span><span>getStyleClass</span><span>().</span><span>add</span><span>(</span><span>DEFAULT_THUMB_IMAGE</span><span>);</span><span>overlay</span><span>.</span><span>getStyleClass</span><span>().</span><span>add</span><span>(</span><span>DEFAULT_CLASS_OVERLAY</span><span>);</span><span>if</span> <span>(</span><span>s</span> <span>!=</span> <span>null</span><span>)</span> <span>{</span><span>this</span><span>.</span><span>setImage</span><span>(</span><span>new</span> <span>Image</span><span>(</span><span>s</span><span>));</span><span>thumbImage</span><span>.</span><span>setImage</span><span>(</span><span>new</span> <span>Image</span><span>(</span><span>s</span><span>));</span><span>}</span><span>else</span> <span>if</span> <span>(</span><span>image</span> <span>!=</span> <span>null</span><span>)</span> <span>{</span><span>this</span><span>.</span><span>setImage</span><span>(</span><span>image</span><span>);</span><span>thumbImage</span><span>.</span><span>setImage</span><span>(</span><span>image</span><span>);</span><span>}</span><span>// Overlay config</span><span>overlay</span><span>.</span><span>setFill</span><span>(</span><span>overlayColor</span><span>);</span><span>overlay</span><span>.</span><span>setOpacity</span><span>(</span><span>overlayOpacity</span><span>);</span><span>setThumbnail</span><span>();</span><span>}</span><span>private</span> <span>void</span> <span>setThumbnail</span><span>()</span> <span>{</span><span>overlay</span><span>.</span><span>setOnMouseClicked</span><span>(</span><span>event</span> <span>-></span> <span>{</span><span>MasterUtils</span><span>.</span><span>remove</span><span>(</span><span>thumbImage</span><span>);</span><span>MasterUtils</span><span>.</span><span>remove</span><span>(</span><span>overlay</span><span>);</span><span>});</span><span>setOnMouseClicked</span><span>(</span><span>event</span> <span>-></span> <span>{</span><span>Rectangle2D</span> <span>screenBounds</span> <span>=</span> <span>Screen</span><span>.</span><span>getPrimary</span><span>().</span><span>getBounds</span><span>();</span><span>double</span> <span>screenWidth</span> <span>=</span> <span>screenBounds</span><span>.</span><span>getWidth</span><span>();</span><span>double</span> <span>thumImageWidth</span> <span>=</span> <span>screenWidth</span> <span>*</span> <span>scaleThumbImage</span><span>;</span><span>// Show overlay before image</span><span>fxPopup</span><span>.</span><span>show</span><span>(</span><span>overlay</span><span>,</span> <span>Pos</span><span>.</span><span>CENTER</span><span>);</span><span>// Bind Overlay with root, for max size</span><span>overlay</span><span>.</span><span>widthProperty</span><span>().</span><span>bind</span><span>(((</span><span>Pane</span><span>)</span> <span>MasterUtils</span><span>.</span><span>getRoot</span><span>()).</span><span>widthProperty</span><span>());</span><span>overlay</span><span>.</span><span>heightProperty</span><span>().</span><span>bind</span><span>(((</span><span>Pane</span><span>)</span> <span>MasterUtils</span><span>.</span><span>getRoot</span><span>()).</span><span>heightProperty</span><span>());</span><span>// Resize image to 80% size windows and preserve ratio</span><span>thumbImage</span><span>.</span><span>setFitWidth</span><span>(</span><span>thumImageWidth</span><span>);</span><span>thumbImage</span><span>.</span><span>setPreserveRatio</span><span>(</span><span>true</span><span>);</span><span>// Show image above Overlay</span><span>fxPopup</span><span>.</span><span>show</span><span>(</span><span>thumbImage</span><span>,</span> <span>Pos</span><span>.</span><span>CENTER</span><span>);</span><span>});</span><span>}</span><span>// Getters and Setters functions for customization</span><span>public</span> <span>double</span> <span>getScaleThumbImage</span><span>()</span> <span>{</span><span>return</span> <span>scaleThumbImage</span><span>;</span><span>}</span><span>public</span> <span>void</span> <span>setScaleThumbImage</span><span>(</span><span>double</span> <span>scaleThumbImage</span><span>)</span> <span>{</span><span>this</span><span>.</span><span>scaleThumbImage</span> <span>=</span> <span>scaleThumbImage</span><span>;</span><span>}</span><span>public</span> <span>double</span> <span>getOverlayOpacity</span><span>()</span> <span>{</span><span>return</span> <span>overlayOpacity</span><span>;</span><span>}</span><span>public</span> <span>void</span> <span>setOverlayOpacity</span><span>(</span><span>double</span> <span>overlayOpacity</span><span>)</span> <span>{</span><span>this</span><span>.</span><span>overlayOpacity</span> <span>=</span> <span>overlayOpacity</span><span>;</span><span>}</span><span>public</span> <span>Color</span> <span>getOverlayColor</span><span>()</span> <span>{</span><span>return</span> <span>overlayColor</span><span>;</span><span>}</span><span>public</span> <span>void</span> <span>setOverlayColor</span><span>(</span><span>Color</span> <span>overlayColor</span><span>)</span> <span>{</span><span>this</span><span>.</span><span>overlayColor</span> <span>=</span> <span>overlayColor</span><span>;</span><span>}</span><span>}</span><span>public</span> <span>class</span> <span>ThumbnailImage</span> <span>extends</span> <span>ImageView</span> <span>{</span> <span>// Thumbnail Structure</span> <span>Rectangle</span> <span>overlay</span><span>;</span> <span>FxPopup</span> <span>fxPopup</span><span>;</span> <span>ImageView</span> <span>thumbImage</span><span>;</span> <span>// Thumbnail config</span> <span>double</span> <span>scaleThumbImage</span> <span>=</span> <span>0.6</span><span>;</span> <span>double</span> <span>overlayOpacity</span> <span>=</span> <span>0.3</span><span>;</span> <span>Color</span> <span>overlayColor</span> <span>=</span> <span>Color</span><span>.</span><span>BLACK</span><span>;</span> <span>// Thumbnail classes for CSS styles</span> <span>String</span> <span>DEFAULT_CLASS_OVERLAY</span> <span>=</span> <span>"overlay"</span><span>;</span> <span>String</span> <span>DEFAULT_THUMB_IMAGE</span> <span>=</span> <span>"thumb-image"</span><span>;</span> <span>// Constructor null, path and Image, for customization</span> <span>public</span> <span>ThumbnailImage</span><span>()</span> <span>{</span><span>this</span><span>(</span><span>null</span><span>,</span> <span>null</span><span>);}</span> <span>public</span> <span>ThumbnailImage</span><span>(</span><span>String</span> <span>s</span><span>)</span> <span>{</span><span>this</span><span>(</span><span>s</span><span>,</span> <span>null</span><span>);}</span> <span>public</span> <span>ThumbnailImage</span><span>(</span><span>Image</span> <span>image</span><span>)</span> <span>{</span><span>this</span><span>(</span><span>null</span><span>,</span> <span>image</span><span>);}</span> <span>// General constructor class</span> <span>private</span> <span>ThumbnailImage</span><span>(</span><span>String</span> <span>s</span><span>,</span> <span>Image</span> <span>image</span><span>)</span> <span>{</span> <span>fxPopup</span> <span>=</span> <span>new</span> <span>FxPopup</span><span>();</span> <span>thumbImage</span> <span>=</span> <span>new</span> <span>ImageView</span><span>();</span> <span>overlay</span> <span>=</span> <span>new</span> <span>Rectangle</span><span>();</span> <span>// Set classes</span> <span>thumbImage</span><span>.</span><span>getStyleClass</span><span>().</span><span>add</span><span>(</span><span>DEFAULT_THUMB_IMAGE</span><span>);</span> <span>overlay</span><span>.</span><span>getStyleClass</span><span>().</span><span>add</span><span>(</span><span>DEFAULT_CLASS_OVERLAY</span><span>);</span> <span>if</span> <span>(</span><span>s</span> <span>!=</span> <span>null</span><span>)</span> <span>{</span> <span>this</span><span>.</span><span>setImage</span><span>(</span><span>new</span> <span>Image</span><span>(</span><span>s</span><span>));</span> <span>thumbImage</span><span>.</span><span>setImage</span><span>(</span><span>new</span> <span>Image</span><span>(</span><span>s</span><span>));</span> <span>}</span> <span>else</span> <span>if</span> <span>(</span><span>image</span> <span>!=</span> <span>null</span><span>)</span> <span>{</span> <span>this</span><span>.</span><span>setImage</span><span>(</span><span>image</span><span>);</span> <span>thumbImage</span><span>.</span><span>setImage</span><span>(</span><span>image</span><span>);</span> <span>}</span> <span>// Overlay config</span> <span>overlay</span><span>.</span><span>setFill</span><span>(</span><span>overlayColor</span><span>);</span> <span>overlay</span><span>.</span><span>setOpacity</span><span>(</span><span>overlayOpacity</span><span>);</span> <span>setThumbnail</span><span>();</span> <span>}</span> <span>private</span> <span>void</span> <span>setThumbnail</span><span>()</span> <span>{</span> <span>overlay</span><span>.</span><span>setOnMouseClicked</span><span>(</span><span>event</span> <span>-></span> <span>{</span> <span>MasterUtils</span><span>.</span><span>remove</span><span>(</span><span>thumbImage</span><span>);</span> <span>MasterUtils</span><span>.</span><span>remove</span><span>(</span><span>overlay</span><span>);</span> <span>});</span> <span>setOnMouseClicked</span><span>(</span><span>event</span> <span>-></span> <span>{</span> <span>Rectangle2D</span> <span>screenBounds</span> <span>=</span> <span>Screen</span><span>.</span><span>getPrimary</span><span>().</span><span>getBounds</span><span>();</span> <span>double</span> <span>screenWidth</span> <span>=</span> <span>screenBounds</span><span>.</span><span>getWidth</span><span>();</span> <span>double</span> <span>thumImageWidth</span> <span>=</span> <span>screenWidth</span> <span>*</span> <span>scaleThumbImage</span><span>;</span> <span>// Show overlay before image</span> <span>fxPopup</span><span>.</span><span>show</span><span>(</span><span>overlay</span><span>,</span> <span>Pos</span><span>.</span><span>CENTER</span><span>);</span> <span>// Bind Overlay with root, for max size</span> <span>overlay</span><span>.</span><span>widthProperty</span><span>().</span><span>bind</span><span>(((</span><span>Pane</span><span>)</span> <span>MasterUtils</span><span>.</span><span>getRoot</span><span>()).</span><span>widthProperty</span><span>());</span> <span>overlay</span><span>.</span><span>heightProperty</span><span>().</span><span>bind</span><span>(((</span><span>Pane</span><span>)</span> <span>MasterUtils</span><span>.</span><span>getRoot</span><span>()).</span><span>heightProperty</span><span>());</span> <span>// Resize image to 80% size windows and preserve ratio</span> <span>thumbImage</span><span>.</span><span>setFitWidth</span><span>(</span><span>thumImageWidth</span><span>);</span> <span>thumbImage</span><span>.</span><span>setPreserveRatio</span><span>(</span><span>true</span><span>);</span> <span>// Show image above Overlay</span> <span>fxPopup</span><span>.</span><span>show</span><span>(</span><span>thumbImage</span><span>,</span> <span>Pos</span><span>.</span><span>CENTER</span><span>);</span> <span>});</span> <span>}</span> <span>// Getters and Setters functions for customization</span> <span>public</span> <span>double</span> <span>getScaleThumbImage</span><span>()</span> <span>{</span> <span>return</span> <span>scaleThumbImage</span><span>;</span> <span>}</span> <span>public</span> <span>void</span> <span>setScaleThumbImage</span><span>(</span><span>double</span> <span>scaleThumbImage</span><span>)</span> <span>{</span> <span>this</span><span>.</span><span>scaleThumbImage</span> <span>=</span> <span>scaleThumbImage</span><span>;</span> <span>}</span> <span>public</span> <span>double</span> <span>getOverlayOpacity</span><span>()</span> <span>{</span> <span>return</span> <span>overlayOpacity</span><span>;</span> <span>}</span> <span>public</span> <span>void</span> <span>setOverlayOpacity</span><span>(</span><span>double</span> <span>overlayOpacity</span><span>)</span> <span>{</span> <span>this</span><span>.</span><span>overlayOpacity</span> <span>=</span> <span>overlayOpacity</span><span>;</span> <span>}</span> <span>public</span> <span>Color</span> <span>getOverlayColor</span><span>()</span> <span>{</span> <span>return</span> <span>overlayColor</span><span>;</span> <span>}</span> <span>public</span> <span>void</span> <span>setOverlayColor</span><span>(</span><span>Color</span> <span>overlayColor</span><span>)</span> <span>{</span> <span>this</span><span>.</span><span>overlayColor</span> <span>=</span> <span>overlayColor</span><span>;</span> <span>}</span> <span>}</span>public class ThumbnailImage extends ImageView { // Thumbnail Structure Rectangle overlay; FxPopup fxPopup; ImageView thumbImage; // Thumbnail config double scaleThumbImage = 0.6; double overlayOpacity = 0.3; Color overlayColor = Color.BLACK; // Thumbnail classes for CSS styles String DEFAULT_CLASS_OVERLAY = "overlay"; String DEFAULT_THUMB_IMAGE = "thumb-image"; // Constructor null, path and Image, for customization public ThumbnailImage() {this(null, null);} public ThumbnailImage(String s) {this(s, null);} public ThumbnailImage(Image image) {this(null, image);} // General constructor class private ThumbnailImage(String s, Image image) { fxPopup = new FxPopup(); thumbImage = new ImageView(); overlay = new Rectangle(); // Set classes thumbImage.getStyleClass().add(DEFAULT_THUMB_IMAGE); overlay.getStyleClass().add(DEFAULT_CLASS_OVERLAY); if (s != null) { this.setImage(new Image(s)); thumbImage.setImage(new Image(s)); } else if (image != null) { this.setImage(image); thumbImage.setImage(image); } // Overlay config overlay.setFill(overlayColor); overlay.setOpacity(overlayOpacity); setThumbnail(); } private void setThumbnail() { overlay.setOnMouseClicked(event -> { MasterUtils.remove(thumbImage); MasterUtils.remove(overlay); }); setOnMouseClicked(event -> { Rectangle2D screenBounds = Screen.getPrimary().getBounds(); double screenWidth = screenBounds.getWidth(); double thumImageWidth = screenWidth * scaleThumbImage; // Show overlay before image fxPopup.show(overlay, Pos.CENTER); // Bind Overlay with root, for max size overlay.widthProperty().bind(((Pane) MasterUtils.getRoot()).widthProperty()); overlay.heightProperty().bind(((Pane) MasterUtils.getRoot()).heightProperty()); // Resize image to 80% size windows and preserve ratio thumbImage.setFitWidth(thumImageWidth); thumbImage.setPreserveRatio(true); // Show image above Overlay fxPopup.show(thumbImage, Pos.CENTER); }); } // Getters and Setters functions for customization public double getScaleThumbImage() { return scaleThumbImage; } public void setScaleThumbImage(double scaleThumbImage) { this.scaleThumbImage = scaleThumbImage; } public double getOverlayOpacity() { return overlayOpacity; } public void setOverlayOpacity(double overlayOpacity) { this.overlayOpacity = overlayOpacity; } public Color getOverlayColor() { return overlayColor; } public void setOverlayColor(Color overlayColor) { this.overlayColor = overlayColor; } }
Enter fullscreen mode Exit fullscreen mode
With our new controller it is now enough to create multiple objects and add them wherever we want, as in the following example
<span>@FXML</span><span>public</span> <span>void</span> <span>initialize</span><span>()</span> <span>{</span><span>ImageView</span> <span>imageView</span> <span>=</span> <span>new</span> <span>ThumbnailImage</span><span>(</span><span>"https://shorturl.at/Ymi2B"</span><span>);</span><span>ImageView</span> <span>imageView2</span> <span>=</span> <span>new</span> <span>ThumbnailImage</span><span>(</span><span>"https://shorturl.at/1Lr99"</span><span>);</span><span>ImageView</span> <span>imageView3</span> <span>=</span> <span>new</span> <span>ThumbnailImage</span><span>(</span><span>"https://shorturl.at/cSuFt"</span><span>);</span><span>ImageView</span> <span>imageView4</span> <span>=</span> <span>new</span> <span>ThumbnailImage</span><span>(</span><span>"https://shorturl.at/SNygg"</span><span>);</span><span>imageView</span><span>.</span><span>setFitWidth</span><span>(</span><span>150</span><span>);</span><span>imageView2</span><span>.</span><span>setFitWidth</span><span>(</span><span>150</span><span>);</span><span>imageView3</span><span>.</span><span>setFitWidth</span><span>(</span><span>150</span><span>);</span><span>imageView4</span><span>.</span><span>setFitWidth</span><span>(</span><span>150</span><span>);</span><span>imageView</span><span>.</span><span>setPreserveRatio</span><span>(</span><span>true</span><span>);</span><span>imageView2</span><span>.</span><span>setPreserveRatio</span><span>(</span><span>true</span><span>);</span><span>imageView3</span><span>.</span><span>setPreserveRatio</span><span>(</span><span>true</span><span>);</span><span>imageView4</span><span>.</span><span>setPreserveRatio</span><span>(</span><span>true</span><span>);</span><span>root</span><span>.</span><span>getChildren</span><span>().</span><span>addAll</span><span>(</span><span>imageView</span><span>,</span> <span>imageView2</span><span>,</span> <span>imageView3</span><span>,</span> <span>imageView4</span><span>);</span><span>}</span><span>@FXML</span> <span>public</span> <span>void</span> <span>initialize</span><span>()</span> <span>{</span> <span>ImageView</span> <span>imageView</span> <span>=</span> <span>new</span> <span>ThumbnailImage</span><span>(</span><span>"https://shorturl.at/Ymi2B"</span><span>);</span> <span>ImageView</span> <span>imageView2</span> <span>=</span> <span>new</span> <span>ThumbnailImage</span><span>(</span><span>"https://shorturl.at/1Lr99"</span><span>);</span> <span>ImageView</span> <span>imageView3</span> <span>=</span> <span>new</span> <span>ThumbnailImage</span><span>(</span><span>"https://shorturl.at/cSuFt"</span><span>);</span> <span>ImageView</span> <span>imageView4</span> <span>=</span> <span>new</span> <span>ThumbnailImage</span><span>(</span><span>"https://shorturl.at/SNygg"</span><span>);</span> <span>imageView</span><span>.</span><span>setFitWidth</span><span>(</span><span>150</span><span>);</span> <span>imageView2</span><span>.</span><span>setFitWidth</span><span>(</span><span>150</span><span>);</span> <span>imageView3</span><span>.</span><span>setFitWidth</span><span>(</span><span>150</span><span>);</span> <span>imageView4</span><span>.</span><span>setFitWidth</span><span>(</span><span>150</span><span>);</span> <span>imageView</span><span>.</span><span>setPreserveRatio</span><span>(</span><span>true</span><span>);</span> <span>imageView2</span><span>.</span><span>setPreserveRatio</span><span>(</span><span>true</span><span>);</span> <span>imageView3</span><span>.</span><span>setPreserveRatio</span><span>(</span><span>true</span><span>);</span> <span>imageView4</span><span>.</span><span>setPreserveRatio</span><span>(</span><span>true</span><span>);</span> <span>root</span><span>.</span><span>getChildren</span><span>().</span><span>addAll</span><span>(</span><span>imageView</span><span>,</span> <span>imageView2</span><span>,</span> <span>imageView3</span><span>,</span> <span>imageView4</span><span>);</span> <span>}</span>@FXML public void initialize() { ImageView imageView = new ThumbnailImage("https://shorturl.at/Ymi2B"); ImageView imageView2 = new ThumbnailImage("https://shorturl.at/1Lr99"); ImageView imageView3 = new ThumbnailImage("https://shorturl.at/cSuFt"); ImageView imageView4 = new ThumbnailImage("https://shorturl.at/SNygg"); imageView.setFitWidth(150); imageView2.setFitWidth(150); imageView3.setFitWidth(150); imageView4.setFitWidth(150); imageView.setPreserveRatio(true); imageView2.setPreserveRatio(true); imageView3.setPreserveRatio(true); imageView4.setPreserveRatio(true); root.getChildren().addAll(imageView, imageView2, imageView3, imageView4); }
Enter fullscreen mode Exit fullscreen mode
© 版权声明
THE END
暂无评论内容