一种页面开发方法、计算设备及存储介质技术

本发明专利技术涉及页面开发领域，特别涉及一种页面开发方法、计算设备及存储介质，方法包括：初始化开发组件，开发组件包括标尺组件；响应于用户调用标尺组件，根据标尺绘制函数在页面中绘制标尺，标尺包括水平标尺和/或垂直标尺；响应于用户对标尺的拉出参考线操作，在页面中绘制平行于标尺的参考线；判断页面中是否包括多条参考线，并且多条参考线围成矩形区域；若页面中多条参考线围成矩形区域，则对矩形区域的区域参数进行测量，并在页面中进行显示矩形区域的区域参数。本发明专利技术通过绘制标尺、参考线以及测量矩形区域参数等方式，便于用户获取页面中所需要的各种参数，提高页面开发效率。提高页面开发效率。提高页面开发效率。

【技术实现步骤摘要】
一种页面开发方法、计算设备及存储介质


[0001]本专利技术涉及页面开发领域，特别涉及一种页面开发方法、计算设备及存储介质。

技术介绍

[0002]HTML5，是互联网的下一代标准，以及构建呈现互联网内容的一种语言方式，被认为是互联网的核心技术之一。HTML产生于1990年，1997年HTML4成为互联网标准，并广泛应用于互联网应用的开发。Canvas API(画布)在HTML5中新增标签，用于在网页实时生成图像，并且可以操作图像内容，具体的是一个可以用JavaScript操作的位图(bitmap)。一个Canvas对象即表示一个HTML画布元素<canvas>，该元素没有自己的行为，但是定义了一个API能够支持脚本化客户端绘图操作。
[0003]现有技术中在进行页面构建时，对画布中对页面中元素的元素位置进行测量时需要对页面进行截图，然后在其他应用中(如PS)打开再测量页面元素的位置坐标和像素大小等参数，从而得知元素在画布中元素位置的具体参数，这种方式较为复杂。
[0004]为此，需要一种新的页面开发方法。

技术实现思路

