JavaFX字库精简项目开发（一）—— 快速开发脚手架

概述

JavaFX是用于构建富互联网应用程序的Java库。使用JavaFX开发的应用程序可以在各种设备上运行，如台式计算机，手机，物联网设备，平板电脑等。最近为了巩固一下JavaFX学习成果，准备利用整个技术开发一个工具软件能够对字库进行裁剪，可以根据用户的设置自动生成精简字库，简化手动裁剪的麻烦。

技术实现

首先是查找相关的开源资料，比如搜索“字库精简”，可以找到谷歌开源的字体精简工具库。

• 1.在github上下载cachegit-sfntly-master文件https://github.com/googlei18n/sfntly
• 2.ant下载地址：http://ant.apache.org/bindownload.cgi
• 3.搭建ant编译环境，编译出-来的包在cachegit-sfntly-master\sfntly\java\dist\tools\sfnttool文件夹下。
• 4.使用java -jar sfnttool.jar -s “实际使用字库内容” 进行字体精简，可以得到msyh_simplify.ttf仅有几十Kb。
• 5.为了便于threejs使用需要转为json文件格式。需要到通过如下网站https://gero3.github.io/facetype.js/
  进行精简。

涉及技术

• JavaFX8中的WebView，jfoenix8
• html js css 基本的web技术
• java se

功能编码

public class Main extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception{
        Parent root = FXMLLoader.load(getClass().getClassLoader().getResource("sample.fxml"));
        primaryStage.setTitle("Hello World");
        primaryStage.setScene(new Scene(root));
        Image icon = new Image(R.ICON, 32, 32, false, false);
        primaryStage.getIcons().add(icon);
        primaryStage.show();
    }


    public static void main(String[] args) {
        launch(args);
    }
}

public class MainController implements Initializable {
    @FXML
    private HBox menubar;
    @FXML
    private AnchorPane MainView;

    @Override
    public void initialize(URL location, ResourceBundle resources) {
        if (menubar.getChildren().size() == 0) {
            Navigatebar sysMenubar = new Navigatebar();
            menubar.getChildren().add(sysMenubar.getSysMenubar());
            sysMenubar.getSysMenubar().prefWidthProperty().bind(MainView.widthProperty());
        }
    }
}

通过xml定义主界面的布局

<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.geometry.Insets?>
<AnchorPane fx:id="MainView" maxHeight="1.7976931348623157E308" prefHeight="680.0" prefWidth="960.0" xmlns="http://javafx.com/javafx/8.0.172-ea" xmlns:fx="http://javafx.com/fxml/1" fx:controller="sample.MainController">
    <children>
        <HBox id="menubar_area" fx:id="menubar" prefHeight="50.0" prefWidth="960.0" stylesheets="@mainpage.css" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0">
        </HBox>
        <HBox id="content_area" fx:id="contentArea" layoutY="60.0" prefHeight="660.0" prefWidth="960.0" stylesheets="@mainpage.css">
        </HBox>
        <HBox fx:id="footerhbox" layoutY="772.0" maxHeight="20.0" minHeight="20.0" prefHeight="20.0" prefWidth="960.0" style="-fx-background-color: #f0f0f0;-fx-border-width: 1px;-fx-border-color: #c0c0c0;" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0">
            <children>
                <Label fx:id="runStatus" prefHeight="18.0" prefWidth="300.0">
                    <HBox.margin>
                        <Insets left="2" />
                    </HBox.margin>
                </Label>
                <HBox fx:id="progressbox" HBox.hgrow="ALWAYS" style="-fx-alignment: center-right;">
                    <Button id="btn_save" fx:id="btnSave" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" nodeOrientation="LEFT_TO_RIGHT" prefHeight="16.0" prefWidth="16.0" stylesheets="@mainpage.css" />
                    <HBox prefHeight="20" prefWidth="5.0">
                    </HBox>
                    <Button id="btn_download" fx:id="btnDownload" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" nodeOrientation="LEFT_TO_RIGHT" prefHeight="16.0" prefWidth="16.0" stylesheets="@mainpage.css" AnchorPane.rightAnchor="0.0"/>
                </HBox>
                <HBox fx:id="spacebox" prefHeight="20" prefWidth="10.0" AnchorPane.rightAnchor="0.0">
                </HBox>
            </children></HBox>
    </children>
</AnchorPane>

通过css来调整首页样式

.jfx-button{
    -fx-background-color:#fff;
}
.button{
    -fx-background-color:#eef0f6;
}
.button:hover{
    -fx-background-color:#aaf0f6;
}


#btn_download{
    -fx-background-image: url("/images/download.png");
    -fx-background-size: 16px;
    -fx-background-repeat: no-repeat;
    -fx-border-style: hidden;
}
#btn_save{
    -fx-background-image: url("/images/change.png");
    -fx-background-size: 16px;
    -fx-background-repeat: no-repeat;
    -fx-border-style: hidden;
}


.h-box:hover {
    -fx-text-fill: #ccc;
}
.h-box:selected {
    -fx-background-color: #eee;
    -fx-border-color: #000000;
}
#menubar_area,#footer_hbox{
    -fx-background-color: #f0f0f0;
    -fx-border-width: 1px;
    -fx-border-color: #c0c0c0;
}

结果展示

总结

以上已经完成对工具界面的搭建工作，并能够运行。https://gitee.com/lcpsky1991/javafx-web-app.git
后续功能将陆续添加。