汉字笔顺动画技术剖析

作者：大力智能技术团队-客户端圈圈

背景

汉字笔顺动画是常见的语文教育需求，我们导入网上开源的 Hanzi Writter 并部署编辑器，应用在大力智能作业灯上。在原版前端实现基础上我们扩展了 Android 和 iOS 端实现，提供更优化的笔顺动画性能。增强对笔顺绘制的控制能力，实现了指定笔顺/笔段渲染，支持笔顺批改和描红能力。

关键技术

1. 字形数据提取

字形是单个字符的外观形状，而字体是具有相同外观样式和排版尺寸的字形集合。基于字形数据，我们可以实现每个文字的渲染和笔顺动画。那么该如何拿到字形数据呢？TTF就是不错的选择。TTF（TrueTypeFont）是一种曲线描边字体文件格式，由Apple公司和Microsoft公司共同推出，其文件扩展名为.ttf。它支持多种字体，如语文课本中常见的楷体。TTF文件由一系列表组成，其中glyf表就包括了字形数据，即字形的轮廓定义和调整指令。依据下述流程可以提取字形数据：

提取出字形数据后，使用SVG将对应文字绘制出来。

2. Stroke Extraction 笔画拆取

在第一节中实现了字形数据的提取，它包括字形的轮廓点contours及path（a）。但是仅依靠这些数据无法实现笔顺动画，因为它们只有轮廓信息，没有笔画信息，只要有交叉重叠，都会识别成同一个体（b)。因此，要实现笔顺动画，就必须从源数据中拆取出所有笔画的轮廓数据，即笔画拆取。

2.1 解决思路

由于笔画之间存在交叉重叠（c)，若要实现笔画拆取，就需要将笔画交接处的凹点连通起来。这些处于交叉处特殊的拐角点称为corner，连通两个corner形成bridge，表明他们同属于一个笔画。

当顺时针跟踪端点：

因此，笔画拆取工作主要分为以下四步：

2.2 EndPoint Parsing Corner检测

在Hanzi Writter开源库中，笔画拆取算法主要围绕corner展开。那corner是什么呢？详细来说，corner是位于两个笔画轮廓交界的特殊端点，通常情况下，他会有另一个corner与之匹配，如C1和C2。C1和C2相邻且处于笔画A的轮廓同侧，连通C1和C2就可以将笔画A和笔画B拆分开来，得到笔画A自己的轮廓数据。这些corner具有显著的局部特征，它们是字形的凹点，经过该点处的path会沿着顺时针急剧弯曲。计算出所有端点的角度和距离，判断是否拥有该特征，就可以检测哪些端点为corner。

function Endpoint(paths, index) {
  this.index = index; 
  const path = paths[index[0]];
  const n = path.length;
  this.indices = [[index[0], (index[1] + n - 1) % n], index];
  this.segments = [path[(index[1] + n - 1) % n], path[index[1]]];
  this.point = this.segments[0].end;
  assert(Point.valid(this.point), this.apoint);
  assert(Point.equal(this.point, this.segments[1].start), path);
  this.tangents = [
    Point.subtract(this.segments[0].end, this.segments[0].start),
    Point.subtract(this.segments[1].end, this.segments[1].start),
  ];
  const threshold = Math.pow(MIN_CORNER_TANGENT_DISTANCE, 2);
  if (this.segments[0].control !== undefined &&
      Point.distance2(this.point, this.segments[0].control) > threshold) {
    this.tangents[0] = Point.subtract(this.point, this.segments[0].control);
  }
  if (this.segments[1].control !== undefined &&
      Point.distance2(this.point, this.segments[1].control) > threshold) {
    this.tangents[1] = Point.subtract(this.segments[1].control, this.point);
  }
  this.angles = this.tangents.map(Point.angle);
  const diff = Angle.subtract(this.angles[1], this.angles[0]);
  this.corner = diff < -MIN_CORNER_ANGLE;
  return this;
}
复制代码

2.3 Corner Match Scoring 通过NN评分Corner匹配度