[0005]为此，本专利技术提供一种页面开发方法，以力图解决或者至少缓解上面存在的问题。
[0006]根据本专利技术的一个方面，提供一种页面开发方法，适于在计算设备中运行，初始化开发组件，开发组件包括标尺组件；响应于用户调用标尺组件，根据标尺绘制函数在页面中绘制标尺，标尺包括水平标尺和/或垂直标尺；响应于用户对标尺的拉出参考线操作，在页面中绘制平行于标尺的参考线；判断页面中是否包括多条参考线，并且多条参考线围成矩形区域；若页面中多条参考线围成矩形区域，则对矩形区域的区域参数进行测量，并在页面中进行显示矩形区域的区域参数。
[0007]可选地，在根据本专利技术的方法中，标尺的属性包括高度，透明度，刻度步长和吸附配置。
[0008]可选地，在根据本专利技术的方法中，当用户设置所述吸附配置为自动吸附时，响应于用户将所述标尺移动到页面中元素周围预设范围内，将所述标尺停靠在所述元素的边缘。
[0009]可选地，在根据本专利技术的方法中，方法还包括：响应于用户将参考线移动到标尺内，删除所述参考线。
[0010]可选地，在根据本专利技术的方法中，开发组件还包括网格组件，方法还包括：响应于用户调用所述网格组件，根据网格绘制函数在页面中绘制网格。
[0011]可选地，在根据本专利技术的方法中，根据网格绘制函数在页面中绘制网格包括：根据设置的网格线条颜色、网格线条横向间隔和网格线条纵向间隔在页面中绘制网格。
[0012]可选地，在根据本专利技术的方法中，开发组件还包括测量框组件，方法还包括：响应于用户调用所述测量框组件，在所述页面中绘制测量框并显示测量框的区域参数。
[0013]可选地，在根据本专利技术的方法中，用户调用所述测量框组件包括：用户在页面中的
编辑区点击并在保持点击状态下拖动，得到根据用户点击位置和鼠标行程终点生成的测量框。
[0014]根据本专利技术的另一方面，提供了一种计算设备，包括：一个或多个处理器；存储器；以及一个或多个程序，其中，一个或多个程序存储在存储器中并被配置为由一个或多个处理器执行，一个或多个程序包括用于执行根据本专利技术的页面开发方法的指令。
[0015]根据本专利技术的再一方面，提供了一种存储一个或多个程序的计算机可读存储介质，一个或多个程序包括指令，该指令当由计算设备执行时，使得计算设备执行根据本专利技术的页面开发方法。
[0016]本专利技术中的页面开发方法，适于在计算设备中执行，方法包括：初始化开发组件，开发组件包括标尺组件；响应于用户调述刻度尺组件，根据标尺绘制函数在页面中绘制标尺，标尺包括水平标尺和/或垂直标尺；响应于用户对标尺的拖动操作，在页面中绘制平行于标尺的参考线；判断页面中是否包括多条参考线，并且参考线围成矩形区域；若页面中多条参考线围成矩形区域，则对矩形区域的区域参数进行测量，并在页面中进行显示。本专利技术通过绘制标尺、参考线以及测量矩形区域参数等方式，便于用户获取页面中所需要的各种参数，提高页面开发效率。
附图说明
[0017]为了实现上述以及相关目的，本文结合下面的描述和附图来描述某些说明性方面，这些方面指示了可以实践本文所公开的原理的各种方式，并且所有方面及其等效方面旨在落入所要求保护的主题的范围内。通过结合附图阅读下面的详细描述，本专利技术公开的上述以及其它目的、特征和优势将变得更加明显。遍及本公开，相同的附图标记通常指代相同的部件或元素。
[0018]图1示出了根据本专利技术一个示范性实施例的页面开发方法100的示意图；
[0019]图2示出了根据本专利技术一个示范性实施例的计算设备200的结构框图。
[0020]图3示出了根据本专利技术一个示范性实施例的多条参考线围成矩形区域的示意图；
[0021]图4示出了根据本专利技术一个示范性实施例的绘制的矩形测量框的示意图。。
具体实施方式
[0022]下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示了本公开的示例性实施例，然而应当理解，可以以各种形式实现本公开而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本公开，并且能够将本公开的范围完整的传达给本领域的技术人员。相同的附图标记通常指代相同的部件或元素。
[0023]图1示出了根据本专利技术一个示范性实施例的页面开发方法100的示意图。本专利技术的页面开发方法100适于在计算设备中执行。
[0024]图2示出了根据本专利技术一个示范性实施例的计算设备的结构框图。在基本配置中，计算设备200包括至少一个处理单元220和系统存储器210。根据一个方面，取决于计算设备的配置和类型，系统存储器210包括但不限于易失性存储(例如，随机存取存储器)、非易失性存储(例如，只读存储器)、闪速存储器、或者这样的存储器的任何组合。根据一个方面，系统存储器210包括操作系统211。
[0025]根据一个方面，操作系统211，例如，适合于控制计算设备200的操作。此外，示例结合图形库、其他操作系统、或任何其他应用程序而被实践，并且不限于任何特定的应用或系统。在图2中通过在虚线215内的那些组件示出了该基本配置。根据一个方面，计算设备200具有额外的特征或功能。例如，根据一个方面，计算设备200包括额外的数据存储设备(可移动的和/或不可移动的)，例如磁盘、光盘、或者磁带。
[0026]如在上文中所陈述的，根据一个方面，在系统存储器210中存储程序模块212。根据一个方面，程序模块212可包括一个或多个应用程序，本专利技术不限制应用程序的类型，例如应用还包括：电子邮件和联系人应用程序、文字处理应用程序、电子表格应用程序、数据库应用程序、幻灯片展示应用程序、绘画或计算机辅助应用程序、网络浏览器应用程序等。
[0027]根据一个方面，可以在包括分立电子元件的电路、包含逻辑门的封装或集成的电子芯片、利用微处理器的电路、或者在包含本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种页面开发方法，适于在计算设备中运行，所述方法包括：初始化开发组件，所述开发组件包括标尺组件；响应于用户调用所述标尺组件，根据标尺绘制函数在页面中绘制标尺，所述标尺包括水平标尺和/或垂直标尺；响应于用户对所述标尺的拉出参考线操作，在页面中绘制平行于标尺的参考线；判断所述页面中是否包括多条参考线，并且多条参考线围成矩形区域；若页面中多条参考线围成矩形区域，则对所述矩形区域的区域参数进行测量，并在页面中进行显示矩形区域的区域参数。2.如权利要求1所述的方法，其中，所述标尺的属性包括高度，透明度，刻度步长和吸附配置。3.如权利要求2所述的方法，其中，当用户设置所述吸附配置为自动吸附时，响应于用户将所述标尺移动到页面中元素周围预设范围内，将所述标尺停靠在所述元素的边缘。4.如权利要求1所述的方法，其中，所述方法还包括：响应于用户将参考线移动到标尺内，删除所述参考线。5.如权利要求1所述的方法，其中，所述开发组件还包括网格组件，所述方法还包括：响应于用户调用所述网格组件，根据网格绘制函数在页面中绘制网格。6.如权利要求5所...

【专利技术属性】
技术研发人员：代丹，
申请(专利权)人：海南车智易通信息技术有限公司，
类型：发明
国别省市：