JavaFX KeyEvent und Canvas draw Problem

[BlaueBohne]

Hallo liebe Leute,

Ich habe folgendes Problem. Ich beschäftige mich seit Neuestem mit der Programmierung in JavaFX und bin auch recht zufrieden damit.

Nun wollte ich mir einen kleinen Dummi erstellen um mit den KeyEvents rumzuspielen und zeichne hierfür ein Rechteck auf einen Canvas, was sich mit den Arrow-Keys nach recht, oder links bewegt.

Soweit kein Problem, jedoch nach jedem Klick macht das Rechteck erst einen Satz und erst dann wird es "fließend" gezeichnet.
Hoffe, ich konnte das verständlich erklären. ^^

Hier der Code:


Die Main:

package springenderblock;

import javafx.application.Application;
import javafx.stage.Stage;

public class SpringenderBlock extends Application 
{
    
    @Override
    public void start(Stage primaryStage) 
    {
        primaryStage.setTitle("Springender Block");
        
        Leinwand leinwand = new Leinwand();
        
        primaryStage.setScene(leinwand);
        primaryStage.show();
    }

    public static void main(String[] args) 
    {
        launch(args);
    }
    
}

und die Scene:

package springenderblock;

import javafx.event.EventHandler;
import javafx.scene.Scene;
import javafx.scene.canvas.Canvas;
import javafx.scene.canvas.GraphicsContext;
import javafx.scene.input.KeyCode;
import javafx.scene.input.KeyEvent;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;

public class Leinwand extends Scene
{
    Canvas canvas;
    StackPane stackPane;
    int posx = 100;
    GraphicsContext gc;
    
    public Leinwand()
    {
        super(new StackPane(),1024,800);
        stackPane = new StackPane();
        makeAll();
        stackPane.getChildren().add(canvas);
        this.setRoot(stackPane);
        events();
    }
    
    public void makeAll()
    {
        canvas = new Canvas(1024,800);
        gc = canvas.getGraphicsContext2D();
        
        gc.save();
        gc.setFill(Color.BLUE);
        gc.fillRect(posx, 600, 150, 150);
        gc.restore(); 
    }

    private void events()
    {
        setOnKeyPressed(new EventHandler <KeyEvent>()
        {
            @Override
            public void handle(KeyEvent e)
            {
                
                if(e.getCode() == KeyCode.LEFT)
                {
                    gc.clearRect(0, 0, 1024, 800);
                    posx = posx -20;
                    gc.setFill(Color.BLUE);
                    gc.fillRect(posx, 600, 150, 150);
                    System.out.println("Check Left");
                }
                
                else if(e.getCode() == KeyCode.RIGHT)
                {
                    gc.clearRect(0, 0, 1024, 800);
                    posx = posx +20;
                    gc.setFill(Color.BLUE);
                    gc.fillRect(posx, 600, 150, 150);
                    System.out.println("Check Right");
                }
            }   
        });
    }
}

Kann mir das irgendwie nicht erklären. Ist mir unter Swing irgendwie nie aufgefallen...
Gibt es dafür eine Lösung?

 

[BlaueBohne]

Um es genauer zu beschreiben. Ich möchte ja das Rechteck um 20 Pixel jeweils verschieben. Lasse ich jetzt eine taste gedrückt, bewegt es sich erst 20 Pixel, dann entsteht eine Pause und dann bewegt sich das Rechteck erst "fließend".

 

[dzim]

Hast du mal geschaut, wie die Events gefeuert werden? Vielleicht liegt es nicht am Code, sondern die Key-Events werden tatsächlich mit einer "Unterbrechung" ausgelöst...
Vielleicht wäre es auch sinnvoll, den EventHander nur an das Canvas zu hängen (und den Focus darauf zu setzen). Aber ich hab bisher Canvas nie benötigt, und weiss es daher nicht genauer.

 

[BlaueBohne]

Hatte ich auch probiert, aber dann empfängt er die Events komischerweise nicht. Lässt sich irgendwie nur über die Scene steuern. (Bitte immer um Rat, fals ich falsch liege)

Hast du mal geschaut, wie die Events gefeuert werden? Vielleicht liegt es nicht am Code, sondern die Key-Events werden tatsächlich mit einer "Unterbrechung" ausgelöst...

Das dachte ich auch, aber das würde nicht erklären, wieso sie dann im Anschluss fließend ablaufen.

 

[dzim]

Melde dich evtl. mal auf dem Bugtracker https://javafx-jira.kenai.com/ an und schau dich mal um, ob da wer schon solche Issues hatte. Wenn nein, kannst du ja ein Ticket öffnen und deiner Beschreibung ein Ein-Klassen-Beispiel beilegen.

BTW: Laut Canvas (JavaFX 8) erbt Canvas von Node ( Node (JavaFX 8) ) und verfügt damit über eine key-pressed-Methode: Node (JavaFX 8)
Wichtig:

