CN108984835A - 一种跨平台3d户型绘制方法、装置及系统 - Google Patents

Abstract

本发明公开了家装设计中一种跨平台3D户型绘制方法、装置及系统，根据用户所选择的户型图绘制标准户型，再添加门窗等标准模型，并设置好区域属性，在3D视图下查看户型，本发明免去了安装客户端的麻烦，可以跨平台使用，便于3D户型设计，同时，不限制字体，文件占用空间小，下载也很快；颜色选择范围广，图像在屏幕上总是边缘清晰，可以任意缩放图像显示，而不会破坏图像的清晰度、细节等。

Description

一种跨平台3D户型绘制方法、装置及系统

技术领域

本发明涉及家装设计领域，特别是一种跨平台3D户型图绘制方法、装置及系统。

背景技术

在现代家装设计领域中，较多软件都能够进行3D模型的设计和3D模型的展示，但大多需要借助相应软件来实现，需要安装客户端，使用繁琐，不能跨平台使用，且对适用人群具有一定的技术要求。同时，图形格式也多种多样，但大多只能显示安装了的字体，文件占用空间大，颜色选择范围不够广，图像边缘模糊，在缩放图像时，往往会破坏图像的清晰度、细节等。

发明内容

为解决上述问题，本发明的目的在于提供一种跨平台3D户型绘制方法、装置及系统，基于WebGL技术和SVG图像显示格式，WebGL可以为HTML5Canvas提供硬件3D加速渲染，这样设计人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，显然，WebGL技术免去了安装客户端的麻烦，可以跨平台使用，便于3D户型设计。

SVG可缩放矢量图形(ScalableVectorGraphics)是基于可扩展标记语言(XML)，用于描述二维矢量图形的一种图形格式。SVG是W3C(“WorldWideWebConSortium”即“国际互联网标准组织”)在2000年8月制定的一种新的二维矢量图形格式，也是规范中的网络矢量图形标准。SVG严格遵从XML语法，并用文本格式的描述性语言来描述图像内容，因此是一种和图像分辨率无关的矢量图形格式。SVG图形格式具有以下优点：SVG图像中的文字独立于图像，文字保留可编辑和可搜寻的状态，也不会再有字体的限制，用户系统即使没有安装某一字体，也会看到和他们制作时完全相同的画面；总体来讲，SVG文件比那些GIF和JPEG格式的文件要小很多，因而下载也很快；SVG图像提供一个1600万种颜色的调色板，支持ICC颜色描述文件标准、RGB、线X填充、渐变和蒙版；SVG图像在屏幕上总是边缘清晰，它的清晰度适合任何屏幕分辨率和打印分辨率；用户可以任意缩放图像显示，而不会破坏图像的清晰度、细节等；目前常见的浏览器也都支持SVG格式图像。

本发明解决其问题所采用的技术方案是：

一种跨平台3D户型绘制方法，其特征在于，包括以下步骤：

A、上传户型图；

B、绘制墙体，生成标准户型；

C、添加标准模型，并设置区域属性；

D、通过WebGL引擎绘制3D户型图，并以SVG格式呈现绘制完成的3D户型图。

进一步，用户通过以下步骤上传户型图：

A1、进入设计页面，触发上传户型图指令；

A2、选择并打开户型图文件；

A3、所述户型图文件以图片的形式显示。

进一步，所述步骤B包括以下步骤：

B1、进入绘制页面；

B2、调整户型图至合适位置和大小；

B3、绘制一面与户型图相同尺寸的模型墙体，确定户型图比例；

B4、退出编辑，删除模型墙体；

B5、绘制户型图，设置墙体属性或直接删除墙体；

B6、绘制完成所有墙体，生成标准户型。

进一步，所述步骤B1会显示系统提示，触发系统提示确认指令后进入步骤B2；通过滚动鼠标中键缩放户型图，按住鼠标中键移动户型图从而调整户型图至合适位置和大小；通过将鼠标移动到墙体的一端，点击左键，再移动鼠标到该墙体的另一端，点击左键，在弹出的对话框中输入户型图标注的尺寸，点击确定从而绘制一面与户型图相同尺寸的墙体；通过鼠标右键单击墙体，在弹出的对话框中通过点击删除按钮删除不要的墙体。

进一步，所述步骤C包括以下步骤：

C1、从模型库中添加标准模型，并保持和户型图一致；

C2、设置空间区域属性，选择显示或隐藏户型图信息。

进一步，所述模型库已有的标准模型包括门窗、卫浴、床柜，所述标准模型也可以通过绘制模型并添加到所述模型库生成；通过调整模型的位置和切换模型的方向，获得和户型图一致的设计；通过触发空间区域属性设置指令，从而设置空间区域的高度和名称，选择隐藏或显示3D视图下的房顶；通过触发系统设置指令，从而选择显示或隐藏户型图的尺寸、空间区域信息、文字标注、底图、背景网络。

进一步，所述步骤D中，绘制完成后，以SVG格式呈现绘制完成的2D户型图；通过触发3D指令，WebGL引擎绘制3D户型图，以SVG格式呈现绘制好的3D户型图。

