JavaFX: ตำแหน่งของป้ายกำกับไม่ตรงกับตำแหน่งของปุ่มลากในตัวเลื่อน

มีแถบเลื่อนและป้ายกำกับในฉากของฉัน ฉันได้เขียนวิธีการที่ไม่ระบุตัวตนซึ่งจะตั้งค่าข้อความของป้ายกำกับตามค่าของแถบเลื่อน จากนั้นวางไว้ใต้ปุ่มลากของแถบเลื่อนโดยตรง

timeSlider.valueProperty().addListener(new ChangeListener<Number>() {

            @Override
            public void changed(ObservableValue<? extends Number> observable, Number oldValue, Number newValue) {
                final double timeSliderMin = timeSlider.getMin();
                timeLabel.setText(String.valueOf(newValue.intValue()));
                timeLabel.setLayoutX(timeSlider.getLayoutX() + (timeSlider.getValue() - timeSliderMin)
                        / (timeSlider.getMax() - timeSliderMin) * timeSlider.getWidth());
            }
});

ในบริบทนี้ timeSlider คือแถบเลื่อนและ timeLabel คือป้ายกำกับที่ฉันอ้างถึงก่อนหน้านี้

นี่คือรูปภาพการจัดแนวที่ไม่ตรงของป้ายกำกับที่เกี่ยวข้องกับแถบเลื่อน: ป้อนคำอธิบายรูปภาพที่นี่

รูปภาพด้านบนแสดงให้เห็นว่าเมื่อแถบเลื่อนอยู่ที่ค่าต่ำสุด ป้ายจะอยู่ด้านล่างโดยตรง ป้อนคำอธิบายรูปภาพที่นี่

อย่างไรก็ตาม เมื่อแถบเลื่อนอยู่ที่ค่าสูงสุด ป้ายกำกับจะไม่สอดคล้องกับแถบเลื่อนอย่างเหมาะสมด้วยซ้ำ

ฉันขอขอบคุณสำหรับข้อมูลเชิงลึกเกี่ยวกับสิ่งที่ฉันอาจทำผิดเพื่อให้สิ่งนี้เกิดขึ้น

ขอบคุณมาก.


person Orange Receptacle    schedule 27.05.2016    source แหล่งที่มา


คำตอบ (2)


คุณต้องการให้ข้อความอยู่ตรงกลางนิ้วหัวแม่มือ ดังนั้นฉันคิดว่าฉันจะลองวางเค้าโครงข้อความไว้ที่ตำแหน่งนิ้วหัวแม่มือ และมันก็ได้ผล

ฉันไม่จำเป็นต้องแนะนำวิธีแก้ปัญหาเหมือนด้านล่างนี้ อาจมีวิธีที่ดีกว่าในการทำสิ่งนี้ให้สำเร็จหรืออย่างน้อยก็วิธีที่ดีกว่าในการจัดโครงสร้างโค้ดเพื่อทำให้แถบเลื่อนที่มีป้ายกำกับเป็น "การควบคุม" ของตัวเอง แต่มันก็เป็นเพียงสิ่งที่ฉันคิดขึ้นเองซึ่งดูเหมือนว่าจะทำให้งานสำเร็จได้

โปรดทราบว่าฉันวางข้อความไว้เหนือแถบเลื่อนเพราะดูเหมือนว่าจะมีประโยชน์มากกว่าในลักษณะนั้น เนื่องจากเมื่อนั้น ตัวชี้เมาส์จะไม่บดบังข้อความเมื่อคุณลากนิ้วหัวแม่มือ

แนวคิดเรื่องแถบเลื่อนที่มีป้ายกำกับนั้นเป็นแนวคิดที่ดีทีเดียว

min mid สูงสุด

import javafx.application.Application;
import javafx.geometry.*;
import javafx.scene.Scene;
import javafx.scene.control.Slider;
import javafx.scene.layout.*;
import javafx.scene.text.Text;
import javafx.stage.Stage;

public class LabeledSlider extends Application {
    @Override
    public void start(Stage stage) {
        Text text = new Text();
        text.setTextOrigin(VPos.TOP);
        Slider slider = new Slider(7, 7_700, 4_200) {
            @Override
            protected void layoutChildren() {
                super.layoutChildren();

                Region thumb = (Region) lookup(".thumb");
                if (thumb != null) {
                    text.setLayoutX(
                            thumb.getLayoutX() 
                                    + thumb.getWidth() / 2 
                                    - text.getLayoutBounds().getWidth() / 2
                    );
                }
            }
        };
        slider.setLayoutY(20);
        text.textProperty().bind(slider.valueProperty().asString("%,.0f"));

        Pane sliderPane = new Pane(slider, text);
        slider.prefWidthProperty().bind(sliderPane.widthProperty());
        sliderPane.setPrefWidth(200);

        StackPane layout = new StackPane(sliderPane);
        layout.setPadding(new Insets(10));

        stage.setScene(new Scene(layout));
        stage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}
person jewelsea    schedule 27.05.2016
comment
สวัสดี ฉันได้ลองใช้วิธีการของคุณแล้ว และใช้งานได้ดีเมื่อลาก แต่เมื่อต้องคลิกบนแถบเลื่อน ป้ายกำกับดูเหมือนจะล้าหลังและจะเปลี่ยนไปเมื่อคลิกอีกครั้งเท่านั้น - person Orange Receptacle; 28.05.2016
comment
ฉันไม่พบความล่าช้าในการคลิกแถบเลื่อน เมื่อฉันทำเช่นนั้น ป้ายกำกับจะย้ายไปยังจุดที่ถูกต้องและอัปเดตค่าทันทีเมื่อคลิก (ทดสอบระบบ Java 8u60, OS X 10.11.4, MacBook Air 2012) - person jewelsea; 28.05.2016

สำหรับฉันดูเหมือนว่าป้ายกำกับและข้อความของคุณจัดชิดซ้าย ลองจัดกึ่งกลางแล้วดูว่าความแตกต่างคืออะไร

person mipa    schedule 27.05.2016