CN107292938A - 一种生成虚圆滑曲线的方法和装置 - Google Patents

Abstract

本发明公开了一种生成虚圆滑曲线的方法和装置，该方法包括：获取原始点的位置；根据获取的所有原始点的位置，计算贝塞尔曲线控制点的位置，利用原始点的位置和控制点的位置绘制贝塞尔曲线；在绘制贝塞尔曲线过程中，计算每两个相邻的原始点对应的曲线上虚线段和实线段的位置；根据曲线段上虚线段和实线段的位置，将虚线段位置的线条样式设置为第一线条样式，将实线段位置的线条样式设置为第二线条样式，从而得到虚圆滑曲线并输出。本发明基于贝塞尔曲线实现，由于贝塞尔曲线本身是光滑的，所以就把原始点用光滑的曲线连接了起来，并且在曲线上虚线段出现的位置设置虚线样式从而实现了绘制虚圆滑曲线的效果。

Description

一种生成虚圆滑曲线的方法和装置

技术领域

本发明涉及计算机技术领域，具体涉及一种生成虚圆滑曲线的方法和装置。

背景技术

网页布局是CSS(Cascading Style Sheets，层叠样式表)的一个重点应用。网页布局的传统解决方案是盒状模型，盒状模型依赖display属性+position属性+float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C提出了一种新的方案--Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，Flex布局已经得到了所有浏览器的支持。Flex(Flexible Box，弹性布局)用来为盒状模型提供最大的灵活性。

实际使用过程中，有些项目需要实现虚圆滑曲线的效果。现有方案在Flex技术中实现曲线比较容易，实现折线虚线也较简单，但是还没有实现虚圆滑曲线的办法，无法满足用户在某些应用场景下的使用需求。

发明内容

本发明提供了一种生成虚圆滑曲线的方法和装置，以解决现有Flex中无法绘制虚圆滑曲线，无法满足用户的使用需求的问题。

为了达到上述目的，本发明的技术方案是这样实现的：

根据本发明的一个方面，提供了一种生成虚圆滑曲线的方法，该方法包括

获取原始点的位置；

根据获取的所有原始点的位置，计算贝塞尔曲线控制点的位置，利用原始点的位置和控制点的位置绘制贝塞尔曲线；

在绘制贝塞尔曲线过程中，计算每两个相邻的原始点对应的曲线段上虚线段和实线段的位置；

根据曲线段上虚线段和实线段的位置，将虚线段位置的线条样式设置为第一线条样式，将实线段位置的线条样式设置为第二线条样式，从而得到虚圆滑曲线并输出。

可选地，计算每相邻两个原始点对应的曲线段上虚线段和实线段的位置包括：

计算所有原始点中每相邻两个原始点确定的线段的直线距离，将所有直线距离相加，得到所有原始点连线的总长度；

计算当前的两个相邻原始点的直线距离；

利用所有原始点连线的总长度除以当前的两个相邻原始点的直线距离得到长度系数；

将当前的两个相邻原始点对应的曲线段均等分为预定数量的线段，并以长度系数作为实线段和虚线段的步长累加，分别计算当前曲线段上虚线段和实线段的位置。

可选地，将虚线段位置的线条样式设置为第一线条样式，将实线段位置的线条样式设置为第二线条样式包括：

将虚线段位置的线条设置成颜色、粗细以及透明度参数值均为零的第一线条样式；

将实线段位置的线条设置成颜色、粗细以及透明度参数值均为非零阈值的第二线条样式。

可选地，根据所有原始点的位置，计算贝塞尔曲线控制点的位置，利用原始点的位置和控制点的位置绘制贝塞尔曲线包括：

计算所有原始点中每相邻两个原始点确定的线段的中点；

把相邻中点连成的线段平移到对应的原始点；

将平移后的中点的位置作为控制点的位置，并以相邻原始点、控制点分段绘制贝塞尔曲线。

根据本发明的另一个方面，提供了一种生成虚圆滑曲线的装置，该装置包括：

原始点获取单元，用于获取原始点的位置；

曲线确定单元，用于根据原始点获取单元获取到的所有原始点的位置，计算贝塞尔曲线控制点的位置，利用原始点的位置和控制点的位置绘制贝塞尔曲线；

位置计算单元，用于在绘制贝塞尔曲线过程中，计算每两个相邻的原始点对应的曲线段上虚线段和实线段的位置；