一种应用跨平台3D户型绘制方法的装置，其特征在于，包括：

上传模块：用于上传户型图；

绘制模块：用于绘制墙体，生成标准户型；

设置模块：用于添加标准模型，并设置属性；

展示模块：用于通过WebGL引擎绘制3D户型图，并以SVG格式呈现绘制完成的3D户型图。

一种跨平台3D户型绘制系统，其特征在于，包括控制模块和存储控制指令的存储模块，控制模块读取所述指令执行以下步骤：

A、上传户型图；

B、绘制墙体，生成标准户型；

C、添加门窗等模型，并设置区域属性；

D、WebGL引擎绘制3D户型图，并以SVG格式呈现绘制完成的3D户型图。

本发明的有益效果是：本发明采用的一种跨平台3D户型绘制方法、装置及系统，通过WebGL提供硬件3D加速渲染，通过SVG图像格式用文本格式的描述性语言来描述图像内容；对比起现有技术的做法，本发明免去了安装客户端的麻烦，可以跨平台使用，便于3D户型设计，同时，不会再有字体的限制，用户系统即使没有安装某一字体，也会看到和他们制作时完全相同的画面；文件占用空间小，下载快；颜色选择范围广，图像在屏幕上总是边缘清晰，可以任意缩放图像显示，而不会破坏图像的清晰度、细节等。

附图说明

下面结合附图和实例对本发明作进一步说明。

图1是本发明一种跨平台3D户型绘制方法的流程图；

图2是本发明一种跨平台3D户型绘制方法步骤A的流程图；

图3是本发明一种跨平台3D户型绘制方法步骤B的流程图；

图4是本发明一种跨平台3D户型绘制方法步骤C的流程图；

图5是本发明一种跨平台3D户型绘制方法步骤D的流程图；

图6是本发明一种应用跨平台3D户型绘制方法的装置的模块方框图；

图7是本发明一种应用跨平台3D户型绘制方法的装置的上传模块方框图；

图8是本发明一种应用跨平台3D户型绘制方法的装置的绘制模块方框图；

图9是本发明一种应用跨平台3D户型绘制方法的装置的设置模块方框图；

图10是本发明一种应用跨平台3D户型绘制方法的装置的展示模块方框图。

具体实施方式

参照图1～5所示，本发明提供一种跨平台3D户型绘制方法，其特征在于，包括以下步骤：

A、上传户型图；

B、绘制墙体，生成标准户型；

C、添加标准模型，并设置区域属性；

D、通过WebGL引擎绘制3D户型图，并以SVG格式呈现绘制完成的3D户型图。

进一步，用户通过以下步骤上传户型图：

A1、进入设计页面，触发上传户型图指令；

A2、选择并打开户型图文件；

A3、所述户型图文件以图片的形式显示。

进一步，所述步骤B包括以下步骤：

B1、进入绘制页面；

B2、调整户型图至合适位置和大小；

B3、绘制一面与户型图相同尺寸的模型墙体，确定户型图比例；

B4、退出编辑，删除模型墙体；

B5、绘制户型图，设置墙体属性或直接删除墙体；

B6、绘制完成所有墙体，生成标准户型。

进一步，所述步骤B1会显示系统提示，触发系统提示确认指令后进入步骤B2；通过滚动鼠标中键缩放户型图，按住鼠标中键移动户型图从而调整户型图至合适位置和大小；通过将鼠标移动到墙体的一端，点击左键，再移动鼠标到该墙体的另一端，点击左键，在弹出的对话框中输入户型图标注的尺寸，点击确定从而绘制一面与户型图相同尺寸的墙体；通过鼠标右键单击墙体，在弹出的对话框中设置墙体的尺寸、高度、厚度、透明度、是否为承重墙，设置墙体为显示状态或隐藏状态，通过点击删除按钮删除不要的墙体。

可选的，所述步骤B3中确定户型图比例通过选择户型图中的标准模型，并设置所述标准模型的尺寸实现。

进一步，所述步骤C包括以下步骤：

C1、从模型库中添加标准模型，并保持和户型图一致；

C2、设置空间区域属性，选择显示或隐藏户型图信息。

进一步，所述模型库已有的标准模型包括门窗、卫浴、床柜，所述标准模型也可以通过绘制模型并添加到所述模型库生成；通过调整模型的位置和切换模型的方向，获得和户型图一致的设计；通过触发空间区域属性设置指令，从而设置空间区域的高度和名称，选择隐藏或显示3D视图下的房顶；通过触发系统设置指令，从而选择显示或隐藏户型图的尺寸、空间区域信息、文字标注、底图、背景网络。

进一步，所述步骤D中，绘制完成后，以SVG格式呈现绘制完成的2D户型图；触发3D指令后，通过WebGL引擎绘制3D户型图，并以SVG格式呈现绘制完成的3D户型图；通过触发2D指令或3D指令，将呈现方式切换为2D户型图或3D户型图。

