1

3ポジションのスイッチのような部品を設計したいと思います。1つのニュートラル位置、およびユーザーがコンポーネントの上半分をクリックしたときの上部スイッチ位置と、ユーザーがコンポーネントの下半分をクリックしたときの下部スイッチ位置。マウスを離すと、スイッチはニュートラル位置に戻ります。これらの位置のスイッチ画像が3つあります。Button次に、マウスのクリック座標が上半分か下半分かを確認し、それに応じて画像を設定することを考えていました。可能であれば、画像にcssを使用して（可能かどうかはわかりませんが）、より良い提案を探しています。または、より適切な場合は、別のコンポーネントを使用して他の提案を探しています。ありがとうございました。

4

2 に答える 2

1

これが私がやったことです、それは動作します...

final Button rstButton = new Button();
    final Image rstNeutral = new Image(MyClass.class.getResourceAsStream("images/switch_neutral.png"));
    final Image rstUp = new Image(MyClass.class.getResourceAsStream("images/switch_on.png"));
    final Image rstDown = new Image(MyClass.class.getResourceAsStream("images/switch_off.png"));
    final ImageView rstImage = new ImageView();
    rstImage.setImage(rstNeutral);
    rstButton.setGraphic(rstImage);

    rstButton.setOnMousePressed(new EventHandler<MouseEvent>() {

        @Override
        public void handle(MouseEvent me) {
            double mouseY = me.getY();
            double buttonY = rstButton.getLayoutY();
            double buttonHeight = rstButton.getHeight();

            if(buttonY + mouseY > buttonY + (buttonHeight / 2)) {
                rstImage.setImage(rstDown);
            } else {
                rstImage.setImage(rstUp);
            }
        }
    });

    rstButton.setOnMouseReleased(new EventHandler<MouseEvent>() {

        @Override
        public void handle(MouseEvent arg0) {
            rstImage.setImage(rstNeutral);
        }
    });
于 2012-07-27T07:52:12.367 に答える
0

1 つではなく 3 つのコンポーネントを使用する必要があると思います。

たとえば、ToogleButton の 3 つのインスタンスを使用できます。このコンポーネントは、見た目はボタンに似ていますが、トゥーグル状態 (クリック/非クリック) があります。私は javaFX で使用したことはありませんが、Oracle サイトで十分なヘルプが見つかると思います (例: http://docs.oracle.com/javafx/2/ui_controls/toggle-button.htm )

編集 ：

コメントの後、メカニカル スイッチの画像 (http://docs.oracle.com/javafx/2/api/javafx/scene/image/Image.html) が解決策になると思います。スイッチを横から表示している場合は、スイッチの状態に応じて画像の回転を変更できます。

ユーザーがクリックした場所を知るには、ボタンの位置を特定することが有効です。

別の解決策として、画像の上に 3 つの透明な領域を配置し、画像の代わりにこれらの領域でクリック イベントをインターセプトすることもできます。そのようなソリューションを使用したことがないので、もっとお手伝いできます。

私が見る最後の解決策は、スイッチ画像の横にある 2 つの別の画像コンポーネントを使用して、スイッチを上下に引っ張るために 2 つの矢印を表示することです。

于 2012-07-27T06:30:44.000 に答える