2016-07-25 6 views
0

Für ein Kartenspiel, das ich gerade schreibe, habe ich eine benutzerdefinierte "Steuerung" erstellt, die eine Karte darstellt. Es kann umgedreht, gezogen, ausgewählt und im Laufe des Spiels skaliert, übersetzt usw. werden.Fügt einen dekorativen Bereich um einen Knoten hinzu, der sich wie ein Effekt verhält

Ein Kernmerkmal einer Karte ist, dass sie auf verschiedene Arten "hervorgehoben" werden kann. Die einfachste Form der Hervorhebung ist die leuchtende Umrandung (animiert) um die Karte herum.

Ich habe hier mit JavaFX-Effekten begonnen (DropShadow mit animiertem Spread/Radius), habe mich aber schnell davon abgewandt, weil sich die Performance als sehr schlecht herausgestellt hat.

Also ersetzte ich den Effekt mit einem animierten ImageView "hinter" der Karte (grundlegende Sprite-Animation aus Sprite-Blatt mit einer vorgerenderten Glow-Animation). Dies löst das Leistungsproblem, aber führte zahlreiche andere Probleme ein, die ich gerade angehen möchte ...

Da möchte ich nicht, dass der "Ankerpunkt" die obere linke Ecke des Scheines um die Karte ist aber die obere linke Ecke der Karte selbst versuchte ich, die ImageView innerhalb des Kartenknotens um -X/-Y zu versetzen.

(Unterschiedliche Hervorhebungen können den Knoten um verschiedene Beträge "erweitern", dies sollte den Standort des Knotens nicht beeinflussen, und wenn Sie den Standort des Knotens festlegen, sollten Sie sich nicht um möglicherweise abweichende Hervorhebungsoffsets oder Markierungen kümmern .)

Zuerst sah das gut aus, aber das betrifft immer noch die Grenzen des gesamten Knotens. Wenn ich zum Beispiel einen Mausereignis-Listener zum Knoten hinzufüge, wird er ausgelöst, wenn ich in den Bereich "Leuchten" klicke, obwohl ich ImageView auf Maus transparent eingestellt habe. Ich müsste "Proxy" -Methoden für alle Event-Methoden auf dem benutzerdefinierten Knoten erstellen und sie an den "inneren" Kartenknoten weiterleiten. Was natürlich möglich ist - aber ehrlich gesagt nicht die Lösung, die ich hoffe zu finden.

Die aktuelle Karten Knoten hat im Grunde die folgende Struktur:

public class Card extends Pane { 

     // the view that will contain the border glow (blue area in image below) 
     private ImageView effectView; 

     // stand-in for the rest of the card stuff (image etc) 
     private Rectangle placeholderForCardContent; 

     public Card() { 
      effectView = new ImageView(); 
      effectView.setMouseTransparent(true); 

      placeholderForCardContent = new Rectangle(); 

      getChildren().addAll(effectView, placeholderForCardContent); 
     } 

     @Override 
     protected void layoutChildren() { 
      // offsets are defined by the current highlight 
      effectView.setLayoutX(-50); 
      effectView.setLayoutY(-50); 
      effectView.setFitWidth(getWidth() + 100); 
      effectView.setFitHeight(getHeight() + 100); 

      placeholderForCardContent.setLayoutX(0); 
      placeholderForCardContent.setLayoutY(0); 
      placeholderForCardContent.setWidth(getWidth()); 
      placeholderForCardContent.setHeight(getHeight()); 
     } 
    } 

. Beispiel: neue Karte() setOnMouseClick() und dergleichen nur sollte das Gebiet zur Zeit gleich placeHolderForCardContent beeinflussen, aber erstreckt sich nicht auf effectView. Einfach gesagt, sollte es wie ein Effekt des Knotens verhalten ...

Das zeigt folgendes Bild war ich versuche zu bauen:

enter image description here

Wie ist so etwas wie dies richtig gemacht in JavaFX? Kann es richtig gemacht werden?

Antwort

0

setMouseTransparent(true) funktioniert einwandfrei für die effectView.

Die Grenzen des übergeordneten Elements (Pane) enthalten jedoch immer noch die effectView und generieren das Mausereignis. Und da pickOnBounds für Regions standardmäßig auf true eingestellt ist (was ich verpasst habe, da der allgemeine Standard laut java doc false ist), müssen wir ihn auf false setzen.

Dann funktioniert es.