线条绘制方法、装置、电子设备及存储介质制造方法及图纸

本申请提供一种线条绘制方法、装置、电子设备及存储介质，该方法包括：获取基于目标折线的第一和第二单位向量确定的目标单位向量；在目标折线所在的目标平面、在目标单位向量对应的方向上顺时针或者逆时针旋转90度确定第一方向；根据目标单位向量、目标向量和预设宽度，确定偏移长度，目标向量为第一或第二单位向量；根据目标折线的折线点、第一方向、与第一方向相反的第二方向和偏移长度确定第一和第二目标顶点；根据目标折线的起点对应的第一和第二顶点、目标折线的终点对应的第三和第四顶点、第一和第二目标顶点，绘制对应的三角形面，以模拟具有预设宽度的折线。本申请可以模拟具有预设宽度的、交界处经过处理的折线，提升绘制效果。制效果。制效果。

【技术实现步骤摘要】
线条绘制方法、装置、电子设备及存储介质


[0001]本申请涉及计算机图像绘制
，尤其涉及一种线条绘制方法、装置、电子设备及存储介质。

技术介绍

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

技术实现思路

[0007]本申请实施例提供了一种线条绘制方法、装置、电子设备及存储介质，以解决现有技术中在绘制有宽度的线条时存在的无法对线条交界处进行处理，影响绘制效果的问题。
[0008]第一方面，本申请实施例提供了一种线条绘制方法，包括：
[0009]获取目标折线对应的目标单位向量，所述目标单位向量基于所述目标折线的第一线段对应的第一单位向量、所述目标折线的第二线段对应的第二单位向量确定；
[0010]在所述目标折线所在的目标平面，在所述目标单位向量对应的方向上顺时针或者逆时针旋转90度确定第一方向；
[0011]根据所述目标单位向量、目标向量以及预设宽度，确定偏移长度，所述目标向量为所述第一单位向量或所述第二单位向量；
[0012]根据所述目标折线的折线点、所述第一方向、与所述第一方向相反的第二方向以
及所述偏移长度，确定第一目标顶点和第二目标顶点；
[0013]根据所述目标折线的起点对应的第一顶点和第二顶点、所述目标折线的终点对应的第三顶点和第四顶点、所述第一目标顶点和所述第二目标顶点，绘制对应的三角形面，以模拟具有所述预设宽度的折线。
[0014]第二方面，本申请实施例提供了一种线条绘制装置，包括：
[0015]获取模块，用于获取目标折线对应的目标单位向量，所述目标单位向量基于所述目标折线的第一线段对应的第一单位向量、所述目标折线的第二线段对应的第二单位向量确定；
[0016]第一确定模块，用于在所述目标折线所在的目标平面，在所述目标单位向量对应的方向上顺时针或者逆时针旋转90度确定第一方向；
[0017]第二确定模块，用于根据所述目标单位向量、目标向量以及预设宽度，确定偏移长度，所述目标向量为所述第一单位向量或所述第二单位向量；
[0018]第三确定模块，用于根据所述目标折线的折线点、所述第一方向、与所述第一方向相反的第二方向以及所述偏移长度，确定第一目标顶点和第二目标顶点；
[0019]第一处理模块，用于根据所述目标折线的起点对应的第一顶点和第二顶点、所述目标折线的终点对应的第三顶点和第四顶点、所述第一目标顶点和所述第二目标顶点，绘制对应的三角形面，以模拟具有所述预设宽度的折线。
[0020]第三方面，本申请实施例提供了一种电子设备，包括处理器、存储器及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述计算机程序被所述处理器执行时实现如上述第一方面所述的线条绘制方法的步骤。
[0021]第四方面，本申请实施例提供了一种计算机可读存储介质，所述计算机可读存储介质上存储计算机程序，所述计算机程序被处理器执行时实现如上述第一方面所述的线条绘制方法的步骤。
[0022]本申请实施例技术方案，在基于目标折线的第一线段对应的第一单位向量、目标折线的第二线段对应的第二单位向量确定目标单位向量之后，在目标折线所在的目标平面上根据目标单位向量的向量方向确定第一方向，根据目标单位向量、目标向量以及预设宽度确定偏移长度，在第一方向上基于目标折线的折线点和偏移长度确定第一目标顶点、在与第一方向的方向相反的第二方向上基于目标折线的折线点和偏移长度确定第二目标顶点，根据目标折线的起点对应的第一顶点和第二顶点、目标折线的终点对应的第三顶点和第四顶点、第一目标顶点和第二目标顶点，绘制对应的三角形面，模拟出具有预设宽度的、交界处经过处理的折线，可以提升绘制效果以及绘制效率，优化了用户体验。
附图说明
[0023]图1a表示两条有宽度的线条在交界处无法处理的一具体示意；
[0024]图1b表示两个宽线在交界处未处理的2D户型图；
[0025]图2表示本申请实施例提供的线条绘制方法的示意图；
[0026]图3表示本申请实施例提供的确定目标单位向量以及第一方向的示意图；
[0027]图4表示本申请实施例提供的计算偏移长度的原理示意图；
[0028]图5表示本申请实施例提供的基于顶点生成目标多边形的示意图；
[0029]图6表示本申请实施例提供的分割三角形面的示意图；
[0030]图7表示本申请实施例提供的折线拐角处经过处理的2D户型图；
[0031]图8表示本申请实施例提供的线条绘制装置的示意图；
[0032]图9表示本申请实施例提供的电子设备结构示意图。
具体实施方式
[0033]下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。
[0034]应理解，说明书通篇中提到的“一个实施例”或“一实施例”意味着与实施例有关的特定特征、结构或特性包括在本申请的至少一个实施例中。因此，在整个说明书各处出现的“在一个实施例中”或“在一实施例中”未必一定指相同的实施例。此外，这些特定的特征、结构或特性可以任意适合的方式结合在一个或多个实施例中。
[0035]在本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种线条绘制方法，其特征在于，包括：获取目标折线对应的目标单位向量，所述目标单位向量基于所述目标折线的第一线段对应的第一单位向量、所述目标折线的第二线段对应的第二单位向量确定；在所述目标折线所在的目标平面，在所述目标单位向量对应的方向上顺时针或者逆时针旋转90度确定第一方向；根据所述目标单位向量、目标向量以及预设宽度，确定偏移长度，所述目标向量为所述第一单位向量或所述第二单位向量；根据所述目标折线的折线点、所述第一方向、与所述第一方向相反的第二方向以及所述偏移长度，确定第一目标顶点和第二目标顶点；根据所述目标折线的起点对应的第一顶点和第二顶点、所述目标折线的终点对应的第三顶点和第四顶点、所述第一目标顶点和所述第二目标顶点，绘制对应的三角形面，以模拟具有所述预设宽度的折线。2.根据权利要求1所述的线条绘制方法，其特征在于，所述方法还包括：根据所述目标折线的起点坐标和折线点坐标确定所述第一单位向量；根据所述目标折线的折线点坐标和终点坐标确定所述第二单位向量；其中，所述第一线段为所述目标折线的起点和折线点对应的线段，所述第二线段为所述目标折线的折线点和终点对应的线段。3.根据权利要求1所述的线条绘制方法，其特征在于，所述获取目标折线对应的目标单位向量，包括：获取所述第一单位向量和所述第二单位向量相加对应的中间向量；对所述中间向量进行向量单位化处理，获取所述目标单位向量。4.根据权利要求1所述的线条绘制方法，其特征在于，所述方法还包括：在与所述第一线段垂直且经过所述目标折线的起点的第一直线上，以所述目标折线的起点为基准，向两侧分别延伸所述预设宽度的二分之一，确定所述第一顶点和所述第二顶点；在与所述第二线段垂直且经过所述目标折线的终点的第二直线上，以所述目标折线的终点为基准，向两侧分别延伸所述预设宽度的二分之一，确定所述第三顶点和所述第四顶点。5.根据权利要求1所述的线条绘制方法，其特征在于，所述根据所述目标单位向量、目标向量以及预设宽度，确定偏移长度，包括：根据所述目标单位向量和所述目标向量的点积确定第一数值；根据所述预设宽度的二分之一与所述第一数值之比，确定所述偏移长度；其中，所述第一数值为目标角度的余弦值，所述目标角度为所述目标单位向量和所述目标向量之间的角度，且为所述第一方向与垂直于所述目标向量的目标直线的夹角，所述目标直线经过所述目标折线的折线点，所述预设宽度的二分之一与所述目标角度的余弦值之比为所述偏移长度。6.根据权利要求1所述的线条绘制方法，其特征在于，所述根据所述目标折线的折线点、所述第一...

【专利技术属性】
技术研发人员：ꢀ七四专利代理机构，
申请(专利权)人：北京城市网邻信息技术有限公司，
类型：发明
国别省市：