线条绘制方法、装置、电子设备及存储介质与流程

1.本技术涉及计算机图像绘制技术领域，尤其涉及一种线条绘制方法、装置、电子设备及存储介质。


背景技术：

2.3d绘图协议(web graphics library，webgl)是一个javascript应用程序编程接口(application programming interface，api)，可在任何兼容的web浏览器中渲染高性能的交互式3d图形和2d图形，而无需使用插件。
3.three.js是javascript编写的基于原生webgl封装运行的第三方库。threejs对webgl进行了封装，使得前端开发人员能够轻松进行web 3d开发，降低了使用门槛，同时大大提升了效率。
4.webgl的绘制模式有点、线、面三种，通过点的绘制可以实现粒子系统等，通过线可以绘制一些连线关系，通过面可以绘制所有的三维对象。然而，webgl在绘制线的时候，存在一个缺陷，那就是线宽只能设置为1，而不能设置成其他值。所以无论线宽设置为多少，最终绘制出来的只有一像素。即使在移动端可以设置有宽度的线，但是在拐弯处原生api没有做任何处理，所以往往达不到项目需求。
5.在three.js中可使用绘制平面矩形来模拟有宽度的线。但只能根据两个点来画出一条线，如果是多个点的情况下，以3个点为例，只能根据其中的两个点画出一条宽线(即用矩形模拟宽线)，3个点画出两条独立的直线，两条直线的相交处无法处理，具体可参见图1a所示。在绘制场景下，由于两条宽线在交界处没有处理，会导致绘制效果不佳，影响用户体验。如，参见图1b所示，在绘制2d户型图时，两个宽线在交界处没有处理，会出现毛刺或缺失的情况。
6.由此可见，目前在绘制有宽度的线条时存在无法对线条交界处进行处理，影响绘制效果的问题。


技术实现要素：

