一种移动端唐诗自适应布局方法

摘要

本发明公开了一种移动端唐诗自适应布局方法。包括：(1)建立移动端基于矢量的中文田字格自适应显示模块；(2)建立移动端基于矢量的拼音四线格自适应显示模块；(3)以移动端基于矢量的中文田字格和拼音四线格为背景自适应布局唐诗。本发明针对移动设备的多样性，利用移动设备的分辨率计算适应比例，使唐诗在移动设备的田字格中自适应布局，其良好的中文田字格的显示效果和精美的唐诗布局解决了在移动端学习汉字和唐诗的难题。

说明书

技术领域

本发明属于移动教育技术领域，更具体地，涉及一种移动端唐诗自适 应布局方法。

背景技术

随着移动互联网技术和移动设备的快速发展，移动学习成为数字化学 习的热点方向，日益受到人们的关注。目前我国移动学习的发展还处于初 级阶段，很多技术都面临着从传统的PC端到移动端的转型。在指导小孩学 习汉字时，人们习惯将它们置于田字格中。欣赏田字格中的汉字，让孩子 感受到每个字都有它的位置，而不能胡乱摆放，这是一个重要的环节。另 一方面，唐诗的学习覆盖整个语文学习阶段；对初学者而言，正确地抄写 具有代表性的唐诗是深切体会其结构之美的重要途径。

传统的中文田字格都是在PC端通过word或excel等办公软件制作而成 的，这种技术的弊端在于无法适应种类繁多和分辨率不一的移动设备，导 致在移动端的显示质量明显下降。

发明内容

针对现有技术的以上缺陷或改进需求，本发明提供了一种移动端唐诗 自适应布局方法，针对移动设备的多样性，利用移动设备的分辨率计算适 应比例，使唐诗在移动设备的田字格中自适应布局，其良好的中文田字格 的显示效果和精美的唐诗布局解决了在移动端学习汉字和唐诗的难题。

为实现上述目的，本发明提供了一种移动端唐诗自适应布局方法，其 特征在于，包括如下步骤：

(1)建立移动端基于矢量的中文田字格自适应显示模块；

进一步包括如下步骤：

(1-1)在移动端屏幕坐标系中选取四个顶点A(x,y)、B(x+100,y)、 C(x,y+100)和D(x+100,y+100)，得到四条矢量实线段和构 成四边形外边界，选取和的中点E(x+50,y)、F(x,y+50)、 G(x+50,y+100)和H(x+100,y+50)，得到两条矢量虚线段和构成中 心辅助线，从而得到标准中文田字格；其中，屏幕坐标系的原点为移动端 屏幕的左上角点，X轴与移动端屏幕的左侧边重合，方向向下，Y轴与移 动端屏幕的顶边重合，方向向右；

(1-2)设置汉字字体大小为72号，居中对齐，确定汉字在标准中文田 字格中绘制的基准点为W(x+75,y+50)；

(1-3)根据给定的缩放比例scale对标准中文田字格进行缩放，调整汉 字字体大小为72*scale号，居中对齐，确定汉字在缩放后的中文田字格中绘 制的基准点为W₁(x+75*scale,y+50*scale)，从而得到基于矢量的中文田 字格自适应显示模块；

(2)建立移动端基于矢量的拼音四线格自适应显示模块；

进一步包括如下步骤：

(2-1)在移动端屏幕坐标系中选取如下点A′(x′,y)、B′(x′,y+100)、 C′(x′+20,y)、D′(x′+20,y+100)、E′(x′+40,y)、F′(x′+40,y+100)、 G′(x′+60,y)和H′(x′+60,y+100)，得到四条矢量实线段和从而得到标准拼音四线格；其中，x′＝x-60；

(2-2)设置拼音字体大小为36号，居中对齐，确定拼音在标准拼音四 线格中绘制的基准点为P(x′+40,y+50)；

(2-3)根据给定的缩放比例scale对标准拼音四线格进行缩放，调整拼 音字体大小为36*scale号，居中对齐，确定拼音在缩放后的拼音四线格中绘 制的基准点为P₁(x′+40*scale,y+50*scale)，从而得到基于矢量的拼音四 线格自适应显示模块；

(3)以移动端基于矢量的中文田字格和拼音四线格为背景自适应布局 唐诗。

优选地，所述步骤(3)进一步包括如下步骤：

(3-1)以移动端基于矢量的中文田字格和拼音四线格为背景自适应布 局唐诗标题；

进一步包括如下步骤：

(3-1-1)根据唐诗标题的字数对唐诗标题分行布局；

(3-1-2)根据移动端屏幕分辨率的宽度R_W和唐诗标题分行中的最大可 分配字数C_Tmax计算唐诗标题各行的统一缩放比例δ_T为：

${\delta }_T=\frac{R_W-D_f}{C_{Tmax}*100},$

