Показывать прямоугольник только в процентах, заполненных изображением в JavaFX - PullRequest
Новая
       11

Показывать прямоугольник только в процентах, заполненных изображением в JavaFX

0 голосов
/ 26 января 2019

У меня есть объект Rectangle из JavaFX, заполненный ImageView.Несмотря на то, что мне удалось заполнить прямоугольник объектом просмотра изображения, у меня возникла проблема с выяснением того, как заполнить только 33% прямоугольника представлением изображения и оставить его в качестве фона прямоугольника.Возможен ли этот сценарий?

Как я бы хотел, чтобы это было показано на рисунке:

enter image description here

Мой код такойдалеко следующее: 

Rectangle rect = new Rectangle(0, 0, 430,30) );
                        rect.setFill(mE.getImagePattern());
                        rect.setStroke(Color.rgb(1,1,1,0.88));
                        rect.setStrokeWidth(0.88);

Ответы [ 2 ]

0 голосов
/ 27 января 2019

Установите клип Rectangle .

Чтобы установить процент напрямую: 

double percentage = 33;

Rectangle rect = new Rectangle(0, 0, 430, 30);
rect.setFill(mE.getImagePattern());
rect.setStroke(Color.rgb(1,1,1,0.88));
rect.setStrokeWidth(0.88);

Rectangle clip = new Rectangle();
clip.heightProperty().bind(rect.heightProperty());
clip.setWidth(430 * percentage / 100);

rect.setClip(clip);

Чтобы привязать его к свойству: 

DoubleProperty percentage = new SimpleDoubleProperty(33);

// ...

Rectangle rect = new Rectangle(0, 0, 430, 30);
rect.setFill(mE.getImagePattern());
rect.setStroke(Color.rgb(1,1,1,0.88));
rect.setStrokeWidth(0.88);

Rectangle clip = new Rectangle();
clip.heightProperty().bind(rect.heightProperty());
clip.widthProperty().bind(
    rect.heightProperty().multiply(percentage.divide(100)));

rect.setClip(clip);

Полная демонстрация: 

import javafx.application.Application;

import javafx.beans.property.DoubleProperty;
import javafx.beans.property.SimpleDoubleProperty;

import javafx.animation.Timeline;
import javafx.animation.Interpolator;
import javafx.animation.KeyFrame;
import javafx.animation.KeyValue;
import javafx.util.Duration;

import javafx.geometry.Insets;

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.image.Image;
import javafx.scene.layout.BorderPane;
import javafx.scene.paint.Color;
import javafx.scene.paint.ImagePattern;
import javafx.scene.shape.Rectangle;

public class ClippedImageExample
extends Application {
    private static interface PatternSource {
        ImagePattern getImagePattern();
    }

    private DoubleProperty percentage = new SimpleDoubleProperty(33);

    @Override
    public void start(Stage stage) {

        ImagePattern pattern = new ImagePattern(new Image("rectfill.png"));

        PatternSource mE = () -> pattern;

        Rectangle rect = new Rectangle(0, 0, 430, 30);
        rect.setFill(mE.getImagePattern());
        rect.setStroke(Color.rgb(1,1,1,0.88));
        rect.setStrokeWidth(0.88);

        Rectangle clip = new Rectangle();
        clip.heightProperty().bind(rect.heightProperty());
        clip.widthProperty().bind(
            rect.widthProperty().multiply(percentage.divide(100)));

        rect.setClip(clip);

        Button button = new Button("Start");
        button.setOnAction(e -> new Timeline(
            new KeyFrame(Duration.ZERO,
                new KeyValue(percentage, 0)),
            new KeyFrame(Duration.seconds(5),
                new KeyValue(percentage, 100, Interpolator.LINEAR))
            ).play());

        BorderPane pane = new BorderPane(rect, null, null, button, null);
        BorderPane.setMargin(rect, new Insets(12));
        BorderPane.setMargin(button, new Insets(0, 12, 12, 12));

        stage.setScene(new Scene(pane));
        stage.setTitle("Clipped Image Example");
        stage.show();
    }
}
0 голосов
/ 27 января 2019

Вы можете использовать два отдельных прямоугольника и использовать один в качестве фона, а второй, чтобы покрыть некоторую часть фона.Объедините два прямоугольника в группу.

Пример: 

// Group for the two rectangles
Group group = new Group();

double width = 430.0;
double percentage = 0.33;

// Your background image rectangle
Rectangle background = new Rectangle(0, 0, width, 30);
background.setFill(imagePattern);
background.setStroke(Color.rgb(1,1,1,0.88));
background.setStrokeWidth(0.88);

// Second rectangle to cover parts of the background
Rectangle rect = new Rectangle(percentage * width, 0, (1 - percentage) * width, 30);
rect.setFill(Color.WHITE);
rect.setStroke(Color.rgb(1,1,1,0.88));
rect.setStrokeWidth(0.88);

// Group the two rectangles together
group.getChildren().add(background);
group.getChildren().add(rect);

// ... show the group.

Может быть, у кого-то еще есть лучший подход.:)

С уважением

...