检测出一组corner数据后，就要对这些corner进行一对一匹配，但在匹配前还需要评判哪些corner更有可能连接起来。开源库采用神经网络算法计算corner间的匹配度，它将成为匹配算法中的权重值，使匹配结果更贴近现实情况。

const scoreCorners = (ins, out, classifier) => {
  return classifier(getFeatures(ins, out));
}


import {NEURAL_NET_TRAINED_FOR_STROKE_EXTRACTION} from '/lib/net';
import {stroke_extractor} from '/lib/stroke_extractor';

Meteor.startup(() => {
  const input = new convnetjs.Vol(1, 1, 8 /* feature vector dimensions */);
  const net = new convnetjs.Net();
  net.fromJSON(NEURAL_NET_TRAINED_FOR_STROKE_EXTRACTION);
  const weight = 0.8;

  const trainedClassifier = (features) => {
    input.w = features;
    const softmax = net.forward(input).w;
    return softmax[1] - softmax[0];
  }

  stroke_extractor.combinedClassifier = (features) => {
    return stroke_extractor.handTunedClassifier(features) +
           weight*trainedClassifier(features);
  }
});
复制代码

2.4 Corner Matching 通过匈牙利算法进行Corner匹配

在2.3小节中已经通过神经网络产生了权重，接下来就可以使用最简单的匈牙利算法，实现corner匹配。

const matchCorners = (corners, classifier) => {
  const matrix = [];
  for (let i = 0; i < corners.length; i++) {
    matrix.push([]);
    for (let j = 0; j < corners.length; j++) {
      matrix[i].push(scoreCorners(corners[i], corners[j], classifier)); //corner之间相关性
    }
  }
  for (let i = 0; i < corners.length; i++) {
    for (let j = 0; j < corners.length; j++) {
      const reversed_score = matrix[j][i] - REVERSAL_PENALTY;
      if (reversed_score > matrix[i][j]) {
        matrix[i][j] = reversed_score;
      }
    }
  }
  return (new Hungarian(matrix)).x_match;
}
复制代码

2.5 Make Bridges 连通配对端点拆分笔画

依据2.4小节的匹配结果返回一组bridge，其中每个bridge包含两个corner。跟踪轮廓的同时连通corner，就可以提取出每个笔画的轮廓数据，实现笔画拆分。值得注意的是，当遇到多个bridge时，选择与当前path构成最大角度的bridge。

const getBridges = (endpoints, classifier) => {
  const result = [];
  const corners = endpoints.filter((x) => x.corner);
  const matching = matchCorners(corners, classifier);
  for (let i = 0; i < corners.length; i++) {
    const j = matching[i];
    if (j <= i && matching[j] === i) {
      continue;
    }
    result.push([Point.clone(corners[i].point), Point.clone(corners[j].point)]);
  }
  result.map(checkBridge);
  return result;
}

const stroke_paths = extractStrokes(paths, endpoints, bridges, log);
const strokes = stroke_paths.map((x) => svg.convertPathsToSVGPath([x]));
复制代码

3. Medians 笔画中点生成

在第二节中实现了笔画的拆分，得到每个笔画的轮廓数据。依据轮廓数据可以进一步生成笔画的中点骨架。轮廓决定单个笔画的绘制范围，而中点则决定了绘制的顺序和方向。结合轮廓和中点数据，就可以实现单个笔画的绘制动画。接下来就让我们一起了解，如何通过轮廓数据生成中点。

3.1 Polygon Approximation 端点加密

首先，为了提高中点生成结果的可靠性，需要先采用矢量图形的多边形近似方法进行轮廓点加密。TrueType字体利用二次贝赛尔曲线和直线来描述字形的轮廓，因此加密公式如下：

svg.getPolygonApproximation = (path, approximation_error) => {
  const result = [];
  approximation_error = approximation_error || 64;
  for (let x of path) {
    const control = x.control || Point.midpoint(x.start, x.end);
    const distance = Math.sqrt(Point.distance2(x.start, x.end));
    const num_points = Math.floor(distance/approximation_error);
    for (let i = 0; i < num_points; i++) {
      const t = (i + 1)/(num_points + 1);
      const s = 1 - t;
      result.push([s*s*x.start[0] + 2*s*t*control[0] + t*t*x.end[0],
                   s*s*x.start[1] + 2*s*t*control[1] + t*t*x.end[1]]);
    }
    result.push(x.end);
  }
  return result;
}
复制代码