其中，D_f为预定的移动端屏幕空白位置大小；

(3-1-3)计算唐诗标题每一行的绘制起始位置L_Tsi为：

$L_{Tsi}=(R_W-D_f-C_i*100*{\delta }_T)*\frac{1}{2},$

其中，C_i为对应行的可分配字数；

(3-1-4)根据汉字顺序，从唐诗标题每一行的绘制起始位置L_Tsi开始， 按照100*δ_T进行偏移，计算唐诗标题每一行中的每一个字的绘制起始位置；

(3-1-5)利用中文田字格自适应显示模块和拼音四线格自适应显示模 块完成唐诗标题的绘制；

(3-2)以移动端基于矢量的中文田字格和拼音四线格为背景自适应布 局唐诗内容；

进一步包括如下步骤：

(3-2-1)根据标点符号正则式对唐诗内容进行分割，计算唐诗内容总 行数和各行字数，并据此判断唐诗的体裁，当唐诗的体裁为古诗时，顺序 执行步骤(3-2-2)，否则跳至步骤(3-2-3)；

(3-2-2)通过如下两种方法之一重新对唐诗内容进行分行布局，并得 到唐诗内容的行数及行最大字数；

方法一：设置行最大字数为7，遇到字数大于7的行则自动换行；

方法二：设置行最大字数为15，遇到相邻两行字数和小于15则置于同 一行，遇到字数大于15的行则自动换行；

(3-2-3)分别计算唐诗内容布局的面积比宽 度比以及高度比从而得到唐诗内容各行的 统一缩放比例δ_N＝min{V_S,V_W,V_H}；其中，R_WA为唐诗内容布局的实际宽度， R_HA为唐诗内容布局的实际高度，n为唐诗内容的行数，C_Nmax为唐诗内容 的行最大字数；

(3-2-4)计算唐诗内容每一行的绘制起始位置L_Nsi为：

$L_{Nsi}=(R_{WA}-C_j*100)*\frac{1}{2},$

其中，C_j为对应行的字数；

(3-2-5)根据汉字顺序，从唐诗内容每一行的绘制起始位置L_Nsi开始， 按照100*δ_N进行偏移，计算唐诗内容每一行的每一个字的绘制起始位置；

(3-2-6)利用中文田字格自适应显示模块和拼音四线格自适应显示模 块完成唐诗内容的绘制。

优选地，所述步骤(3-1-1)进一步包括如下步骤：

(3-1-1-1)将唐诗标题的总字数除以7后取整加1，得到分行数；

(3-1-1-2)判断分行数是否小于3，是则执行步骤(3-1-1-3)；否则将 分行数设置为3，执行步骤(3-1-1-4)；

(3-1-1-3)将唐诗标题的总字数除以分行数后取整加1，得到每行可分 配字数，判断每行可分配字数是否小于7，是则将第一行的可分配字数减1， 第二行的可分配字数加1，否则设置每行可分配字数为7，过程结束；

(3-1-1-4)将唐诗标题的总字数除以分行数后取整加1，得到每行可分 配字数，将第一行的可分配字数减2，第二行和第三行的可分配字数加1， 过程结束。

优选地，所述步骤(3-2-1)中，唐诗体裁的判断规则为：若唐诗内容 总行数为4且各行字数均为5则为五言绝句；若唐诗内容总行数为4且各 行字数均为7则为七言绝句；若唐诗内容总行数为8且各行字数均为5则 为五言律诗；若唐诗内容总行数为8且各行字数均为7则为七言律诗；其 它情况统一归类为古诗。

总体而言，通过本发明所构思的以上技术方案与现有技术相比，具有 以下有益效果：

(1)从绘制原理出发，自适应各类不同尺寸的移动端屏幕，无需针对 特定屏幕大小制作特定资源，能有效减少程序的大小与内容使用。

(2)采用基于矢量的绘制，能有效避免以图像方式缩放导致的模糊问 题。

(3)首先提出自适应不同体裁唐诗的拼音与田字格联合展示，填补了 应用空白。

附图说明

图1是本发明实施例的移动端唐诗自适应布局方法的流程图；

图2是建立移动端基于矢量的中文田字格自适应显示模块的流程图；

图3是移动端基于矢量的中文田字格自适应显示模块的实例图，其中， (a)为标准中文田字格，(b)为按照0.5的比例因子缩放后的中文田字格；

图4是建立移动端基于矢量的拼音四线格自适应显示模块的流程图；

图5是移动端基于矢量的拼音四线格自适应显示模块的实例图，其中， (a)为标准拼音四线格，(b)为按照0.5的比例因子缩放后的拼音四线格；

图6是唐诗标题以移动端基于矢量的中文田字格和拼音四线格为背景 自适应布局的流程图；

图7是唐诗内容以移动端基于矢量的中文田字格和拼音四线格为背景 自适应布局的流程图；