虚圆滑曲线生成单元，用于根据曲线段上虚线段和实线段的位置，将虚线段位置的线条样式设置为第一线条样式，将实线段位置的线条样式设置为第二线条样式，从而得到虚圆滑曲线并输出。

可选地，位置计算单元，具体用于计算所有原始点中每相邻两个原始点确定的线段的直线距离，将所有直线距离相加，得到所有原始点连线的总长度；

计算当前的两个相邻原始点的直线距离；利用所有原始点连线的总长度除以当前的两个相邻原始点的直线距离得到长度系数；将当前的两个相邻原始点对应的曲线段均等分为预定数量的线段，并以长度系数作为实线段和虚线段的步长累加，分别计算当前曲线段上虚线段和实线段的位置。

可选地，虚圆滑曲线生成单元，具体用于将虚线段位置的线条设置成颜色、粗细以及透明度参数值均为零的第一线条样式；

将实线段位置的线条设置成颜色、粗细以及透明度参数值均为非零阈值的第二线条样式。

可选地，曲线确定单元，具体用于计算所有原始点中每相邻两个原始点确定的线段的中点；

把相邻中点连成的线段平移到对应的原始点；

将平移后的中点的位置作为控制点的位置，并以相邻原始点、控制点分段绘制贝塞尔曲线。

本发明的有益效果是：本发明的这种生成虚圆滑曲线的方法和装置，根据获取的原始点的位置计算贝塞尔曲线控制点的位置，根据原始点的位置以及控制点的位置绘制经过已知的原始点的贝塞尔曲线。在绘制贝塞尔曲线的过程中，计算每一段曲线上虚线段和实线段分别对应的位置，然后就虚线段位置的线条设置为第一线条样式，并将实线段位置的线条设置为第二样式，由于贝塞尔曲线本身是圆滑的，所以就可以把已知的原始点用圆滑曲线连接起来。另外，在绘制贝塞尔曲线时交替设置虚线段和实线段的样式，并且保证线段间距相等，从而生成等间隔的虚圆滑曲线。

附图说明

图1是本发明一个实施例的一种生成虚圆滑曲线的方法的流程示意图；

图2a是本发明一个实施例的一种不均匀虚圆滑曲线的示意图；

图2b是本发明一个实施例的一种均匀虚圆滑曲线的示意图；

图3是本发明一个实施例的一种生成虚圆滑曲线的装置的框图。

具体实施方式

本发明的设计构思是：本申请的发明人在使用Flex时发现，目前在Flex中实现平滑曲线比较容易，实现折线虚线也较简单，但是不能实现虚圆滑曲线，更没有实现等间隔的虚圆滑曲线的解决方案。针对这一现状，本申请提供了一种生成虚圆滑曲线的方法和装置，本实施例首先绘制通过原始点的贝塞尔曲线，然后在绘制贝塞尔曲线时交替设置虚线段和实线段的样式，并且保证线段的间隔相等，从而在Flex技术中绘制出虚圆滑曲线以及等间隔的虚圆滑曲线。

以下结合具体的实施例对本发明提供的生成虚圆滑曲线的方法和装置进行详细说明。

实施例一

图1是本发明一个实施例的一种生成虚圆滑曲线的方法的流程示意图，参见图1，该方法包括下列步骤S11至步骤S14：

步骤S11，获取原始点的位置；

实际应用时，需要预先获取原始点的位置坐标，然后根据这些已知原始点的位置坐标绘制经过这些原始点的贝塞尔曲线。这里的原始点的位置可以是用户输入的，也可以是其他应用传送的。

步骤S12，根据获取的所有原始点的位置，计算贝塞尔曲线控制点的位置，利用原始点的位置和控制点的位置绘制贝塞尔曲线；

贝塞尔曲线(Bézier curve)，又称贝兹曲线或贝济埃曲线，是应用于二维图形应用程序的数学曲线。它是依据四个位置任意的点坐标绘制出的一条光滑曲线，贝塞尔曲线必定通过首尾两个点，称为端点(也称锚点)，中间两个点虽然未必要通过，但却起到牵制曲线形状路径的作用，称作控制点。通过调整控制点，可以使贝塞尔曲线的形状发生变化。

步骤S13，在绘制贝塞尔曲线过程中，计算每两个相邻的原始点对应的曲线段上虚线段和实线段的位置；

