在 JavaFX 中仅显示填充图像的矩形百分比

Question

我有一个来自 JavaFX 的 Rectangle 对象，其中填充了 ImageView。虽然我已经设法用图像视图对象填充矩形，但我很难弄清楚如何用图像视图填充仅 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);

Answer 1

您可以使用两个单独的矩形，并使用一个作为背景，第二个用于覆盖背景的某些部分。将两个矩形组合成一个组。

例子：

// 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.

也许其他人有更好的方法。 :)

最好的问候

Answer 2

设置您的 Rectangle 的 clip。

直接设置百分比：

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();
    }
}