图8是唐诗以移动端基于矢量的中文田字格和拼音四线格为背景自适 应布局在手机上实现的效果图。

具体实施方式

为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图 及实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体 实施例仅仅用以解释本发明，并不用于限定本发明。此外，下面所描述的 本发明各个实施方式中所涉及到的技术特征只要彼此之间未构成冲突就可 以相互组合。

如图1所示，本发明实施例的移动端唐诗自适应布局方法包括如下步 骤：

(1)建立移动端基于矢量的中文田字格自适应显示模块；

如图2所示，进一步包括如下步骤：

(1-1)在移动端屏幕坐标系中选取四个顶点A(x,y)、B(x+100,y)、 C(x,y+100)和D(x+100,y+100)，得到四条矢量实线段和构 成四边形外边界，选取和的中点E(x+50,y)、F(x,y+50)、 G(x+50,y+100)和H(x+100,y+50)，得到两条矢量虚线段和构成中 心辅助线，从而得到标准中文田字格；其中，屏幕坐标系的原点为移动端 屏幕的左上角点，X轴与移动端屏幕的左侧边重合，方向向下，Y轴与移 动端屏幕的顶边重合，方向向右。

确定x和y的值后，就能通过画布的画线函数在移动端屏幕上绘制出标 准中文田字格。例如，选取x和y的值均为零，从移动端屏幕的左上角开始 绘制，得到标准中文田字格如图3(a)所示。

(1-2)设置汉字字体大小为72号，居中对齐，确定汉字在标准中文田 字格中绘制的基准点为W(x+75,y+50)。

其中，x+75说明汉字底部基准线在标准中文田字格中高为25的位置， y+50说明汉字在水平方向的绘制起点位于标准中文田字格的水平方向上 的中点，由于还设置了汉字居中对齐，汉字在水平方向上位于标准中文田 字格的中间位置。

(1-3)根据给定的缩放比例scale对标准中文田字格进行缩放，调整汉 字字体大小为72*scale号，居中对齐，确定汉字在缩放后的中文田字格中绘 制的基准点为W₁(x+75*scale,y+50*scale)，从而得到基于矢量的中文田 字格自适应显示模块。

缩放后的中文田字格中，四个顶点分别为A₁(x,y)、B₁(x+100*scale,y)、 C₁(x,y+100*scale)和D₁(x+100*scale,y+100*scale)，四个中点分别为 E₁(x+50*scal,e)、yF₁(x,y+50*scale)、G₁(x+50*scale,y+100*scale)和 H₁(x+100*scale,y+50*scale)。例如，选取scale＝0.5，缩放后的中文田 字格如图3(b)所示，其大小刚好是图3(a)中的标准中文田字格的一半。

(2)建立移动端基于矢量的拼音四线格自适应显示模块；

如图4所示，进一步包括如下步骤：

(2-1)在移动端屏幕坐标系中选取如下点A′(x′,y)、B′(x′,y+100)、 C′(x′+20,y)、D′(x′+20,y+100)、E′(x′+40,y)、F′(x′+40,y+100)、 G′(x′+60,y)和H′(x′+60,y+100)，得到四条矢量实线段和从而得到标准拼音四线格。其中，x′＝x-60。确定x′和y的值后， 就能通过画布的画线函数在移动端屏幕上绘制出标准拼音四线格。例如， 选取x′和y的值均为零，从移动端屏幕的左上角开始绘制，得到标准拼音 四线格如图5(a)所示。

(2-2)设置拼音字体大小为36号，居中对齐，确定拼音在标准拼音四 线格中绘制的基准点为P(x′+40,y+50)。

其中，x′+40说明拼音底部基准线在标准拼音四线格中高为20的位置， y+50说明拼音在水平方向上的绘制起点位于标准拼音四线格的水平方向 上的中点，由于还设置了拼音居中对齐，拼音在水平方向上位于标准拼音 四线格的中间位置。

(2-3)根据给定的缩放比例scale对标准拼音四线格进行缩放，调整拼 音字体大小为36*scale号，居中对齐，确定拼音在缩放后的拼音四线格中绘 制的基准点为P₁(x′+40*scale,y+50*scale)，从而得到基于矢量的拼音四 线格自适应显示模块。

缩放后的拼音四线格中，各线段端点坐标分别为A′₁(x′,y)、 B′₁(x′,y+100*scale)、C′₁(x′+20*scale,y)、D′₁(x′+20*scale,y+100*scale)、 E′₁(x′+40*scale,y)、F′₁(x′+40*scale,y+100*scale)、G′₁(x′+60*scale,y) 和H′₁(x′+60*scale,y+100*scale)。例如，选取scale＝0.5，缩放后的拼音 四线格如图5(b)所示，其大小刚好是图5(a)中的标准拼音四线格的一 半。

