---
tags: tirc-library
---

# JavaFxTools

專案內包含以JavaFx為基礎開發的UI元件

### maven

<dependency>
  <groupId>tirc.lib.ui</groupId>
  <artifactId>JavaFxTools</artifactId>
  <version>0.0.4</version>
</dependency>

## MultiPicCanvas
此元件提供以行列方式放置多張圖片，
並依據Canvas大小自動縮放的功能。

### 使用範例碼

public class DemoController {	
	
    @FXML private Pane canvas_parent_pane;
	
    @FXML public void initialize() {
	canvas_parent_pane.getChildren().add(initMultiPictureCanvas());
    }
	
    private MultiPicCanvas initMultiPictureCanvas() {		
        int pic_actual_width = 643;
        int pic_actual_height = 485;
        int rows = 7;
        int cols = 7;
        Image image = new Image("TestPicture.jpg");	
	
        MultiPicCanvas multi_picture_canvas 
            = new MultiPicCanvas(
                rows,
                cols, 
                pic_actual_width,    // 圖片實際寬度
                pic_actual_height);  // 圖片實際高度
                
        // 圖片間間隔距離
        multi_picture_canvas.setSpace(10); 
	
        // 依照row與col的序號來設定圖片
        for(int row = 0; row < rows; row++) {
            for(int col = 0;col < cols; col++) {
                multi_picture_canvas.setImage(row, col, image);
            }
        }
    
        // 監聽點擊事件    
        multi_picture_canvas.setListener((row, col)->{
            System.out.println(String.format("onClick row:%d col:%d", row, col));
        });
    
        // 針對父元件進行保持比例自動縮放功能
        multi_picture_canvas.bindParentSize(canvas_parent_pane); 
		
        return multi_picture_canvas;
    }
}

## MultiPicControl
此元件以MultiPicCanvas為主體，
再加入疊上文字功能，
可傳入JavaFx text元件。

public class DemoController {	
	
    @FXML private Pane canvas_parent_pane;
	
    @FXML public void initialize() {
        canvas_parent_pane.getChildren().add(initMultiPictureCanvas());
    }
	
    private Control initMultiPictureCanvas() {		
        int pic_actual_width = 643;
        int pic_actual_height = 485;
        int rows = 7;
        int cols = 7;
        Image image = new Image("TestPicture.jpg");
		
        MultiPicControl control = new MultiPicControl();
		
        // 初始化MultiPicCanvas
        control.initCanvas(
            rows, 
            cols, 
            pic_actual_width,    // 圖片實際寬度
            pic_actual_height);  // 圖片實際高度
        
        // 圖片間間隔距離
        control.setSpace(10);

        // 依照row與col的序號來設定圖片
        for(int row = 0; row < rows; row++) {
            for(int col = 0;col < cols; col++) {
                control.setImage(row, col, image);
            }    
        }
        
        // 監聽點擊事件   
        control.setListener((row, col)->{
            System.out.println(String.format("onClick row:%d col:%d", row, col));
        });

        // 針對父元件進行保持比例自動縮放功能
        control.bindParentSize(canvas_parent_pane); //輸入其父元件
		
        // 文字功能
        for(int row = 0; row < rows; row++) {
            for(int col = 0;col < cols; col++) {
                Text t = new Text();
                t.setText("Hello " + row + "," + col);
                t.setFill(Color.WHITE);
                control.setText(row, col, t);
            }
        }
        
        // 修改文字內容
        control.setText(3, 3, "YA");
		
        // 設定文字距離邊框距離
        control.setTextPadding(5);
        // 設定文字對齊
        control.setTextAlign(HPos.RIGHT, VPos.BOTTOM);
		
        return control;
    }
}

# Release Note #
### v0.1 release date: 未定 ###
* 加入MultiPicCanvas元件
* 加入使用Bind為基礎的I18N元件
* 加入MultiPicControl元件，可支援輸入JavaFx Text物件