refactor: 重构了布局

This commit is contained in:
2025-11-24 16:09:34 +08:00
parent 4c3ba08c72
commit 43e1f76f8c
5 changed files with 158 additions and 103 deletions
@@ -43,7 +43,7 @@ public class Controller implements Initializable {
@FXML
private AnchorPane drawingCanvasContainer;
@FXML
private VBox propertyPanel;
private VBox propertyPanelContainer;
@FXML
private AnchorPane scenePane;
@@ -134,7 +134,7 @@ public class Controller implements Initializable {
// 移除旧的Canvas
drawingCanvasContainer.getChildren().clear();
propertyPanel.getChildren().clear();
propertyPanelContainer.getChildren().clear();
// 创建新的Canvas
PageContent pageContent = page.getPageContent();
@@ -149,7 +149,7 @@ public class Controller implements Initializable {
// 创建属性面板
propertyPanelComponent = new PropertyPanel(drawingCanvas);
propertyPanel.getChildren().add(propertyPanelComponent);
propertyPanelContainer.getChildren().add(propertyPanelComponent);
}
}
@@ -18,7 +18,7 @@ public class Main extends Application {
public void start(Stage stage) throws Exception {
try {
Parent root = FXMLLoader.load(getClass().getResource("main.fxml"));
Scene scene = new Scene(root, 1200, 600);
Scene scene = new Scene(root, 1300, 700);
stage.setScene(scene);
Image icon = new Image(getClass().getResourceAsStream("icon.png"));
@@ -1,119 +1,103 @@
package dev.bytevibe.hyperpoint;
import javafx.geometry.Insets;
import javafx.fxml.FXML;
import javafx.fxml.FXMLLoader;
import javafx.fxml.Initializable;
import javafx.scene.control.*;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import java.io.IOException;
import java.net.URL;
import java.util.ResourceBundle;
/**
* 属性编辑面板,用于编辑选中对象的属性
* 使用FXML加载UI布局
*/
public class PropertyPanel extends VBox {
private DrawingCanvas canvas;
public class PropertyPanel extends VBox implements Initializable {
@FXML
private Label objectTypeLabel;
@FXML
private Label positionLabel;
@FXML
private TextField textContentField;
@FXML
private ComboBox<String> fontFamilyCombo;
@FXML
private Spinner<Double> fontSizeSpinner;
@FXML
private ComboBox<String> fontStyleCombo;
@FXML
private ColorPicker textColorPicker;
@FXML
private ColorPicker fillColorPicker;
@FXML
private ColorPicker strokeColorPicker;
@FXML
private Spinner<Double> strokeWidthSpinner;
@FXML
private Button deleteButton;
private DrawingCanvas canvas;
public PropertyPanel(DrawingCanvas canvas) {
this.canvas = canvas;
setPrefWidth(200);
setPadding(new Insets(10));
setSpacing(8);
setStyle("-fx-border-color: #e0e0e0; -fx-border-width: 1 0 0 0;");
loadFXML();
}
// 对象类型标签
objectTypeLabel = new Label("未选中对象");
objectTypeLabel.setStyle("-fx-font-size: 14; -fx-font-weight: bold;");
/**
* 加载FXML文件
*/
private void loadFXML() {
try {
FXMLLoader loader = new FXMLLoader(getClass().getResource("propertyPanel.fxml"));
loader.setRoot(this);
loader.setController(this);
loader.load();
} catch (IOException e) {
System.err.println("无法加载propertyPanel.fxml文件");
e.printStackTrace();
}
}
// 位置标签
positionLabel = new Label("X: 0, Y: 0");
// 文本内容
Label textLabel = new Label("文本内容:");
textContentField = new TextField();
textContentField.setOnKeyReleased(e -> updateTextContent());
// 字体选择
Label fontLabel = new Label("字体:");
fontFamilyCombo = new ComboBox<>();
fontFamilyCombo.getItems().addAll("Arial", "Times New Roman", "Courier New", "Verdana", "Georgia");
fontFamilyCombo.setValue("Arial");
fontFamilyCombo.setOnAction(e -> updateTextStyle());
// 字体大小
Label sizeLabel = new Label("大小:");
fontSizeSpinner = new Spinner<>(8.0, 72.0, 16.0, 2.0);
fontSizeSpinner.setEditable(true);
fontSizeSpinner.valueProperty().addListener((obs, oldVal, newVal) -> updateTextStyle());
// 字体风格
Label styleLabel = new Label("风格:");
fontStyleCombo = new ComboBox<>();
fontStyleCombo.getItems().addAll("NORMAL", "BOLD", "ITALIC", "BOLD_ITALIC");
fontStyleCombo.setValue("NORMAL");
fontStyleCombo.setOnAction(e -> updateTextStyle());
// 文本颜色
Label textColorLabel = new Label("文本颜色:");
textColorPicker = new ColorPicker(Color.BLACK);
textColorPicker.setOnAction(e -> updateTextColor());
// 填充颜色
Label fillColorLabel = new Label("填充颜色:");
fillColorPicker = new ColorPicker(Color.WHITE);
fillColorPicker.setOnAction(e -> updateFillColor());
// 边框颜色
Label strokeColorLabel = new Label("边框颜色:");
strokeColorPicker = new ColorPicker(Color.BLACK);
strokeColorPicker.setOnAction(e -> updateStrokeColor());
// 边框宽度
Label strokeWidthLabel = new Label("边框宽度:");
strokeWidthSpinner = new Spinner<>(1.0, 10.0, 2.0, 1.0);
strokeWidthSpinner.setEditable(true);
strokeWidthSpinner.valueProperty().addListener((obs, oldVal, newVal) -> updateStrokeWidth());
// 删除按钮
deleteButton = new Button("删除对象");
deleteButton.setStyle("-fx-font-size: 12;");
deleteButton.setOnAction(e -> deleteSelectedObject());
// 添加所有控件到面板
getChildren().addAll(
objectTypeLabel,
new Separator(),
positionLabel,
new Separator(),
textLabel,
textContentField,
fontLabel,
fontFamilyCombo,
sizeLabel,
fontSizeSpinner,
styleLabel,
fontStyleCombo,
textColorLabel,
textColorPicker,
fillColorLabel,
fillColorPicker,
strokeColorLabel,
strokeColorPicker,
strokeWidthLabel,
strokeWidthSpinner,
new Separator(),
deleteButton
@Override
public void initialize(URL url, ResourceBundle resourceBundle) {
// 初始化字体列表
fontFamilyCombo.getItems().addAll(
"Arial",
"Times New Roman",
"Courier New",
"Verdana",
"Georgia"
);
// 初始化风格列表
fontStyleCombo.getItems().addAll(
"NORMAL",
"BOLD",
"ITALIC",
"BOLD_ITALIC"
);
// 设置默认值
fontFamilyCombo.setValue("Arial");
fontStyleCombo.setValue("NORMAL");
textColorPicker.setValue(Color.BLACK);
fillColorPicker.setValue(Color.WHITE);
strokeColorPicker.setValue(Color.BLACK);
// 添加事件监听
textContentField.setOnKeyReleased(e -> updateTextContent());
fontFamilyCombo.setOnAction(e -> updateTextStyle());
fontSizeSpinner.valueProperty().addListener((obs, oldVal, newVal) -> updateTextStyle());
fontStyleCombo.setOnAction(e -> updateTextStyle());
textColorPicker.setOnAction(e -> updateTextColor());
fillColorPicker.setOnAction(e -> updateFillColor());
strokeColorPicker.setOnAction(e -> updateStrokeColor());
strokeWidthSpinner.valueProperty().addListener((obs, oldVal, newVal) -> updateStrokeWidth());
deleteButton.setOnAction(e -> deleteSelectedObject());
// 默认隐藏所有编辑控件
setEditingVisible(false);
@@ -174,6 +158,8 @@ public class PropertyPanel extends VBox {
fillColorPicker.setDisable(true);
strokeColorPicker.setDisable(true);
strokeWidthSpinner.setDisable(true);
deleteButton.setDisable(false);
}
/**
@@ -188,6 +174,8 @@ public class PropertyPanel extends VBox {
fillColorPicker.setDisable(false);
strokeColorPicker.setDisable(false);
strokeWidthSpinner.setDisable(false);
deleteButton.setDisable(false);
}
/**
@@ -202,6 +190,8 @@ public class PropertyPanel extends VBox {
fillColorPicker.setDisable(true);
strokeColorPicker.setDisable(true);
strokeWidthSpinner.setDisable(true);
deleteButton.setDisable(false);
}
/**
@@ -7,16 +7,18 @@
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.VBox?>
<AnchorPane fx:id="scenePane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="600.0" prefWidth="1200.0" xmlns="http://javafx.com/javafx/21" xmlns:fx="http://javafx.com/fxml/1" fx:controller="dev.bytevibe.hyperpoint.Controller">
<AnchorPane fx:id="scenePane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="700.0" prefWidth="1300.0" xmlns="http://javafx.com/javafx/25" xmlns:fx="http://javafx.com/fxml/1" fx:controller="dev.bytevibe.hyperpoint.Controller">
<children>
<!-- 顶部菜单栏 -->
<VBox layoutX="0" layoutY="0" prefHeight="50.0" prefWidth="1200.0" style="-fx-border-color: #cccccc; -fx-border-width: 0 0 1 0;">
<VBox layoutX="0" layoutY="0" prefHeight="50.0" prefWidth="1300.0" style="-fx-border-color: #cccccc; -fx-border-width: 0 0 1 0;">
<children>
<HBox spacing="5" style="-fx-padding: 5;">
<children>
<Button fx:id="newSlideButton" mnemonicParsing="false" onAction="#onNewSlide" text="新建幻灯片" />
<Button mnemonicParsing="false" text="打开幻灯片" />
<Button fx:id="newPageButton" mnemonicParsing="false" onAction="#onNewPage" text="新建页面" />
<Button fx:id="deletePageButton" mnemonicParsing="false" onAction="#onDeletePage" text="删除页面" />
<Button mnemonicParsing="false" text="保存幻灯片" />
<Label text=" | " />
<Button fx:id="addTextButton" mnemonicParsing="false" onAction="#onAddText" text="添加文本" />
<Button fx:id="addLineButton" mnemonicParsing="false" onAction="#onAddLine" text="直线" />
@@ -32,23 +34,22 @@
</VBox>
<!-- 主内容区域 -->
<HBox layoutX="0" layoutY="50" prefHeight="550.0" prefWidth="1200.0">
<HBox layoutX="0" layoutY="50" prefHeight="652.0" prefWidth="1300.0">
<!-- 左侧页面列表 -->
<VBox prefWidth="200.0" style="-fx-border-color: #e0e0e0; -fx-border-width: 0 1 0 0;">
<Label text="页面列表" style="-fx-padding: 5; -fx-font-weight: bold;" />
<ListView fx:id="pageListView" VBox.vgrow="ALWAYS" />
<VBox prefHeight="657.0" prefWidth="200.0" style="-fx-border-color: #e0e0e0; -fx-border-width: 0 1 0 0;">
<Label style="-fx-padding: 5; -fx-font-weight: bold;" text="页面列表" />
<ListView fx:id="pageListView" prefHeight="619.0" prefWidth="195.0" VBox.vgrow="ALWAYS" />
</VBox>
<!-- 右侧编辑区域 -->
<VBox HBox.hgrow="ALWAYS" spacing="10" style="-fx-padding: 10;">
<Label fx:id="pageNameLabel" text="页面名称:" style="-fx-font-size: 14; -fx-font-weight: bold;" />
<VBox spacing="10" style="-fx-padding: 10;" HBox.hgrow="ALWAYS">
<Label fx:id="pageNameLabel" style="-fx-font-size: 14; -fx-font-weight: bold;" text="页面名称:" />
<!-- 绘图Canvas将在这里动态添加 -->
<AnchorPane fx:id="drawingCanvasContainer" HBox.hgrow="ALWAYS" VBox.vgrow="ALWAYS" />
</VBox>
<!-- 右侧属性编辑面板 -->
<VBox fx:id="propertyPanel" prefWidth="200.0" />
<VBox fx:id="propertyPanelContainer" prefWidth="200.0" />
</HBox>
</children>
</AnchorPane>
@@ -0,0 +1,64 @@
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.ColorPicker?>
<?import javafx.scene.control.ComboBox?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.Separator?>
<?import javafx.scene.control.Spinner?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.VBox?>
<fx:root type="javafx.scene.layout.VBox" xmlns="http://javafx.com/javafx/21" xmlns:fx="http://javafx.com/fxml/1"
prefWidth="200.0" spacing="8"
style="-fx-padding: 10; -fx-border-color: #e0e0e0; -fx-border-width: 1 0 0 0;">
<!-- 对象类型标签 -->
<Label fx:id="objectTypeLabel" text="未选中对象" style="-fx-font-size: 14; -fx-font-weight: bold;"/>
<Separator/>
<!-- 位置标签 -->
<Label fx:id="positionLabel" text="X: 0, Y: 0"/>
<Separator/>
<!-- 文本内容 -->
<Label text="文本内容:"/>
<TextField fx:id="textContentField"/>
<!-- 字体选择 -->
<Label text="字体:"/>
<ComboBox fx:id="fontFamilyCombo" prefWidth="180.0"/>
<!-- 字体大小 -->
<Label text="大小:"/>
<Spinner fx:id="fontSizeSpinner" initialValue="16.0" min="8.0" max="72.0" amountToStepBy="2.0"/>
<!-- 字体风格 -->
<Label text="风格:"/>
<ComboBox fx:id="fontStyleCombo" prefWidth="180.0"/>
<!-- 文本颜色 -->
<Label text="文本颜色:"/>
<ColorPicker fx:id="textColorPicker"/>
<!-- 填充颜色 -->
<Label text="填充颜色:"/>
<ColorPicker fx:id="fillColorPicker"/>
<!-- 边框颜色 -->
<Label text="边框颜色:"/>
<ColorPicker fx:id="strokeColorPicker"/>
<!-- 边框宽度 -->
<Label text="边框宽度:"/>
<Spinner fx:id="strokeWidthSpinner" initialValue="2.0" min="1.0" max="10.0" amountToStepBy="1.0"/>
<Separator/>
<!-- 删除按钮 -->
<Button fx:id="deleteButton" text="删除对象" style="-fx-font-size: 12;"/>
</fx:root>