(3)以移动端基于矢量的中文田字格和拼音四线格为背景自适应布局 唐诗。

进一步包括如下步骤：

(3-1)以移动端基于矢量的中文田字格和拼音四线格为背景自适应布 局唐诗标题。

如图6所示，进一步包括如下步骤：

(3-1-1)根据唐诗标题的字数对唐诗标题分行布局；

进一步包括如下步骤：

(3-1-1-1)将唐诗标题的总字数除以7后取整加1，得到分行数；

(3-1-1-2)判断分行数是否小于3，是则执行步骤(3-1-1-3)；否则将 分行数设置为3，执行步骤(3-1-1-4)；

(3-1-1-3)将唐诗标题的总字数除以分行数后取整加1，得到每行可分 配字数，判断每行可分配字数是否小于7，是则将第一行的可分配字数减1， 第二行的可分配字数加1，否则设置每行可分配字数为7，过程结束；

(3-1-1-4)将唐诗标题的总字数除以分行数后取整加1，得到每行可分 配字数，将第一行的可分配字数减2，第二行和第三行的可分配字数加1， 过程结束。

(3-1-2)根据移动端屏幕分辨率的宽度R_W和唐诗标题分行中的最大可 分配字数C_Tmax计算唐诗标题各行的统一缩放比例δ_T为：

${\delta }_T=\frac{R_W-D_f}{C_{Tmax}*100},$

其中，D_f为预定的移动端屏幕空白位置大小。

(3-1-3)计算唐诗标题每一行的绘制起始位置L_Tsi为：

$L_{Tsi}=(R_W-D_f-C_i*100*{\delta }_T)*\frac{1}{2},$

其中，C_i为对应行的可分配字数。

(3-1-4)根据汉字顺序，从唐诗标题每一行的绘制起始位置L_Tsi开始， 按照100*δ_T进行偏移，计算唐诗标题每一行中的每一个字的绘制起始位置；

(3-1-5)利用中文田字格自适应显示模块和拼音四线格自适应显示模 块完成唐诗标题的绘制。

(3-2)以移动端基于矢量的中文田字格和拼音四线格为背景自适应布 局唐诗内容。

如图7所示，进一步包括如下步骤：

(3-2-1)根据标点符号(“。”、“！”、“？”)正则式对唐诗内容进行分 割，计算唐诗内容总行数和各行字数，并据此判断唐诗的体裁，当唐诗的 体裁为古诗时，顺序执行步骤(3-2-2)，否则跳至步骤(3-2-3)；

具体的判断规则为：若唐诗内容总行数为4且各行字数均为5则为五 言绝句；若唐诗内容总行数为4且各行字数均为7则为七言绝句；若唐诗 内容总行数为8且各行字数均为5则为五言律诗；若唐诗内容总行数为8 且各行字数均为7则为七言律诗；其它情况统一归类为“古诗”。

(3-2-2)通过如下两种方法之一重新对唐诗内容进行分行布局，并得 到唐诗内容的行数及行最大字数；

方法一：设置行最大字数为7，遇到字数大于7的行则自动换行；

方法二：设置行最大字数为15，遇到相邻两行字数和小于15则置于同 一行，遇到字数大于15的行则自动换行。

具体地，根据移动端屏幕的分辨率，选取通过方法一或方法二重新对 唐诗进行分行布局。其中，方法一适用于分辨率较小的移动端屏幕，方法 二适用于分辨率较大的移动端屏幕。

(3-2-3)分别计算唐诗内容布局的面积比宽 度比以及高度比从而得到唐诗内容各行的 统一缩放比例δ_N＝min{V_S,V_W,V_H}；其中，R_WA为唐诗内容布局的实际宽度， 为屏幕分辨率的宽度与预留宽度之差，R_HA为唐诗内容布局的实际高度，为 屏幕分辨率的高度与预留高度之差，n为唐诗内容的行数，C_Nmax为唐诗内 容的行最大字数；

(3-2-4)计算唐诗内容每一行的绘制起始位置L_Nsi为：

$L_{Nsi}=(R_{WA}-C_j*100)*\frac{1}{2},$

其中，C_j为对应行的字数；

(3-2-5)根据汉字顺序，从唐诗内容每一行的绘制起始位置L_Nsi开始， 按照100*δ_N进行偏移，计算唐诗内容每一行的每一个字的绘制起始位置；

(3-2-6)利用中文田字格自适应显示模块和拼音四线格自适应显示模 块完成唐诗内容的绘制。

按照上述方法将唐诗呈现在手机屏幕上的效果如图8所示，其中，手 机的屏幕分辨率为960*540像素。

本领域的技术人员容易理解，以上所述仅为本发明的较佳实施例而已， 并不用以限制本发明，凡在本发明的精神和原则之内所作的任何修改、等 同替换和改进等，均应包含在本发明的保护范围之内。