2012-07-27 26 views
1

我想設計一個組件,看起來像一個具有3位置的開關。一箇中立位置和上開關位置,當用戶單擊組件的上半部分和下開關位置時,用戶單擊組件的下半部分。當鼠標鬆開後,開關回到中立位置。這些位置我有3個開關圖像。我正在考慮使用Button,然後檢查鼠標點擊座標是在上半部分還是下半部分,然後相應地設置圖像。我正在尋找任何更好的建議,如果可能的話,使用圖像的CSS(我不知道是否有可能),或任何其他建議使用另一個組件,如果它更合適。謝謝。JavaFX 2 - 什麼組件用於表示機械開關

回答

0

我認爲你應該使用三個組件而不是一個。

例如,您可以使用三個ToogleButton實例。這個組件就像一個按鈕,但有一個toogle狀態(點擊/未點擊)。我從來沒有使用它在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)可能是解決方案。如果您從側面顯示切換器,則可以根據切換器的狀態更改圖像的旋轉。

要知道用戶點擊的位置,可以找到按鈕的位置。

另一種解決方案可能是在圖像頂部有三個透明區域,並攔截這些區域上的點擊事件,而不是圖像。從未使用過這樣的解決方案,我可以幫助你更多。

我看到的最後解決方案可能是在開關圖像的側面使用另外兩個圖像組件,顯示兩個箭頭,用於向上或向下切換開關。

+0

您好,我無法用三個按鈕,它必須是一個爲外觀必須像機械或電氣開關。 – jerome 2012-07-27 07:03:12

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