步骤S14，根据曲线段上虚线段和实线段的位置，将虚线段位置的线条样式设置为第一线条样式，将实线段位置的线条样式设置为第二线条样式，从而得到虚圆滑曲线并输出。

通过图1所示的方法，根据获取的所有原始点的位置计算贝塞尔曲线控制点的位置，然后根据相邻原始点的位置以及控制点绘制贝塞尔曲线，在绘制贝塞尔曲线的过程中，计算每相邻的两个原始点对应的曲线段上的实线段和虚线段出现的位置，然后将虚线段出现的位置线条样式的关键参数值都设置为零，并将实线段位置的线条样式的关键参数值设为非零阈值，这样就可以得到经过所有已知原始点的虚圆滑曲线。

实施例二

本实施例中重点是对利用该生成虚圆滑曲线的方法绘制等间隔的虚圆滑曲线进行说明，其他内容参见本发明的其他实施例。

需要说明的是，在Flex中绘制贝塞尔曲线时，虚线段的画法其实是在画线时，隔段交替设置线条样式stroke.apply(g)和g.lineStyle(0,0,0)。折线虚线画法比较简单，是将两个原始点之间的长线段按照直线分成若干短线段，然后交替变换线条样式。但是，虚圆滑曲线绘制不能将虚折线的实现方法和曲线的实现方法合并到一起，而必须结合曲线的实现方法以及前述虚线段的画法来绘制。

本实施例中，在获取到所有原始点的位置后，根据所有原始点的位置，计算贝塞尔曲线控制点的位置，利用原始点的位置和控制点的位置绘制贝塞尔曲线。

具体的，先计算所有原始点中每相邻两个原始点确定的线段的中点；然后把相邻中点连成的线段平移到对应的原始点；这里的平移是将中点连成的线段向外平移到与对应的原始点相切的位置。最后，将平移后的中点的位置作为控制点的位置，并以相邻原始点、控制点分段绘制贝塞尔曲线。这里，是将两个原始点作为端点绘制三次贝塞尔曲线，并由控制点控制三次贝塞尔曲线的形状。

图2a是本发明一个实施例的一种不均匀虚圆滑曲线的示意图，图2b是本发明一个实施例的一种均匀虚圆滑曲线的示意图；图2b中的等间隔的虚圆滑曲线绘制具体包括以下步骤和过程：

步骤1，生成贝塞尔曲线的控制点

步骤1.1，计算每两个相邻原始点的中点。部分代码示意如下：

步骤1.2，把相邻中点连成的线段平移到对应的原始点。部分代码示意如下：

步骤2，以步骤1中的原始点、控制点画贝塞尔曲线

步骤2.1，平移后的中点作为控制点，相邻原始点为起始点画贝塞尔曲线。

部分代码示意如下：

绘制时需要先确定每相邻两个原始点对应的曲线段上虚线段和实线段的位置。计算所有原始点中每相邻两个原始点确定的线段的直线距离，将所有直线距离相加，得到所有原始点连线的总长度；

计算当前的两个相邻原始点的直线距离；

利用所有原始点连线的总长度除以当前的两个相邻原始点的直线距离得到长度系数；

将当前的两个相邻原始点对应的曲线段均等分为预定数量的线段，并以长度系数作为实线段和虚线段的步长累加，分别计算当前曲线段上虚线段和实线段的位置。

结合上述代码以及图2b，在本实施例中，确定虚线段和实线段的位置包括：

a.计算所有原始点中每相邻两个原始点的线段的长度，并求和得到总长度计为totalLen，计算当前两个相邻原始点之间的距离并记为towOriginLen，然后计算(totalLen*10)/(towOriginLen*24)的值，作为长度系数。这里的数值10和24是本实施例的应用场景中选取的参数，在其他实施例中可以为其他数值，对此不做限制。

b.将相邻原始点对应的曲线段等分成200小段，以a中的长度系数作为实线段和虚线段的步长累加，计算到哪个点应该画实线段，哪个点应该画虚线段。

c.以0.005为最小绘制步长，以b中计算到的点作为变换线条样式的起始点。

举例而言，某两个相邻原始点对应的贝塞尔曲线上的一段曲线可以分为200小段，而根据长度系数以及最小绘制步长计算后从曲线段的第0个子线段开始绘制实线，然后间隔为10个子线段的长度，那么从第0个子线段到第10个子线段的位置线条的样式设置为实线段的样式(如通过stroke.apply(g)函数调用线条对象g设置线条样式)，从第11到20个子线段的位置线条的样式设置虚线段的样式，即设置g.lineStyle(0,0,0)。其中，这里的(0,0,0)可分别对应线条颜色、线条粗细以及线条的透明度。

