Last active
November 18, 2019 21:55
-
-
Save jewelsea/7904493 to your computer and use it in GitHub Desktop.
Creates a JavaFX ImageView which contains an image displayed in as a rounded rectangle with a drop shadow effect.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?xml version="1.0" encoding="UTF-8"?> | |
<?import javafx.scene.image.Image?> | |
<?import javafx.scene.image.ImageView?> | |
<?import javafx.scene.layout.AnchorPane?> | |
<AnchorPane id="AnchorPane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="313.0" prefWidth="477.0" style="-fx-background-color: azure;" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/2.2"> | |
<children> | |
<ImageView fx:id="imageView" layoutX="29.0" layoutY="44.0" fitHeight="224.0" fitWidth="400.0" pickOnBounds="true" preserveRatio="true"> | |
<image> | |
<Image url="http://collider.com/wp-content/uploads/lego-batman-movie-dc-super-heroes-unite-1.jpg" /> | |
</image> | |
</ImageView> | |
</children> | |
</AnchorPane> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import javafx.application.Application; | |
import javafx.fxml.*; | |
import javafx.scene.*; | |
import javafx.scene.effect.DropShadow; | |
import javafx.scene.image.*; | |
import javafx.scene.layout.Pane; | |
import javafx.scene.paint.Color; | |
import javafx.scene.shape.Rectangle; | |
import javafx.stage.Stage; | |
import java.io.IOException; | |
public class ShadowedRoundedImage extends Application { | |
class WingClipper { | |
@FXML | |
private ImageView imageView; | |
@FXML | |
public void initialize() { | |
// set a clip to apply rounded border to the original image. | |
Rectangle clip = new Rectangle( | |
imageView.getFitWidth(), imageView.getFitHeight() | |
); | |
clip.setArcWidth(20); | |
clip.setArcHeight(20); | |
imageView.setClip(clip); | |
// snapshot the rounded image. | |
SnapshotParameters parameters = new SnapshotParameters(); | |
parameters.setFill(Color.TRANSPARENT); | |
WritableImage image = imageView.snapshot(parameters, null); | |
// remove the rounding clip so that our effect can show through. | |
imageView.setClip(null); | |
// apply a shadow effect. | |
imageView.setEffect(new DropShadow(20, Color.BLACK)); | |
// store the rounded image in the imageView. | |
imageView.setImage(image); | |
} | |
} | |
public static void main(String[] args) { | |
launch(args); | |
} | |
@Override | |
public void start(Stage stage) throws IOException { | |
FXMLLoader loader = new FXMLLoader( | |
getClass().getResource( | |
"batmanlostinthemix.fxml" | |
) | |
); | |
loader.setController(new WingClipper()); | |
Pane batman = loader.load(); | |
stage.setTitle("Where's Batman?"); | |
stage.setScene(new Scene(batman)); | |
stage.show(); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Answer to StackOverflow question: Border-Radius and Shadow on ImageView