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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在JavaFX中仅显示填充了图像的百分比相关的知识,希望对你有一定的参考价值。

我有一个来自JavaFX的Rectangle对象,里面装有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);
答案

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

例:

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

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

最好的祝福

另一答案

设置矩形的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();
    }
}

以上是关于在JavaFX中仅显示填充了图像的百分比的主要内容,如果未能解决你的问题,请参考以下文章

JAVAFX ProgressBar ,如何让进度条上显示百分比啊,而且是缓慢的递增的那种

如何在 JavaFX 的 GridPane 中删除“幽灵线”?

JavaFX自定义窗口标题栏

JavaFX 在网格窗格中显示多个图像

在 JavaFX 中使用数据库填充表视图

如何在Objective C的表视图中仅显示具有内容的表行