I want to create a RippleAnimation, so I made a circle and used ScaleTransition and put it in a Button using the method setGraphic(..);
Sample Code:
final Circle circle = new Circle(3);
circle.setFill(Color.color(0, 0, 0, 0.2));
ScaleTransition scaleTransition = new ScaleTransition(Duration.millis(500), circle);
scaleTransition.setToX(50f);
scaleTransition.setToY(50f);
scaleTransition.setAutoReverse(false);
scaleTransition.setCycleCount(1);
button.setGraphic(circle);
button.setOnMouseEntered(new EventHandler<MouseEvent>() {
#Override
public void handle(MouseEvent event) {
scaleTransition.play();
}
});
...
but it gets over the Button:
How i can achieve that the circle doesn't get over the button?
Simply use shape clipping:
Rectangle clip = new Rectangle();
clip.widthProperty().bind(button.widthProperty());
clip.heightPropety().bind(button.heightProperty());
circle.setClip(clip);
Hope this works, cause haven't worked with setGraphics() ever. Maybe try putting button + circle into a StackPane to achieve same results.
Related
I want a stack pane to simulate a FullHD display, that is 1920x1080.
For that I am using 640x360 which follows the same proportion and then I scale the image nodes inside the stackPane (which is called "screen") using:
image.getWidth()/(fullWidth/screen.getWidth())),
image.getHeight()/(fullHeight/screen.getHeight()))
This is working great only problem is I can't set the size for the "screen" therefore it keeps big black bars on the bottom and on the top of it.
As you can see in the image below the "screen" has a white border around it for making the black bars easier to notice.
screen snapshot
Here is the code that creates the stack pane and handles it:
DisplayPane constructor method
public DisplayPane(TemporalViewPane temporalViewPane, SteveMenuBar steveMenuBar, SpatialTemporalView spatialTemporalView){
setId("display-pane");
screen = new StackPane();
screen.setId("screen-pane");
controlButtonPane = new ControlButtonPane(screen, temporalViewPane, steveMenuBar, spatialTemporalView);
setCenter(screen);
setBottom(controlButtonPane);
}
ControlButtonPane constructor class method:
public ControlButtonPane(StackPane screen, TemporalViewPane temporalViewPane,SteveMenuBar steveMenuBar, SpatialTemporalView spatialTemporalView){
fullHDLabel = new Label("FullHD");
fullHDLabel.setPadding(new Insets(5,5,5,5));
screen.getChildren().add(fullHDLabel);
setId("control-button-pane");
this.steveMenuBar = steveMenuBar;
this.screen = screen;
this.screen.setAlignment(Pos.TOP_LEFT);
this.temporalViewPane = temporalViewPane;
this.spatialTemporalView = spatialTemporalView;
this.webView = new WebView();
createButtons();
setLeft(fullButtonPane);
setLeft(fullHDLabel);
setCenter(centerButtonPane);
setRight(refreshButtonPane);
createListeners();
createButtonActions();
}
CreateButtons method:
public void createButtons(){
run = new Button();
run.setDisable(true);
run.setId("run-button");
run.setTooltip(new Tooltip(Language.translate("run")));
play = new Button();
play.setDisable(true);
play.setId("play-button");
play.setTooltip(new Tooltip(Language.translate("play")));
pause = new Button();
pause.setDisable(true);
pause.setId("pause-button");
pause.setTooltip(new Tooltip(Language.translate("pause")));
stop = new Button();
stop.setDisable(true);
stop.setId("stop-button");
stop.setTooltip(new Tooltip(Language.translate("stop")));
centerButtonPane = new HBox();
centerButtonPane.setId("center-button-pane");
centerButtonPane.getChildren().add(run);
centerButtonPane.getChildren().add(play);
centerButtonPane.getChildren().add(pause);
centerButtonPane.getChildren().add(stop);
}
CreateListeners method:
private void createListeners(){
screen.widthProperty().addListener((obs, oldVal, newVal) -> {
if(newVal != oldVal){
screen.minHeightProperty().bind(screen.widthProperty().multiply(0.565));
screen.maxHeightProperty().bind(screen.widthProperty().multiply(0.565));
System.out.println("NEW WIDTH OF SCREEN IS: "+newVal);
}
});
screen.heightProperty().addListener((obs, oldVal, newVal) -> {
if(newVal != oldVal){
screen.minHeightProperty().bind(screen.widthProperty().multiply(0.565));
screen.maxHeightProperty().bind(screen.widthProperty().multiply(0.565));
System.out.println("NEW HEIGHT OF SCREEN IS: "+newVal);
}
});
And below is what I want to achieve. Currently, I have to run the application and then drag the side of the stack pane for resizing it as it should be.
how it should be snapshot
I've tried all set min/max/pref height/width and still haven't manage to achieve my goal. I don't know what else to do.
Any help would be great.
Problem was I was binding height to width when it should be the other way around since width can be resized much larger without wasting screen space.
So I changed the binding to:
private void createListeners(){
screen.widthProperty().addListener((obs, oldVal, newVal) -> {
if(newVal != oldVal){
screen.minWidthProperty().bind(screen.heightProperty().multiply(1.77778));
screen.maxWidthProperty().bind(screen.heightProperty().multiply(1.77778));
System.out.println("NEW WIDTH OF SCREEN IS: "+newVal);
}
});
screen.heightProperty().addListener((obs, oldVal, newVal) -> {
if(newVal != oldVal){
screen.minWidthProperty().bind(screen.heightProperty().multiply(1.77778));
screen.maxWidthProperty().bind(screen.heightProperty().multiply(1.77778));
System.out.println("NEW HEIGHT OF SCREEN IS: "+newVal);
}
});
}
I'm building a paint program using JavaFX. I'm trying to draw a Rectangle using GraphicsContext and have managed to get it to draw on the canvas. However, no matter where I click, it always starts from the origin. The rectangle stops being drawn when I release the mouse (this is done correctly) but isn't drawn from when I press down on the mouse. Here is my code:
public RectController(Canvas c, Scene s, BorderPane borderPane){
this.borderPane = borderPane;
this.scene = scene;
this.graphicsContext = canvas.getGraphicsContext2D();
rectangle = new Rectangle();
rectangle.setStrokeWidth(1.0);
rectangle.setManaged(true);
rectangle.setMouseTransparent(true);
//when you first press down on the mouse
pressMouse = event -> {
// borderPane.getChildren().add(rectangle); --> REMOVED
double startX = event.getX();
double startY = event.getY();
};
releaseMouse = event -> {
borderPane.getChildren().remove(rectangle);
double width = Math.abs(event.getX() - startX);
double height = Math.abs(event.getY() - startY);
graphicsContext.strokeRect(startX, startY, width, height);
borderPane.setOnMousePressed(null);
borderPane.setOnMouseDragged(null);
borderPane.setOnMouseReleased(null);
};
dragMouse = event -> {
rectangle.setWidth(event.getX());
rectangle.setHeight(event.getY());
};
}
Any help would be much appreciated.
Is this close to what you are asking?
#FXML AnchorPane apMain;
Rectangle rectangle;
#Override
public void initialize(URL url, ResourceBundle rb) {
}
#FXML void handleOnMouseClick(MouseEvent event)
{
double x = event.getSceneX();
double y = event.getSceneY();
rectangle = new Rectangle();
rectangle.setX(x);
rectangle.setY(y);
rectangle.setWidth(25);
rectangle.setHeight(25);
apMain.getChildren().add(rectangle);
}
#FXML void handleOnMouseDrag(MouseEvent event)
{
rectangle.setWidth(event.getSceneX() - x);
rectangle.setHeight(event.getSceneY() - y);
}
#FXML void handleOnMouseRelease(MouseEvent event)
{
apMain.getChildren().remove(rectangle);
}
You will need to do work to this. It's crude.
So I have a game I am working on and once you finish playing I want to be able for the user to tap on the "Play Again" button and be able to reset at the start.
To do this I create a Rectangle over the Texture and use the contains() method.
if(cloud.contains((float)Gdx.input.getX(),(float)(Gdx.graphics.getHeight()-Gdx.input.getY()))){
reset();
}
Reset method:
public void reset(){
speed=0;
paraY = Gdx.graphics.getHeight() - para[parachuteState].getHeight();
gameState=0;
backY = 0-Gdx.graphics.getHeight();
bach=0;
Gdx.input.setCursorPosition(Gdx.graphics.getWidth()/2,Gdx.graphics.getHeight()/2);
}
So what is happening is the program recognizes the button being pressed and resets but when the game is over again it automatically resets without displaying the end screen. I think that the cursor is not being moved to the center and is instead remaining on top of the button. Am I incorrectly using the setCursorPosition() method or is there another way to do this?
The button would be just right. It might looks more complex, but it's recommended way to do what you want to do.
So, to create a button you should do something like this:
Skin skin = new Skin();
skin.addRegions(uiTextureAtlas);
TextButton.TextButtonStyle buttonStyle = new TextButton.TextButtonStyle();
buttonStyle.up = skin.getDrawable("textureName");
buttonStyle.font = font;
Button button = new Button(buttonStyle);
button.addListener(new InputListener() {
#Override
public boolean touchDown(InputEvent event, float x, float y, int pointer, int button) {
reset();
return true;
}
});
button.setSize(100, 100);
button.setPosition(300, 400);
then in your Screen class you create
Stage stage = new Stage();
stage.addActor(button);
Gdx.input.setInputProcessor(stage);
Let's say I've got a StackPane which has a BackgroundImage as background and another StackPane (or another component, if neccessary) as a child. The child covers only a part of the parent StackPane.
I'd like to know how to apply a GaussianBlur just to the area the child covers, so that the BackgroundImageis blurry in this area.
The size of the child changes when the parent is resized. It would be perfect to get a solution that will resize just in time, too.
If you want to do it manually, you can use the snapshot function to create a snapshot image, blur it and apply it to the child every time the parent is resized.
However, invoking snapshot all the time will cause performance loss. I rather suggest you create 2 images, one normal and one blurred, and display a viewport of the blurred one.
Here's a more "complex" example with a circle where the viewport isn't sufficient. The clip method is used in this case:
public class Lens extends Application {
Image image = new Image( "http://upload.wikimedia.org/wikipedia/commons/thumb/4/41/Siberischer_tiger_de_edit02.jpg/800px-Siberischer_tiger_de_edit02.jpg");
CirclePane circlePane;
#Override
public void start(Stage primaryStage) {
ImageView normalImageView = new ImageView( image);
ImageView blurredImageView = new ImageView( image);
blurredImageView.setEffect(new GaussianBlur( 40));
Group root = new Group();
root.getChildren().addAll( normalImageView);
Scene scene = new Scene( root, 1024, 768);
primaryStage.setScene( scene);
primaryStage.show();
// pane with clipped area
circlePane = new CirclePane( blurredImageView);
makeDraggable( circlePane);
root.getChildren().addAll( circlePane);
}
public static void main(String[] args) {
launch(args);
}
private class CirclePane extends Pane {
ImageView blurredImageView;
ImageView clippedView = new ImageView();
public CirclePane( ImageView blurredImageView) {
this.blurredImageView = blurredImageView;
// new imageview
update();
getChildren().addAll( clippedView);
}
public void update() {
// create circle
Circle circle = new Circle( 200);
circle.relocate( getLayoutX(), getLayoutY());
// clip image by circle
blurredImageView.setClip(circle);
// non-clip area should be transparent
SnapshotParameters parameters = new SnapshotParameters();
parameters.setFill(Color.TRANSPARENT);
// new image from clipped image
WritableImage wim = null;
wim = blurredImageView.snapshot(parameters, wim);
clippedView.setImage( wim);
}
}
// make node draggable
class DragContext {
double x;
double y;
}
public void makeDraggable( Node node) {
final DragContext dragDelta = new DragContext();
node.setOnMousePressed(mouseEvent -> {
dragDelta.x = node.getBoundsInParent().getMinX() - mouseEvent.getScreenX();
dragDelta.y = node.getBoundsInParent().getMinY() - mouseEvent.getScreenY();
});
node.setOnMouseDragged(mouseEvent -> {
node.relocate( mouseEvent.getScreenX() + dragDelta.x, mouseEvent.getScreenY() + dragDelta.y);
circlePane.update();
});
}
}
Just click on the circle and drag it around.
I'm trying to create a JavaFX program that creates a circle when you click on the screen. There can be many circles at once. But I can't think of a solution to how to increase a circle's radius when I click on it again.
public class Controller implements Initializable {
#FXML
private Button reset;
#FXML
private AnchorPane anchor;
#FXML
private BorderPane border;
Circle circle = new Circle();
int radius = 20;
public void initialize (URL location, ResourceBundle resources) {
anchor.setOnMouseClicked(event -> {
border.getChildren().add(circle = new Circle());
circle.setCenterX(event.getX());
circle.setCenterY(event.getY());
circle.setRadius(radius);
});
reset.setOnAction(event -> {
border.getChildren().clear();
});
circle.setOnMouseClicked(event -> {
circle.setRadius(radius * 1.5);
});
}
}
The field you declare as circle is never added to the scene graph. So it never appears and its mouseClicked handler is never invoked.
On the other hand, the circles you do add to the scene graph have no mouse clicked handler associated with them. You need to register a handler when you create them:
anchor.setOnMouseClicked(event -> {
Circle circle = new Circle();
border.getChildren().add(circle);
circle.setCenterX(event.getX());
circle.setCenterY(event.getY());
circle.setRadius(radius);
circle.setOnMouseClicked(e -> {
circle.setRadius(circle.getRadius() * 1.5);
// prevent event from propagating to pane:
e.consume();
});
});
And now just get rid of the circle instance field and the handler you associate with it entirely.