软件课设：OCR文字标注

注：项目为学生小组完成，如有引用请注明原文链接
源码请访问 https://github.com/Architect15806/OCR-Marker

一、设计任务

（一）应用场景：

图片文字检测识别项目中，需要将识别结果（包括检测框出的文字结果以及识别的文字内容）可视化，并且对结果进行修正。
现要求设计一个如下功能的软件：

（二）基础要求：

1. 读取选定文件夹下的所有jpg，png图片，具有可以显示文件列表的区域，可以通过点击相应文件名打开相应图片，具有显示图片的区域；
2. 读取选定文件夹下的所有xml文件（xml文件名前缀与图片文件名前缀相同），xml文件中存储有标注框相对于图片的坐标，以及框内文本的识别内容；
3. 将xml中的识别内容解析出来并显示在列表区域中，根据标注框的坐标将标注框绘制在图片上；
4. 将标注框绘制在图片上，要求可以选中标注框，对标注框的位置、大小进行调整，可以对框内识别内容进行修改；
5. 修改后可以保存当前修改，重写xml文件。

（三）扩展要求：

1. 图片可以在视图区域中使用鼠标滚轮进行中心缩放、拖动平移；
2. 设计一个固定位置的工作区，用于放大显示当前选中的标注框以及标注框中的文字内容；
3. 注意选中标注框时，内容列表焦点也跳到相应部位，工作区内容也更改为相应框；
4. 创新更多人性化设计。

二、基本思路

（一）基本框架确定

1. 编程语言选择

   考虑到小组成员的知识基础，Java和Python语言为待定选择。综合评价这两种语言可以使用的编程工具：Java中可以使用Java AWT包或Java FX包编写界面程序，调节和美化容易，实现后台运算逻辑也较为方便；Python相比之下，界面编写不容易实现高自由度的自定义，此外在此体量的工程中容易造成代码管理混乱。

   故综合要素，选择Java为编程语言。

2. 框架选择

   Java AWT包编写界面较为底层，速度快，理论上有最高的调整自由度，有开源的美化包，组员对此技术熟练度高，但缺点是此方法无法使用可视化编程制作界面，操作监听逻辑复杂，如使用则制作周期较长；

   Java FX包为在Java AWT包基础上开发出的界面技术，可以使用Scene Builder界面可视化编程工具快速生成客户端界面，操作监听简单，程序结构清晰，容易Debug和更新维护，但缺点此技术是在开发之前相对陌生，需要花费精力磨合学习。

   在程序设计开始之前，小组成员分为两组，在两周时间内分别尝试两种技术编写最基本的框选功能程序。结果表明，Java AWT包的编程封装困难，逻辑混乱，扩展性不强，界面编写审美不佳，代码冗长而效果寥寥；Java FX包编写逻辑清晰，界面美观，且可以预留日后开发的模块位置，扩展性强。

   综合以上考虑，小组选择Java FX技术。

（二）程序模块分解

? 由于Java FX可视化界面编程的特性，界面相关排布和监听对应函数代码被部署在FXML文件中，故我们因此可以将界面和业务逻辑完全分离。分别以界面和业务逻辑为基点，可以分为如图模块：

图1：程序模块分析

（三）关键技术难点

? 实现本工程所有功能需要有以下技术储备为前提：

1. 图片文件（jpeg和png等）可以与Xml配置文件（如果存在）成对读取并存储其url；
2. 界面组件可以实现图片在指定的位置以指定的大小精确显示；
3. 界面组件可以实现自定义图形（直线和矩形）被显示在图片之上；
4. 鼠标事件可以实现实时获取鼠标位置，可以实现在指定的区域通过拖拽绘制矩形图形；
5. 列表组件可以选中，并获取选中的元素数据，列表可以多次加载；

三、方案设计

（一）技术基础

1. 以maven构建项目，引入Java FX等包

    
      com.jfoenix
      jfoenix
      8.0.8
    

    
      org.dom4j
      dom4j
      2.0.0
    

2. 实现工具类：文件对FilePair

此数据结构用于将读入的工作文件夹中所有的图片和Xml配置文件的url以配对的形式保存和操作。

public class FilePair {
   public File picture;
   public File property;
   public String picURL;
   public String proURL;
   public boolean hasInitialized;
   public String name;

   public FilePair(String picStr, String proStr, String name) {...}

   public FilePair(String picStr, String name){...}

   @Override
   public String toString() {...}
}

3. 实现工具类：矩形结构RectArc

此数据结构用于将绘制的矩形在程序运行时存储于内存中，并在合适的时机绘制在图片展示面板上

public class RectArc {
   public double X1;
   public double Y1;
   public double X2;
   public double Y2;
   public String word;
   public Color color;
   public Line lu, ld, ll, lr;
   public boolean isRemoved = false;