3.2 Polygon Voronoi 通过冯洛诺伊图（泰森多边形）生成中点

得到加密的轮廓点数据后，就可以通过泰森多边形生成中点。那什么是泰森多边形呢？

首先对一组零散控制点做如下操作：

这些连续多边形就是泰森多边形，又叫冯洛诺伊图（Voronoi diagram），得名于Georgy Voronoi。在IS和地理分析中经常采用泰森多边形进行快速插值，分析地理实体的影响区域，是解决邻接度问题的又一常用工具。

通过原理可以了解到，泰森多边形每个顶点是对应三角形的外接圆圆心，因此它到这些控制点的距离相等。

  var sites = [{x:300,y:300}, {x:100,y:100}, {x:200,y:500}, {x:250,y:450}, {x:600,y:150}];
  // xl, xr means x left, x right
  // yt, yb means y top, y bottom
  var bbox = {xl:0, xr:800, yt:0, yb:600};
  var voronoi = new Voronoi();
  // pass an object which exhibits xl, xr, yt, yb properties. The bounding
  // box will be used to connect unbound edges, and to close open cells
  result = voronoi.compute(sites, bbox);
  // render, further analyze, etc.
复制代码

按照这个思路，可以将笔画的轮廓点作为控制点，生成泰森多边形。提取泰森多边形的顶点作为笔画中心点。

const findStrokeMedian = (stroke) => {
  ...
  for (let approximation of [16, 64]) {
    polygon = svg.getPolygonApproximation(paths[0], approximation);
    voronoi = voronoi || new Voronoi;
    const sites = polygon.map((point) => ({x: point[0], y: point[1]}));
    const bounding_box = {xl: -size, xr: size, yt: -size, yb: size};
    try {
      diagram = voronoi.compute(sites, bounding_box);
      break;
    } catch(error) {
      console.error(`WARNING: Voronoi computation failed at ${approximation}.`);
    }
  }
  ...
}
复制代码

4. 笔画顺序

第三节实现了单个笔画的绘制动画，但还是需要解决笔画之间的顺序问题。解决问题的关键，就是依据汉字结构，将目标汉字不断拆解成已知顺序的字。

在开源库中提供了汉字分解数据库，关键字段如下：

以【胡】为例，⿰表示胡为左右结构，左边为古，右边为月。

以【湖】为例，拆解过程如下：

拆解完笔顺后，需要将所有零散的中点数据，与当前所拥有的中点再做一遍匈牙利算法匹配，最终可得到一个相对正确的笔画顺序结果，生成json文件。下面为汉字“丁”的笔顺结果文件。

{"strokes": ["M 531 651 Q 736 675 868 663 Q 893 662 899 670 Q 906 683 894 696 Q 863 724 817 744 Q 801 750 775 740 Q 712 725 483 694 Q 185 660 168 657 Q 162 658 156 657 Q 141 657 141 645 Q 140 632 160 618 Q 178 605 211 594 Q 221 590 240 599 Q 348 629 470 644 L 531 651 Z", "M 435 100 Q 407 107 373 116 Q 360 120 361 112 Q 361 103 373 94 Q 445 39 491 -5 Q 503 -15 518 2 Q 560 60 553 141 Q 541 447 548 561 Q 548 579 550 596 Q 556 624 549 635 Q 545 642 531 651 C 509 671 457 671 470 644 Q 485 629 485 573 Q 488 443 488 148 Q 487 112 477 99 Q 464 92 435 100 Z"], "medians": [[[153, 645], [177, 634], [219, 628], [416, 663], [794, 706], [823, 702], [887, 679]], [[478, 644], [518, 610], [518, 101], [495, 55], [450, 68], [369, 110]]]}
复制代码

5. 相关参考

本文重点剖析了开源库中笔顺动画的关键技术，相关参考资料如下：

编辑于 2021-10-18 09:45

Android 开发

笔顺

儿童教育