Defines a function to be called when this Node or its child Node has input focus and a key has been pressed. The function is called only if the event hasn't been already consumed during its capturing or bubbling phase.

Das Problem könnte also vielleicht auch am Event-Bubbling liegen, denn du markierst dein Event nicht als "consumed" und damit fangen es evtl. noch ander Handler:
KeyEvent (JavaFX 8)
Am besten also "e#consume()" in deinem EventHandler aufrufen (siehe http://docs.oracle.com/javase/8/javafx/api/javafx/event/Event.html ), um das (Key)Event als verarbeitet zu markieren.

 

[BlaueBohne]

BTW: Laut Canvas (JavaFX 8) erbt Canvas von Node ( Node (JavaFX 8) ) und verfügt damit über eine key-pressed-Methode: Node (JavaFX 8)

Das ist richtig, funktioniert aber irgendwie nicht. ^^

Mit e.consume() Hab ich es jetzt auch mal probiert, hat jedoch keine Wirkung erzielt. :/

 

[dzim]

Dann hab ich keine weiteren Ideen. Sorry!

 

[BlaueBohne]

Habe es hinbekommen. Man muss einfach mit ner Timeline arbeiten und diese triggern. Echt dumm gelöst in JavaFX, aber na ja.
Ansonsten find ichs nach wie vor super.

Hier der Code:

import javafx.animation.KeyFrame;
import javafx.animation.Timeline;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.scene.Scene;
import javafx.scene.canvas.Canvas;
import javafx.scene.canvas.GraphicsContext;
import javafx.scene.input.KeyCode;
import javafx.scene.input.KeyEvent;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;
import javafx.util.Duration;

public class Leinwand extends Scene
{
    Canvas canvas;
    StackPane stackPane;
    int posx = 100;
    GraphicsContext gc;
    Timeline timeline;
    int direction = 0;
    
    public Leinwand()
    {
        super(new StackPane(),1024,800);
        stackPane = new StackPane();
        makeAll();
        stackPane.getChildren().add(canvas);
        this.setRoot(stackPane);
        events();
        initTimeline();
        timeline.play();
    }
    
    public void makeAll()
    {
        canvas = new Canvas(1024,800);
        gc = canvas.getGraphicsContext2D();
        
        gc.save();
        gc.setFill(Color.BLUE);
        gc.fillRect(posx, 600, 150, 150);
        gc.restore(); 
    }
    

    private void events()
    {

        setOnKeyPressed(new EventHandler <KeyEvent>()
        {
            
            @Override
            public void handle(KeyEvent e)
            {
                if(e.getCode() == KeyCode.LEFT)
                {
                    direction = -20;
                }
                
                else if(e.getCode() == KeyCode.RIGHT)
                {
                    direction = +20;
                }
            }   
        });
        
        setOnKeyReleased(new EventHandler <KeyEvent>()
        {
            
            @Override
            public void handle(KeyEvent e)
            {
                direction = 0;
            }   
        });
        
        
    }
    
    public void initTimeline()
    {
        timeline = new Timeline();
        timeline.setCycleCount(Timeline.INDEFINITE);
        KeyFrame kf = new KeyFrame(Duration.millis(40), new EventHandler<ActionEvent>()
        {

            @Override
            public void handle(ActionEvent e) 
            {
                if(direction != 0)
                {
                    if(direction > 0)
                    {
                        gc.clearRect(0, 0, 1024, 800);
                        posx = posx +20;
                        gc.setFill(Color.BLUE);
                        gc.fillRect(posx, 600, 150, 150);
                        System.out.println("Check Left");
                    }
                    
                    if(direction < 0)
                    {
                        gc.clearRect(0, 0, 1024, 800);
                        posx = posx -20;
                        gc.setFill(Color.BLUE);
                        gc.fillRect(posx, 600, 150, 150);
                        System.out.println("Check Left");
                    }
                }
            }
                        
        });
        timeline.getKeyFrames().add(kf);
    }
}

hoffe, das hilft einigen verirrten Seelen da draußen.

Ps.: Habs jetzt nicht "optimal" oder "schön" gelöst, aber das Prinzip sollte somit klar sein.

 

[dzim]

I see, ok. Ich versteh' nur gerade noch nicht den Zusammenhang zwischen dem EventHander am KeyFrame...

Ah. Moment. Du updatest das Canvas eigentlich die ganze Zeit, oder?
Hm. Ob das im Sinne des Erfinders ist, kann ich mir gerade aber auch nicht vorstellen...

Auf StackOverflow gab es zu JavaFX mal folgende Frage:
javafx 2 - How do I make a circle move on events? - Stack Overflow

Und diese Frage scheint noch eher in deine Richtung zu gehen:
How to get smooth animation with KeyPress event in javaFX? - Stack Overflow

Ich denke, da sind die "sauberen" Lösungen, als alle 40ms eine Animation zu starten!
Aber das ist nur meine Meinung...

 

[BlaueBohne]

Das ist natürlich auch ne saubere Lösung. Bin aber froh, dass es jetzt klappt. ^^