/cut-demo

Proofread for character box of tripitaka

Primary LanguageHTML

cut-demo

基于 jQuery、Raphael 的切分校对单元测试和原型。

Travis

在线预览

  • 页面缩放(1~5倍)，快捷键为数字键
  • 显示字框和控制点，用不同颜色区分各种状态（原始状态、已改动、当前编辑、掠过字框）
  • 字框编辑：拖拽控制点，允许在框外较近处拖动控制点，按esc键可取消
  • 字框编辑：移动和微调大小，wasd 移动、alt+方向键：放大，shift+方向键：缩小
  • 字框编辑：增加字框，当没有控制点亮显（例如在空白处拖拽）时将画新框
  • 字框编辑：删除字框，del键或回退键
  • 字框跳转导航，按方向键
  • 支持编辑和导航的快捷键
  • 自动单元测试
  • 缩放时当前字框位置保持不变，便于快速定位
  • 掠过字框与当前编辑字框分离，当前字框红背景，掠过字框无背景
  • 遮盖框住文字
  • 检查是否有漏字
  • 高亮框间重叠部分
  • 高亮超大、超长框
  • 在浮动区域放大显示当前字框的图形

文件说明

内核文件

  • app/cut1.html：样例页面，包含页面相关的个性化数据。
  • app/js/cut.js：切分校对内核文件，包含全局性配置数据。
  • app/js/cut_keys.js：切分校对的快捷键映射文件。
  • app/js/vendor：第三方开源插件。
  • app/css/cut.css：切分校对样式文件。
  • app/data/*.jpg, *.js：页面图和OCR数据。
  • app/data/gen_html.py：自动生成页面及其缩略图的脚本，生成的index.tmp 可合并到index.html。
  • app/html/template.html：页面模板网页，此目录下其他网页和缩略图自动生成。

单元测试文件

  • tests/karma.conf.js：单元测试配置文件。
  • tests/html/template.html：用于生成测试网页的模板文件。
  • tests/html/*.html, *.js：由 gen_html.py 生成的测试网页和OCR数据文件。
  • tests/spec/*.js：单元测试文件。

运行

  • 在 WebStorm 等IDE中打开 app/index.html，然后选择某种浏览器启用和调试。
  • 或先运行 npm i，然后运行 npm start 在Chrome中调试。

测试

  • 先运行 npm i
  • 运行 npm test 进行测试驱动开发
  • 运行 npm run test-single-run 执行一次单元测试并退出
  • 运行 npm run jshint 检查代码规范性

增加版面样本

在 data 下增加页面图和OCR结果文件(*.cut)， 然后运行 app/data/gen_html.py 生成页面，将 index.tmp 内容合并到 app/index.html。

参考资料