本实施例中，由于在绘制贝塞尔曲线时是根据每条曲线段的长度确定的长度系数，进而确定该曲线段上应该变换样式的点，从而能够保证每条曲线段上的虚线和实线的线段间隔相等。

三次贝塞尔曲线的代码实现如下：

步骤2.2，画贝塞尔曲线时，通过交替变换线段的线条颜色、粗细和透明度来实现虚线效果。

本实施例中，可以将虚线段位置的线条设置成颜色、粗细以及透明度参数值均为0；并将实线段位置的线条设置成颜色、粗细以及透明度参数值均为非0阈值。其中，线条样式变换部分代码示意如下：

结合图2a和图2b，对本实施例生成的虚圆滑曲线进行说明。图2a是利用本实施例的生成虚圆滑曲线的方法绘制的不均匀的虚圆滑曲线，由图2a中曲线21上两处箭头所指示的位置可以看出，这两个位置的曲线段上线段的间距不等，低处的这一曲线段上的两个线段的间距比高处曲线段上的两个线段的间距大。

图2b是利用本实施例的生成虚圆滑曲线的方法绘制的不均匀的虚圆滑曲线，由图2b中曲线22上两处箭头所指示的位置可以看出，这两个位置曲线段上的线段的间距相等，并且可以看出整个曲线22上，每一段曲线上的线段的间距都是相等的，从而实现了等间隔虚圆滑曲线的绘制。

实施例三

图3是本发明一个实施例的一种生成虚圆滑曲线的装置的框图，参见图3，该生成虚圆滑曲线的装置30包括：

原始点获取单元301，用于获取原始点的位置；

曲线确定单元302，用于根据原始点获取单元301获取到的所有原始点的位置，计算贝塞尔曲线控制点的位置，利用原始点的位置和控制点的位置绘制贝塞尔曲线；

位置计算单元303，用于在绘制贝塞尔曲线过程中，计算每两个相邻的原始点对应的曲线段上虚线段和实线段的位置；

虚圆滑曲线生成单元304，用于根据曲线段上虚线段和实线段的位置，将虚线段位置的线条样式设置为第一线条样式，将实线段位置的线条样式设置为第二线条样式，从而得到虚圆滑曲线并输出。

本实施例中位置计算单元303，具体用于计算所有原始点中每相邻两个原始点确定的线段的直线距离，将所有直线距离相加，得到所有原始点连线的总长度；计算当前的两个相邻原始点的直线距离；利用所有原始点连线的总长度除以当前的两个相邻原始点的直线距离得到长度系数；将当前的两个相邻原始点对应的曲线段均等分为预定数量的线段，并以长度系数作为实线段和虚线段的步长累加，分别计算当前曲线段上虚线段和实线段的位置。

本实施例中虚圆滑曲线生成单元304，具体用于将虚线段位置的线条设置成颜色、粗细以及透明度参数值均为零的第一线条样式；将实线段位置的线条设置成颜色、粗细以及透明度参数值均为非零阈值的第二线条样式。

本实施例中曲线确定单元302，具体用于计算所有原始点中每相邻两个原始点确定的线段的中点；把相邻中点连成的线段平移到对应的原始点；将平移后的中点的位置作为控制点的位置，并以相邻原始点、控制点分段绘制贝塞尔曲线。

需要说明的是，本实施例中的生成虚圆滑曲线的装置的工作过程是与前述生成虚圆滑曲线的方法的实现步骤相对应的，因而本实施例没有描述的生成虚圆滑曲线的装置工作过程可以参见本发明前述实施例中对生成虚圆滑曲线的方法步骤的相关说明，在此不再赘述。

综上所述，本发明的这种生成虚圆滑曲线的方法和装置，根据获取的原始点的位置计算贝塞尔曲线控制点的位置，根据原始点的位置以及控制点的位置绘制经过已知的原始点的贝塞尔曲线。在绘制贝塞尔曲线的过程中，计算每一段曲线上虚线段和实线段分别对应的位置，然后就虚线段位置的线条设置为第一线条样式，并将实线段位置的线条设置为第二样式，由于贝塞尔曲线本身是圆滑的，所以就可以把已知的原始点用圆滑曲线连接起来。另外，在绘制贝塞尔曲线时，交替设置虚线段和实线段的样式，并且保证线段间距相等，从而生成了等间隔的虚圆滑曲线。