   public RectArc(double x1, double y1, double x2, double y2, Color c) {...}
   public RectArc(double x1, double y1, double x2, double y2, String OCR, Color c) {...}
   public void initializeLines(Pane father,int flag){...}
   public void resetLines(){...}
   public void removeLines(Pane father){...}
   public void initializeWord(ListView listView, int index){...}
   public String getWord(){...}
   public void setWord(String str){...}
   public void remove(){...}
}

4. 实现工具类：Xml文件读写XmlAccessor

此类静态函数用于读写指定格式的Xml文件，每次读取全部文件，或完全复写旧的Xml文件。

在xml文件的安排中，我们选择存储矩形框的相对图片长宽的归一化相对位置（以防止在不同设备上读取框位置的偏移），以及框的颜色和识别内容。

public class XmlAccessor {
	public static void Xml2RectArcList(double width, double height, double offsetX, double offsetY, FilePair filePair, ArrayList rectArcList){...}

	public static void RectArcList2Xml(double width, double height, double offsetX, double offsetY, FilePair filePair, ArrayList rectArcList){...}
}

（二）从stage开始实现一个FX程序的开端

public class mainFrame extends Application {
	...
    public static final String primaryScenePath = "/FXController/PrimarySceneController.fxml";
    public static final String MarkScenePath = "/FXController/MarkSceneController.fxml";

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

    @Override
    public void start(Stage stage) throws Exception {
        ...
        Parent root = FXMLLoader.load(getClass().getResource(primaryScenePath));
        Scene scene = new Scene(root);
        root = FXMLLoader.load(getClass().getResource(MarkScenePath));
        scene = new Scene(root);
        mainFrame.mainStage.setScene(mainFrame.primaryScene);
        mainFrame.mainStage.show();
        ...
    }
}

此处为程序执行的开端，执行后界面由stage跳转到scene，此后在各个scene之间相互切换，实现换页功能；
每个scene的启动需要一个控制类controller和对应的同名配置文件controller.fxml，在创建时需要使用用类函数FXMLLoader创建controller对象，并以此加载一个scene以展示。以下我们依次介绍主页面的MarkSceneController和MarkSceneController.fxml

图2：Java FX运行流程

（三）主页面MarkSceneController

1. 文件夹读取及文件配对

	//将文件装载入fileList并部署到界面
	public void fileDeploy(File dirFile){
        //获得文件总列表
        File allFiles[] = dirFile.listFiles();

        //获得图片列表和配置文件列表（过滤掉子文件夹和其他文件类型）
        ArrayList picList = new ArrayList<>();
        ArrayList xmlList = new ArrayList<>();
        
        //过滤并分类该文件目录下所有的图片文件和xml配置文件
        for (int i = 0; i < allFiles.length; i++) {...}

        //初始化存储文件信息的列表
        //fileList、allPicNameList、donePicNameList、undonePicNameList
        {...}

        //填充fileList、allPicNameList、donePicNameList、undonePicNameList
        //将配好的文件对装载入FilePair中并存储进fileList
        //创建缺省xml配置的FilePair，创建缺省的xml文件，并将这部分文件对存储
        Iterator picIt = picList.iterator();
        Iterator xmlIt;
        while(picIt.hasNext()) {...}
    }

    //将文件列表fileList装载到三个PicListView用于显示到界面列表中
    public void picListDeploy(){...}

2. 图片在指定区域的合理显示和矩形框列表的实时装载

	 //从xml装载或调整当前图片，以适应当前窗口状态，同时载入矩形框列表
    public void fitImage(){
        if(markImage != null){
            //图片适应策略：
        	//	当图片为较宽图片时：缩减高度，适应宽度，两边顶天，上下留白
        	//	当图片为较高图片时：缩减宽度，适应高度，头顶顶天，两边留白
            {...}

            //定义画笔范围
        	{...}

            //消除上次的矩形框显示并重新装载文字列表
            {...}
        }
    }

3. 鼠标拖拽矩形框的生成和存储

    //鼠标按压检测
	//在鼠标不越界的情况下，记录鼠标按压点为起始点，以此绘制矩形框的一个固定角
    @FXML
    void mPressed(MouseEvent event) {...}

    //鼠标拖动检测
	//在鼠标不越界的情况下，记录鼠标拖拽点为临时终点，以此在拖拽的过程中不断刷新界面，绘制拖拽矩形框
    @FXML
    void mDragged(MouseEvent event) {...}

    //鼠标释放检测
	//在拖拽结束后，如果拖拽框不至于过于窄，则将此框数据存储进RectArcList，重新归位所有部件
    @FXML
    void mRelease(MouseEvent event) {...}

4. 列表点击切换的监听实现

    /**
     * 内部监听类，实现列表点击的图片切换
     * 实现功能：
     * 1.保存上一次的标记
     * 2.清除上一次的绘图痕迹
     * 3.载入下一张图片及配置文件
     * */
    private class imageListItemChangeListener implements ChangeListener