Frost Glass Effect с динамическим Фон JavaFX

Question

Я Разработка приложения JavaFX:

Здесь, я хочу на левой панели, чтобы иметь эффект размытия фона, то есть, когда-либо пользователь прокручивает карту, содержимое за левой панелью Изменения, и я хочу использовать это содержимое (размытое), как фон левой панели. & Я почти сделал это.

Всякий раз, когда я просматриваю карту, она действительно работает, а контент позади обновляется, но в системном мониторе я могу видеть использование ЦП, температуру и общее использование мощности резко возрастает.

Для достижения Frost Glass Effect, я Добавлен прослушиватель событий (для обнаружения перемещения мыши) в webEngine (Содержит карту):

Document doc = webEngine.getDocument(); 
((EventTarget) doc).addEventListener("mousemove", listener, false); 

Слушатель Выполняет метод, который:

1. Извлекает фактическое содержимое под левой панелью (Карта).

2. Blur's the Image.

3. обновление экрана

Для обновления экрана, метод удаляет левую панель (VBox) и Предыдущее изображение (который был на заднем плане). &, затем снова сначала добавьте смазанную область изображения, а затем в левую панель к корневой панели.

Итак, я думаю, что причина, по которой у меня возникают проблемы с производительностью, заключается в том, что она должна очень быстро удалять и добавлять панорамы (левая панель и фоновое изображение) в корневую панель, в то время как пользователь перетаскивает карту ,

Проблема: Очень высокое Использование CPU

Итак, есть ли какой-либо другой подход в JavaFX, в котором он не требует, такую ​​высокой загрузки ЦП?

Что-то вроде, что не требует удаления и добавления панелей все время.

Answer 1

Создайте две панели в HBox, сделайте вид соответствующей части карты в каждой панели. Установите эффект размытия на левую панель. Никаких слушателей, снимков или динамического добавления или удаления панелей не требуется.

Попробуйте несколько различных эффектов размытия (есть BoxBlur и GuassianBlur) с различными настройками, если необходимо, для настройки характеристик производительности.

настройки эффекта размытия непосредственно на левой панели, все Пятна (кнопка текста), и, как я уже установлен эффект прозрачности, эта настройка только Пятна левой панели,

Используйте stackpane для левую панель с левой частью карты в нижней части стека (с примененным к ней эффектом размытия) и прозрачным наложением вверху стека (без эффекта, примененного к нему).

Есть ли способ, я могу размыть часть панели, поэтому часть лежала под левой панели можно выбрать & размыты?

Да, вы используете технику, аналогичную:

• How to implement a transparent Pane with non-transparent children?
• Frosted Glass Effect in JavaFX?

Sample

Вот краткий пример, так же, как доказательство концепции, очевидно, для вашего решения вы будете нужно что-то немного другое.

import javafx.application.Application; 
import javafx.geometry.Pos; 
import javafx.scene.Node; 
import javafx.scene.Scene; 
import javafx.scene.control.Label; 
import javafx.scene.control.ScrollPane; 
import javafx.scene.effect.GaussianBlur; 
import javafx.scene.image.Image; 
import javafx.scene.image.ImageView; 
import javafx.scene.layout.StackPane; 
import javafx.scene.shape.Rectangle; 
import javafx.scene.text.TextAlignment; 
import javafx.stage.Stage; 

/** 
* Constructs a scene with a pannable Map background. 
*/ 
public class FrostedPannableView extends Application { 
    private Image backgroundImage; 

    private static final double W = 800; 
    private static final double H = 600; 

    @Override 
    public void init() { 
     backgroundImage = new Image("http://www.narniaweb.com/wp-content/uploads/2009/08/NarniaMap.jpg"); 
    } 

    @Override 
    public void start(Stage stage) { 
     stage.setTitle("Drag the mouse to pan the map"); 
     stage.setResizable(false); 

     // make a transparent pale blue overlay with non transparent blue writing on it. 
     final Label label = new Label("Map\nof\nNarnia"); 
     label.setTextAlignment(TextAlignment.CENTER); 
     label.setStyle("-fx-text-fill: midnightblue; -fx-font: bold italic 40 'serif'; -fx-padding: 0 0 20 0;"); 

     StackPane glass = new StackPane(); 
     StackPane.setAlignment(label, Pos.BOTTOM_CENTER); 
     glass.getChildren().addAll(label); 
     glass.setStyle("-fx-background-color: rgba(0, 100, 100, 0.5);"); 
     glass.setMaxWidth(W * 1/4); 
     glass.setMaxHeight(H); 
     StackPane.setAlignment(glass, Pos.CENTER_LEFT); 

     // construct a partitioned node with left side blurred. 
     ImageView leftMap = new ImageView(backgroundImage); 
     ImageView rightMap = new ImageView(backgroundImage); 

     // wrap the partitioned node in a pannable scroll pane. 
     ScrollPane leftScroll = createScrollPane(leftMap); 
     Rectangle leftClip = new Rectangle(W * 1/4, H); 
     leftScroll.setClip(leftClip); 
     leftScroll.setEffect(new GaussianBlur()); 

     ScrollPane rightScroll = createScrollPane(rightMap); 
     Rectangle rightClip = new Rectangle(W * 1/4, 0, W * 3/4, H); 
     rightScroll.setClip(rightClip); 

     StackPane composite = new StackPane(); 
     composite.getChildren().setAll(
       leftScroll, 
       rightScroll 
     ); 

     StackPane layout = new StackPane(
       composite, 
       glass 
     ); 

     // show the scene. 
     Scene scene = new Scene(layout); 
     stage.setScene(scene); 
     stage.show(); 

     // bind the scroll values together and center the scroll contents. 
     leftScroll.hvalueProperty().bind(rightScroll.hvalueProperty()); 
     leftScroll.vvalueProperty().bind(rightScroll.vvalueProperty()); 
     rightScroll.setHvalue(rightScroll.getHmin() + (rightScroll.getHmax() - rightScroll.getHmin())/2); 
     rightScroll.setVvalue(rightScroll.getVmin() + (rightScroll.getVmax() - rightScroll.getVmin())/2); 
    } 

    /** 
    * @return a ScrollPane which scrolls the node. 
    */ 
    private ScrollPane createScrollPane(Node node) { 
     ScrollPane scroll = new ScrollPane(); 
     scroll.setHbarPolicy(ScrollPane.ScrollBarPolicy.NEVER); 
     scroll.setVbarPolicy(ScrollPane.ScrollBarPolicy.NEVER); 
     scroll.setPannable(true); 
     scroll.setMinSize(ScrollPane.USE_PREF_SIZE, ScrollPane.USE_PREF_SIZE); 
     scroll.setPrefSize(W, H); 
     scroll.setMaxSize(ScrollPane.USE_PREF_SIZE, ScrollPane.USE_PREF_SIZE); 
     scroll.setContent(node); 
     return scroll; 
    } 

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