参照图6～10所示，一种应用跨平台3D户型绘制方法的装置，其特征在于，包括：

上传模块：用于上传户型图；

绘制模块：用于绘制墙体，生成标准户型；

设置模块：用于添加标准模型，并设置属性；

展示模块：用于通过WebGL引擎绘制3D户型图，并以SVG格式呈现绘制完成的3D户型图。

进一步，所述上传模块包括：

触发模块：用于触发上传户型图指令；

读取模块：用于选择并打开户型图文件；

显示模块：用于将所述户型图文件以图片的形式显示。

进一步，所述绘制模块包括：

提示模块：用于显示绘制户型图的操作指南；

尺寸设置模块：用于设置尺寸数据；

墙体设置模块：用于设置墙体属性或直接删除墙体。

进一步，所述设置模块包括：

属性设置模块：用于设置空间区域属性；

系统设置模块：用于选择显示或隐藏户型图信息。

进一步，所述展示模块包括：

2D展示模块：用于以SVG格式呈现绘制完成的2D户型图；

3D绘制模块：用于通过WebGL引擎绘制3D户型图；

3D展示模块：用于以SVG格式呈现绘制好的3D户型图。

一种跨平台3D户型绘制系统，其特征在于，包括控制模块和存储控制指令的存储模块，控制模块读取所述指令执行以下步骤：

A、上传户型图；

B、绘制墙体，生成标准户型；

C、添加门窗等模型，并设置区域属性；

D、WebGL引擎绘制3D户型图，并以SVG格式呈现绘制完成的3D户型图。

以上所述，只是本发明的较佳实施例而已，本发明并不局限于上述实施方式，只要其以相同的手段达到本发明的技术效果，都应属于本发明的保护范围。

Claims (9)

1.一种跨平台3D户型绘制方法，其特征在于，包括以下步骤：

A、上传户型图；

B、绘制墙体，生成标准户型图；

C、添加标准模型，并设置属性；

D、通过WebGL引擎绘制3D户型图，并以SVG格式呈现绘制完成的3D户型图。

2.根据权利要求1所述的一种跨平台3D户型绘制方法，其特征在于，用户通过以下步骤上传户型图：

A1、进入设计页面，触发上传户型图指令；

A2、选择并打开户型图文件；

A3、所述户型图文件以图片的形式显示。

3.根据权利要求1所述的一种跨平台3D户型绘制方法，其特征在于，所述步骤B包括以下步骤：

B1、进入绘制页面；

B2、调整户型图位置和大小；

B3、绘制一面与户型图相同尺寸的模型墙体，确定户型图比例；

B4、退出编辑，删除模型墙体；

B5、绘制户型图，设置墙体属性或直接删除墙体；

B6、绘制完成所有墙体，生成标准户型。

4.根据权利要求3所述的一种跨平台3D户型绘制方法，其特征在于，所述步骤B1触发显示绘制户型图的操作指南，触发系统提示确认指令后进入步骤B2；通过触发户型图调整指令，从而调整户型图的位置和大小；通过触发墙体设置指令，在弹出的对话框中输入户型图标注的尺寸，完成设置后通过触发确定指令从而绘制与户型图相同尺寸的墙体，通过触发墙体删除指令删除墙体。

5.根据权利要求1所述的一种跨平台3D户型绘制方法，其特征在于，所述步骤C包括以下步骤：

C1、从模型库中添加标准模型，并保持和户型图一致；

C2、设置空间区域属性，选择显示或隐藏户型图信息。

6.根据权利要求5所述的一种跨平台3D户型绘制方法，其特征在于，所述模型库已有的标准模型包括门窗、卫浴、床柜，所述标准模型也可以通过绘制模型并添加到所述模型库生成；通过调整模型的位置和切换模型的方向，获得和户型图一致的设计；通过触发空间区域属性设置指令，从而设置空间区域的高度和名称，选择隐藏或显示3D视图下的房顶；通过触发系统设置指令，从而选择显示或隐藏户型图的尺寸、空间区域信息、文字标注、底图、背景网络。

7.根据权利要求1所述的一种跨平台3D户型绘制方法，其特征在于，所述步骤D中，绘制完成后，以SVG格式呈现绘制完成的2D户型图；通过触发3D指令，WebGL引擎绘制3D户型图，以SVG格式呈现绘制好的3D户型图。

8.一种应用权利要求1￣7任一所述的跨平台3D户型绘制方法的装置，其特征在于，包括：

上传模块：用于上传户型图；

绘制模块：用于绘制墙体，生成标准户型；

设置模块：用于添加标准模型，并设置属性；

展示模块：用于通过WebGL引擎绘制3D户型图，并以SVG格式呈现绘制完成的3D户型图。

9.一种跨平台3D户型绘制系统，其特征在于，包括控制模块和存储控制指令的存储模块，控制模块读取所述指令执行以下步骤：

A、上传户型图；

B、绘制墙体，生成标准户型图；

C、添加标准模型，并设置属性；

D、通过WebGL引擎绘制3D户型图，并以SVG格式呈现绘制完成的3D户型图。