7.本技术实施例提供了一种线条绘制方法、装置、电子设备及存储介质，以解决现有技术中在绘制有宽度的线条时存在的无法对线条交界处进行处理，影响绘制效果的问题。
8.第一方面，本技术实施例提供了一种线条绘制方法，包括：
9.获取目标折线对应的目标单位向量，所述目标单位向量基于所述目标折线的第一线段对应的第一单位向量、所述目标折线的第二线段对应的第二单位向量确定；
10.在所述目标折线所在的目标平面，在所述目标单位向量对应的方向上顺时针或者逆时针旋转90度确定第一方向；
11.根据所述目标单位向量、目标向量以及预设宽度，确定偏移长度，所述目标向量为所述第一单位向量或所述第二单位向量；
12.根据所述目标折线的折线点、所述第一方向、与所述第一方向相反的第二方向以
及所述偏移长度，确定第一目标顶点和第二目标顶点；
13.根据所述目标折线的起点对应的第一顶点和第二顶点、所述目标折线的终点对应的第三顶点和第四顶点、所述第一目标顶点和所述第二目标顶点，绘制对应的三角形面，以模拟具有所述预设宽度的折线。
14.第二方面，本技术实施例提供了一种线条绘制装置，包括：
15.获取模块，用于获取目标折线对应的目标单位向量，所述目标单位向量基于所述目标折线的第一线段对应的第一单位向量、所述目标折线的第二线段对应的第二单位向量确定；
16.第一确定模块，用于在所述目标折线所在的目标平面，在所述目标单位向量对应的方向上顺时针或者逆时针旋转90度确定第一方向；
17.第二确定模块，用于根据所述目标单位向量、目标向量以及预设宽度，确定偏移长度，所述目标向量为所述第一单位向量或所述第二单位向量；
18.第三确定模块，用于根据所述目标折线的折线点、所述第一方向、与所述第一方向相反的第二方向以及所述偏移长度，确定第一目标顶点和第二目标顶点；
19.第一处理模块，用于根据所述目标折线的起点对应的第一顶点和第二顶点、所述目标折线的终点对应的第三顶点和第四顶点、所述第一目标顶点和所述第二目标顶点，绘制对应的三角形面，以模拟具有所述预设宽度的折线。
20.第三方面，本技术实施例提供了一种电子设备，包括处理器、存储器及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述计算机程序被所述处理器执行时实现如上述第一方面所述的线条绘制方法的步骤。
21.第四方面，本技术实施例提供了一种计算机可读存储介质，所述计算机可读存储介质上存储计算机程序，所述计算机程序被处理器执行时实现如上述第一方面所述的线条绘制方法的步骤。
22.本技术实施例技术方案，在基于目标折线的第一线段对应的第一单位向量、目标折线的第二线段对应的第二单位向量确定目标单位向量之后，在目标折线所在的目标平面上根据目标单位向量的向量方向确定第一方向，根据目标单位向量、目标向量以及预设宽度确定偏移长度，在第一方向上基于目标折线的折线点和偏移长度确定第一目标顶点、在与第一方向的方向相反的第二方向上基于目标折线的折线点和偏移长度确定第二目标顶点，根据目标折线的起点对应的第一顶点和第二顶点、目标折线的终点对应的第三顶点和第四顶点、第一目标顶点和第二目标顶点，绘制对应的三角形面，模拟出具有预设宽度的、交界处经过处理的折线，可以提升绘制效果以及绘制效率，优化了用户体验。
附图说明
23.图1a表示两条有宽度的线条在交界处无法处理的一具体示意；
24.图1b表示两个宽线在交界处未处理的2d户型图；
25.图2表示本技术实施例提供的线条绘制方法的示意图；
26.图3表示本技术实施例提供的确定目标单位向量以及第一方向的示意图；
27.图4表示本技术实施例提供的计算偏移长度的原理示意图；
28.图5表示本技术实施例提供的基于顶点生成目标多边形的示意图；
29.图6表示本技术实施例提供的分割三角形面的示意图；
30.图7表示本技术实施例提供的折线拐角处经过处理的2d户型图；
31.图8表示本技术实施例提供的线条绘制装置的示意图；
32.图9表示本技术实施例提供的电子设备结构示意图。
具体实施方式
33.下面将结合本技术实施例中的附图，对本技术实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本技术一部分实施例，而不是全部的实施例。基于本技术中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本技术保护的范围。
34.应理解，说明书通篇中提到的“一个实施例”或“一实施例”意味着与实施例有关的特定特征、结构或特性包括在本技术的至少一个实施例中。因此，在整个说明书各处出现的“在一个实施例中”或“在一实施例中”未必一定指相同的实施例。此外，这些特定的特征、结构或特性可以任意适合的方式结合在一个或多个实施例中。
35.在本技术的各种实施例中，应理解，下述各过程的序号的大小并不意味着执行顺序的先后，各过程的执行顺序应以其功能和内在逻辑确定，而不应对本技术实施例的实施过程构成任何限定。
36.本技术针对目前在绘制有宽度的线条时存在的无法对线条交界处进行处理，影响绘制效果的问题，提供了一种基于webgl绘制有宽度的折线的方法，基本思想就是利用三角形来绘制线，将一根有宽度的线，看成是多个三角形的拼接。本技术提供的绘制有宽度的折线的方法可以用于户型图绘制，也可作为独立的底层插件用于任何webgl项目中，业务开发人员只需要直接调用使用即可，无需关注细节，提升了开发效率。
37.下面对本技术实施例提供的线条绘制方法进行介绍，参见图2所示，该方法包括：
38.步骤201、获取目标折线对应的目标单位向量，所述目标单位向量基于所述目标折线的第一线段对应的第一单位向量、所述目标折线的第二线段对应的第二单位向量确定。
39.本技术提供的线条绘制方法，首先针对线宽设置为1的目标折线获取其对应的目标单位向量，目标折线包括第一线段和与第一线段形成特定角度(区别于180度)的第二线段。在获取目标单位向量时，需要基于第一线段确定其对应的第一单位向量、基于第二线段确定其对应的第二单位向量，然后根据第一单位向量和第二单位向量确定目标折线对应的目标单位向量。
40.步骤202、在所述目标折线所在的目标平面，在所述目标单位向量对应的方向上顺时针或者逆时针旋转90度确定第一方向。
41.在确定目标单位向量之后，在目标折线所在的目标平面，以目标单位向量对应的方向为基准，顺时针或者逆时针旋转90度确定第一方向，在确定第一方向时，也可以确定与第一方向的方向相反的第二方向。如，在目标单位向量对应的方向上顺时针旋转90度确定第一方向、逆时针旋转90度确定第二方向；或者，在目标单位向量对应的方向上顺时针或者逆时针旋转90度确定第一方向、将第一方向的反方向确定为第二方向。
42.参见图3所示，基于第一单位向量a和第二单位向量b确定目标单位向量c，在确定目标单位向量c之后，在目标单位向量c对应的方向上顺时针旋转90度确定第一方向、在目
标单位向量c对应的方向上逆时针旋转90度确定第二方向。或者，在目标单位向量c对应的方向上顺时针或者逆时针旋转90度确定第一方向、根据第一方向的反方向确定第二方向。
43.步骤203、根据所述目标单位向量、目标向量以及预设宽度，确定偏移长度，所述目标向量为所述第一单位向量或所述第二单位向量。
44.在确定第一方向之后，根据目标单位向量、目标向量以及预设宽度，采用预设计算策略确定出偏移长度，其中目标向量可以为第一单位向量或第二单位向量。
45.步骤204、根据所述目标折线的折线点、所述第一方向、与所述第一方向相反的第二方向以及所述偏移长度，确定第一目标顶点和第二目标顶点。
46.在确定第一方向以及偏移长度之后，根据目标折线的折线点、第一方向以及偏移长度确定第一目标顶点，根据目标折线的折线点、第二方向以及偏移长度确定第二目标顶点，第一目标顶点与第二目标顶点的连线与目标单位向量的向量方向垂直。
47.步骤205、根据所述目标折线的起点对应的第一顶点和第二顶点、所述目标折线的终点对应的第三顶点和第四顶点、所述第一目标顶点和所述第二目标顶点，绘制对应的三角形面，以模拟具有所述预设宽度的折线。
48.在确定第一目标顶点与第二目标顶点之后，基于目标折线的起点对应的第一顶点和第二顶点、目标折线的终点对应的第三顶点和第四顶点，以及第一目标顶点和第二目标顶点，可以构建多边形，在多边形内绘制对应的三角形面，以模拟具有预设宽度的折线。
49.其中，目标折线的起点对应的第一顶点和第二顶点、目标折线的终点对应的第三顶点和第四顶点基于相同的策略确定，第一顶点、第二顶点与目标折线的起点之间的距离为预设宽度的二分之一，相应的，第三顶点、第四顶点与目标折线的终点之间的距离为预设宽度的二分之一。
50.本技术上述实施过程，在基于目标折线的第一线段对应的第一单位向量、目标折线的第二线段对应的第二单位向量确定目标单位向量之后，在目标折线所在的目标平面上根据目标单位向量的向量方向确定第一方向，根据目标单位向量、目标向量以及预设宽度确定偏移长度，在第一方向上基于目标折线的折线点和偏移长度确定第一目标顶点、在与第一方向的方向相反的第二方向上基于目标折线的折线点和偏移长度确定第二目标顶点，根据目标折线的起点对应的第一顶点和第二顶点、目标折线的终点对应的第三顶点和第四顶点、第一目标顶点和第二目标顶点，绘制对应的三角形面，模拟出具有预设宽度的、交界处经过处理的折线，可以提升绘制效果以及绘制效率，优化了用户体验。
51.下面对获取目标单位向量的过程进行介绍。在获取目标单位向量之前，需要获取目标折线的第一线段对应的第一单位向量以第二线段对应的第二单位向量。目标折线的第一线段为目标折线的起点和折线点对应的线段，目标折线的第二线段为目标折线的折线点和终点对应的线段。在确定第一单位向量和第二单位向量时，根据所述目标折线的起点坐标和折线点坐标确定所述第一单位向量；根据所述目标折线的折线点坐标和终点坐标确定所述第二单位向量。
52.由于目标折线的第一线段为目标折线的起点和折线点对应的线段，在确定第一线段对应的第一单位向量时，基于目标折线的起点坐标和折线点坐标确定第一线段对应的第一向量，然后对第一向量进行处理得到对应的第一单位向量，具体可以为计算第一向量与向量模的比值，得到所需的第一单位向量。其中，第一向量由目标折线的起点指向折线点，
因此，在计算第一向量时，计算折线点横坐标与起点横坐标之差、计算折线点纵坐标与起点纵坐标之差。
53.相应的，由于目标折线的第二线段为目标折线的折线点和终点对应的线段，在确定第二线段对应的第二单位向量时，基于目标折线的折线点坐标和终点坐标确定第二线段对应的第二向量，然后计算第二向量与向量模的比值，得到所需的第二单位向量。第二向量由目标折线的折线点指向终点，因此，在计算第二向量时，计算终点横坐标与折线点横坐标之差、计算终点纵坐标与折线点纵坐标之差。
54.在确定第一单位向量以及第二单位向量之后，获取目标折线对应的目标单位向量时，包括：获取所述第一单位向量和所述第二单位向量相加对应的中间向量；对所述中间向量进行向量单位化处理，获取所述目标单位向量。
55.在获取第一线段对应的第一单位向量以及第二线段对应的第二单位向量之后，将第一单位向量与第二单位向量进行相加，得到一中间向量，然后对得到的中间向量进行单位化处理，具体为除以向量模，得到目标单位向量。
56.本技术上述实施过程，基于第一线段对应的起点和终点确定第一单位向量、基于第二线段对应的起点和终点确定第二单位向量，在确定两个单位向量之后，对基于两个单位向量相加确定的中间向量进行单位化处理，获取目标单位向量，可以便于后续基于目标单位向量、第一单位向量、第二单位向量进行运算。
57.下面对确定目标折线的起点对应的第一顶点和第二顶点、目标折线的终点对应的第三顶点和第四顶点的过程进行介绍。在确定第一顶点和第二顶点时，在与所述第一线段垂直且经过所述目标折线的起点的第一直线上，以所述目标折线的起点为基准，向两侧分别延伸所述预设宽度的二分之一，确定所述第一顶点和所述第二顶点；在确定第三顶点和第四顶点时，在与所述第二线段垂直且经过所述目标折线的终点的第二直线上，以所述目标折线的终点为基准，向两侧分别延伸所述预设宽度的二分之一，确定所述第三顶点和所述第四顶点。
58.针对确定第一顶点和第二顶点的过程而言，做垂直于第一线段且经过第一线段的起点(目标折线的起点)的第一直线，即，第一线段的起点位于第一直线上；然后以第一线段的起点为基准，在第一直线上分别向两侧延伸预设宽度的二分之一，确定第一顶点和第二顶点。相应地，针对确定第三顶点和第四顶点的过程而言，做垂直于第二线段且经过第二线段的终点(目标折线的终点)的第二直线，即，第二线段的终点位于第二直线上；然后以第二线段的终点为基准，在第二直线上分别向两侧延伸预设宽度的二分之一，确定第三顶点和第四顶点。
59.通过以预设宽度的二分之一为延伸距离，可以使得第一顶点与第二顶点之间的距离为预设宽度、第三顶点与第四顶点之间的距离为预设宽度，以实现绘制预设宽度的折线。
60.下面对确定偏移长度的过程进行介绍，在根据所述目标单位向量、目标向量以及预设宽度，确定偏移长度时，包括：根据所述目标单位向量和所述目标向量的点积确定第一数值；根据所述预设宽度的二分之一与所述第一数值之比，确定所述偏移长度；其中，所述第一数值为目标角度的余弦值，所述目标角度为所述目标单位向量和所述目标向量之间的角度，且为所述第一方向与垂直于所述目标向量的目标直线的夹角，所述目标直线经过所述目标折线的折线点，所述预设宽度的二分之一与所述目标角度的余弦值之比为所述偏移
长度。
61.在确定偏移长度时，需要根据目标单位向量和目标向量的点积确定第一数值，由于目标单位向量和目标向量的点积等于两个向量模相乘后与目标角度的余弦值的乘积，两个向量为单位向量，模相乘为1，因此第一数值为目标角度的余弦值，这里的目标角度为目标单位向量和目标向量之间的夹角角度。
62.目标角度同样为第一方向与垂直于目标向量的目标直线之间的夹角，预设宽度的二分之一与目标角度的余弦值之比为偏移长度，因此，在确定第一数值之后，基于预设宽度的二分之一与第一数值之比，可以确定偏移长度。需要说明的是，本实施例中目标折线的折线点可作为第一单位向量和第二单位向量相加时对应的公共起点。
63.下面通过一示意图对上述过程进行介绍，参见图4所示，目标向量为第二单位向量b，图4中的θ为目标角度，为目标单位向量c与第二单位向量b之间的夹角，由于第一单位向量a和第二单位向量b为单位向量，目标角度同时为目标单位向量c与第一单位向量a之间的夹角。其中，图4中的向量d(与向量b的起点相同、对应的长度不同)为第二单位向量对应的初始向量，即基于目标折线的折线点与目标折线的终点确定的第二向量，直线f为基于目标折线的第二线段确定的第二直线。与第二单位向量垂直的目标直线(图4中的虚线直线)与第一方向(目标单位向量c顺时针旋转确定)之间的夹角为目标角度，目标直线与直线f平行，可以以目标折线的折线点为起点，在目标直线上截取预设宽度的二分之一，通过计算预设宽度的二分之一与偏移长度之比，可以确定目标角度的余弦值，因此，基于预设宽度的二分之一与第一数值之比，确定偏移长度。
64.本技术上述实施过程，可以基于向量之间的夹角关系以及预设宽度的二分之一，推导出偏移长度的计算方式，进而基于计算方式获取偏移长度。
65.在确定出偏移长度之后，可以根据目标折线的折线点、第一方向、与第一方向相反的第二方向以及偏移长度，确定第一目标顶点和第二目标顶点，具体为：在所述第一方向上，以所述目标折线的折线点为基准延伸所述偏移长度确定所述第一目标顶点；在所述第二方向上，以所述目标折线的折线点为基准延伸所述偏移长度确定所述第二目标顶点；其中，所述目标折线的折线点在所述第一方向上。
66.在确定目标单位向量之后，在目标折线所在的目标平面上、以目标单位向量对应的方向为基准顺时针旋转90度或者逆时针旋转90度可以确定第一方向，且目标折线的折线点在第一方向上，本实施例中以顺时针旋转90度确定第一方向为例进行阐述。
67.在确定偏移长度、第一方向以及与第一方向方向相反的第二方向之后，在第一方向上，以目标折线的折线点为基准延伸偏移长度确定第一目标顶点，在第二方向上，以目标折线的折线点为基准延伸偏移长度确定第二目标顶点。如，参见图4所示，m1为在第一方向上确定的第一目标顶点、m2为在第二方向上确定的第二目标顶点。
68.在确定第一目标顶点和第二目标顶点之后，根据所述目标折线的起点对应的第一顶点和第二顶点、所述目标折线的终点对应的第三顶点和第四顶点、所述第一目标顶点和所述第二目标顶点，绘制对应的三角形面，以模拟具有所述预设宽度的折线时，包括：将所述第一目标顶点与所述第一顶点、所述第三顶点连接，将所述第二目标顶点与所述第二顶点、所述第四顶点连接，连接所述第一顶点和所述第二顶点、连接所述第三顶点和所述第四顶点，生成目标多边形；根据所述目标多边形的多个顶点，在所述目标多边形内分割对应的
三角形面，以绘制具有所述预设宽度的折线；其中，所述第一目标顶点、所述第一顶点和所述第三顶点位于所述目标单位向量所在方向的一侧，所述第二目标顶点、所述第二顶点和所述第四顶点位于所述目标单位向量所在方向的另一侧。
69.本实施例中，第一目标顶点、第一顶点和第三顶点位于目标单位向量所在方向的一侧，第二目标顶点、第二顶点和第四顶点位于目标单位向量所在方向的另一侧，且第一顶点、第一目标顶点和第三顶点依次排列，第二顶点、第二目标顶点和第四顶点依次排列。在绘制对应的三角形面时，将第一目标顶点分别与第一顶点、第三顶点连接，将第二目标顶点分别与第二顶点、第四顶点连接，并连接第一顶点和第二顶点、第三顶点和第四顶点，生成目标多边形。参见图5所示，将第一目标顶点m1分别与第一顶点p1、第三顶点n1连接，将第二目标顶点m2分别与第二顶点p2、第四顶点n2连接，并连接第一顶点p1和第二顶点p2、第三顶点n1和第四顶点n2，基于顶点连接确定目标多边形。其中图5中的向量e为基于目标折线的起点与目标折线的折线点确定的初始向量(第一向量)，向量d为基于目标折线的折线点与目标折线的终点确定的初始向量(第二向量)。
70.在确定目标多边形之后，在目标多边形内基于预设规则分割对应的三角形面，以绘制具有预设宽度的折线。如参见图6所示，目标折线的起点为p，目标折线的折线点为c，目标折线的终点为n，第一目标顶点为m1，第二目标顶点为m2，第一顶点为p1、第三顶点为n1，第二顶点为p2，第四顶点为n2，p、c、n三点的连线对应于目标折线。在确定目标多边形之后，连接第一顶点为p1和第二目标顶点为m2、连接第四顶点为n2和第一目标顶点为m1、连接第一目标顶点为m1和第二目标顶点为m2，实现在目标多边形内进行三角形面分割，以绘制在线条交界处经过处理的具有预设宽度的折线。
71.本技术上述实施过程，在确定第一方向、第二方向以及偏移长度之后，可以以目标折线的折线点为基准，在第一方向和第二方向上基于偏移长度确定第一目标顶点和第二目标顶点，基于第一目标顶点、第二目标顶点、第一顶点、第二顶点、第三顶点以及第四顶点，确定目标多边形，在目标多边形内分割三角形面，以实现绘制在线条交界处经过处理的具有预设宽度的折线。
72.通过应用本技术的具有预设宽度的线条绘制方法，在绘制2d户型图时，折线拐角处不再有毛刺，非常顺滑，符合户型图墙壁特点，具体可参见图7所示。
73.以上为本技术实施例提供的线条绘制方法的整体实施过程，在基于目标折线的第一线段对应的第一单位向量、目标折线的第二线段对应的第二单位向量确定目标单位向量之后，在目标折线所在的目标平面上根据目标单位向量的向量方向确定第一方向，根据目标单位向量、目标向量以及预设宽度确定偏移长度，在第一方向上基于目标折线的折线点和偏移长度确定第一目标顶点、在与第一方向的方向相反的第二方向上基于目标折线的折线点和偏移长度确定第二目标顶点，根据目标折线的起点对应的第一顶点和第二顶点、目标折线的终点对应的第三顶点和第四顶点、第一目标顶点和第二目标顶点，绘制对应的三角形面，模拟出具有预设宽度的、交界处经过处理的折线，可以提升绘制效果以及绘制效率，优化了用户体验。
74.进一步地，通过向量之间的夹角关系以及预设宽度的二分之一，推导出偏移长度的计算方式，可以基于计算方式获取偏移长度；在确定偏移方向以及偏移长度之后，确定第一目标顶点和第二目标顶点，基于确定的顶点确定目标多边形，在目标多边形内分割三角
形面，以实现绘制在线条交界处经过处理的具有预设宽度的折线。
75.本技术实施例还提供一种线条绘制装置，参见图8所示，所述装置包括：
76.获取模块801，用于获取目标折线对应的目标单位向量，所述目标单位向量基于所述目标折线的第一线段对应的第一单位向量、所述目标折线的第二线段对应的第二单位向量确定；
77.第一确定模块802，用于在所述目标折线所在的目标平面，在所述目标单位向量对应的方向上顺时针或者逆时针旋转90度确定第一方向；
78.第二确定模块803，用于根据所述目标单位向量、目标向量以及预设宽度，确定偏移长度，所述目标向量为所述第一单位向量或所述第二单位向量；
79.第三确定模块804，用于根据所述目标折线的折线点、所述第一方向、与所述第一方向相反的第二方向以及所述偏移长度，确定第一目标顶点和第二目标顶点；
80.第一处理模块805，用于根据所述目标折线的起点对应的第一顶点和第二顶点、所述目标折线的终点对应的第三顶点和第四顶点、所述第一目标顶点和所述第二目标顶点，绘制对应的三角形面，以模拟具有所述预设宽度的折线。
81.可选地，所述装置还包括：
82.第四确定模块，用于根据所述目标折线的起点坐标和折线点坐标确定所述第一单位向量；
83.第五确定模块，用于根据所述目标折线的折线点坐标和终点坐标确定所述第二单位向量；
84.其中，所述第一线段为所述目标折线的起点和折线点对应的线段，所述第二线段为所述目标折线的折线点和终点对应的线段。
85.可选地，所述获取模块包括：
86.第一获取子模块，用于获取所述第一单位向量和所述第二单位向量相加对应的中间向量；
87.第二获取子模块，用于对所述中间向量进行向量单位化处理，获取所述目标单位向量。
88.可选地，所述装置还包括：
89.第二处理模块，用于在与所述第一线段垂直且经过所述目标折线的起点的第一直线上，以所述目标折线的起点为基准，向两侧分别延伸所述预设宽度的二分之一，确定所述第一顶点和所述第二顶点；
90.第三处理模块，用于在与所述第二线段垂直且经过所述目标折线的终点的第二直线上，以所述目标折线的终点为基准，向两侧分别延伸所述预设宽度的二分之一，确定所述第三顶点和所述第四顶点。
91.可选地，所述第二确定模块包括：
92.第一确定子模块，用于根据所述目标单位向量和所述目标向量的点积确定第一数值；
93.第二确定子模块，用于根据所述预设宽度的二分之一与所述第一数值之比，确定所述偏移长度；
94.其中，所述第一数值为目标角度的余弦值，所述目标角度为所述目标单位向量和
所述目标向量之间的角度，且为所述第一方向与垂直于所述目标向量的目标直线的夹角，所述目标直线经过所述目标折线的折线点，所述预设宽度的二分之一与所述目标角度的余弦值之比为所述偏移长度。
95.可选地，所述第三确定模块包括：
96.第三确定子模块，用于在所述第一方向上，以所述目标折线的折线点为基准延伸所述偏移长度确定所述第一目标顶点；
97.第四确定子模块，用于在所述第二方向上，以所述目标折线的折线点为基准延伸所述偏移长度确定所述第二目标顶点；
98.其中，所述目标折线的折线点在所述第一方向上。
99.可选地，所述第一处理模块包括：
100.生成子模块，用于将所述第一目标顶点与所述第一顶点、所述第三顶点连接，将所述第二目标顶点与所述第二顶点、所述第四顶点连接，连接所述第一顶点和所述第二顶点、连接所述第三顶点和所述第四顶点，生成目标多边形；
101.处理子模块，用于根据所述目标多边形的多个顶点，在所述目标多边形内分割对应的三角形面，以绘制具有所述预设宽度的折线；
102.其中，所述第一目标顶点、所述第一顶点和所述第三顶点位于所述目标单位向量所在方向的一侧，所述第二目标顶点、所述第二顶点和所述第四顶点位于所述目标单位向量所在方向的另一侧。
103.对于装置实施例而言，由于其与方法实施例基本相似，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。
104.本技术实施例还提供了一种电子设备，包括：处理器，存储器，存储在存储器上并可在处理器上运行的计算机程序，该计算机程序被处理器执行时实现上述线条绘制方法实施例的各个过程，且能达到相同的技术效果，为避免重复，这里不再赘述。
105.举例如下，图9示出了一种电子设备的实体结构示意图。如图9所示，该电子设备可以包括：处理器(processor)910、通信接口(communications interface)920、存储器(memory)930和通信总线940，其中，处理器910，通信接口920，存储器930通过通信总线940完成相互间的通信。处理器910可以调用存储器930中的逻辑指令，处理器910用于执行以下步骤：获取目标折线对应的目标单位向量，所述目标单位向量基于所述目标折线的第一线段对应的第一单位向量、所述目标折线的第二线段对应的第二单位向量确定；在所述目标折线所在的目标平面，在所述目标单位向量对应的方向上顺时针或者逆时针旋转90度确定第一方向；根据所述目标单位向量、目标向量以及预设宽度，确定偏移长度，所述目标向量为所述第一单位向量或所述第二单位向量；根据所述目标折线的折线点、所述第一方向、与所述第一方向相反的第二方向以及所述偏移长度，确定第一目标顶点和第二目标顶点；根据所述目标折线的起点对应的第一顶点和第二顶点、所述目标折线的终点对应的第三顶点和第四顶点、所述第一目标顶点和所述第二目标顶点，绘制对应的三角形面，以模拟具有所述预设宽度的折线。处理器910还可以执行本技术实施例中的其他方案，这里不再进一步阐述。
106.此外，上述的存储器930中的逻辑指令可以通过软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本
申请的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本技术各个实施例所述方法的全部或部分步骤。
107.本技术实施例还提供了一种计算机可读存储介质，计算机可读存储介质上存储有计算机程序，计算机程序被处理器执行时实现上述线条绘制方法实施例的各个过程，且能达到相同的技术效果，为避免重复，这里不再赘述。其中，所述的计算机可读存储介质，如只读存储器(read-only memory，简称rom)、随机存取存储器(random access memory，简称ram)、磁碟或者光盘等。
108.需要说明的是，在本文中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者装置不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者装置所固有的要素。在没有更多限制的情况下，由语句“包括一个
……”
限定的要素，并不排除在包括该要素的过程、方法、物品或者装置中还存在另外的相同要素。
109.通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本技术的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质(如rom/ram、磁碟、光盘)中，包括若干指令用以使得一台终端(可以是手机，计算机，服务器，空调器，或者网络设备等)执行本技术各个实施例所述的方法。
110.上面结合附图对本技术的实施例进行了描述，但是本技术并不局限于上述的具体实施方式，上述的具体实施方式仅仅是示意性的，而不是限制性的，本领域的普通技术人员在本技术的启示下，在不脱离本技术宗旨和权利要求所保护的范围情况下，还可做出很多形式，均属于本技术的保护之内。
111.本领域普通技术人员可以意识到，结合本技术实施例中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、或者计算机软件和电子硬件的结合来实现。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本技术的范围。
112.所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的系统、装置和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。
113.在本技术所提供的实施例中，应该理解到，所揭露的装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。
114.所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个
网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。
115.另外，在本技术各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。
116.所述功能如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本技术的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本技术各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：u盘、移动硬盘、rom、ram、磁碟或者光盘等各种可以存储程序代码的介质。
117.以上所述，仅为本技术的具体实施方式，但本技术的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本技术揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本技术的保护范围之内。因此，本技术的保护范围应以权利要求的保护范围为准。