以上所述仅为本发明的较佳实施例而已，并非用于限定本发明的保护范围。凡在本发明的精神和原则之内所作的任何修改、等同替换、改进等，均包含在本发明的保护范围内。

Claims (8)

1.一种生成虚圆滑曲线的方法，其特征在于，该方法包括：

获取原始点的位置；

根据获取的所有原始点的位置，计算贝塞尔曲线控制点的位置，利用所述原始点的位置和控制点的位置绘制贝塞尔曲线；

在绘制贝塞尔曲线过程中，计算每两个相邻的原始点对应的曲线段上虚线段和实线段的位置；

根据所述曲线段上虚线段和实线段的位置，将虚线段位置的线条样式设置为第一线条样式，将实线段位置的线条样式设置为第二线条样式，从而得到虚圆滑曲线并输出。

2.根据权利要求1所述的方法，其特征在于，所述计算每相邻两个原始点对应的曲线段上虚线段和实线段的位置包括：

计算所有原始点中每相邻两个原始点确定的线段的直线距离，将所有直线距离相加，得到所有原始点连线的总长度；

计算当前的两个相邻原始点的直线距离；

利用所有原始点连线的总长度除以当前的两个相邻原始点的直线距离得到长度系数；

将当前的两个相邻原始点对应的曲线段均等分为预定数量的线段，并以所述长度系数作为实线段和虚线段的步长累加，分别计算当前曲线段上虚线段和实线段的位置。

3.根据权利要求1或2所述的方法，其特征在于，所述将虚线段位置的线条样式设置为第一线条样式，将实线段位置的线条样式设置为第二线条样式包括：

将虚线段位置的线条设置成颜色、粗细以及透明度参数值均为零的第一线条样式；

将实线段位置的线条设置成颜色、粗细以及透明度参数值均为非零阈值的第二线条样式。

4.根据权利要求3所述的方法，其特征在于，所述根据所有原始点的位置，计算贝塞尔曲线控制点的位置，利用所述原始点的位置和控制点的位置绘制贝塞尔曲线包括：

计算所有原始点中每相邻两个原始点确定的线段的中点；

把相邻中点连成的线段平移到对应的原始点；

将平移后的中点的位置作为控制点的位置，并以相邻原始点、控制点分段绘制贝塞尔曲线。

5.一种生成虚圆滑曲线的装置，其特征在于，该装置包括：

原始点获取单元，用于获取原始点的位置；

曲线确定单元，用于根据所述原始点获取单元获取到的所有原始点的位置，计算贝塞尔曲线控制点的位置，利用所述原始点的位置和控制点的位置绘制贝塞尔曲线；

位置计算单元，用于在绘制贝塞尔曲线过程中，计算每两个相邻的原始点对应的曲线段上虚线段和实线段的位置；

虚圆滑曲线生成单元，用于根据所述曲线段上虚线段和实线段的位置，将虚线段位置的线条样式设置为第一线条样式，将实线段位置的线条样式设置为第二线条样式，从而得到虚圆滑曲线并输出。

6.根据权利要求5所述的装置，其特征在于，

所述位置计算单元，具体用于计算所有原始点中每相邻两个原始点确定的线段的直线距离，将所有直线距离相加，得到所有原始点连线的总长度；

计算当前的两个相邻原始点的直线距离；利用所有原始点连线的总长度除以当前的两个相邻原始点的直线距离得到长度系数；将当前的两个相邻原始点对应的曲线段均等分为预定数量的线段，并以所述长度系数作为实线段和虚线段的步长累加，分别计算当前曲线段上虚线段和实线段的位置。

7.根据权利要求5或6所述的装置，其特征在于，

所述虚圆滑曲线生成单元，具体用于将虚线段位置的线条设置成颜色、粗细以及透明度参数值均为零的第一线条样式；

将实线段位置的线条设置成颜色、粗细以及透明度参数值均为非零阈值的第二线条样式。

8.根据权利要求7所述的装置，其特征在于，

所述曲线确定单元，具体用于计算所有原始点中每相邻两个原始点确定的线段的中点；

把相邻中点连成的线段平移到对应的原始点；

将平移后的中点的位置作为控制点的位置，并以相邻原始点、控制点分段绘制贝塞尔曲线。