CN117032692A - 一种页面开发方法、计算设备及存储介质 - Google Patents

Abstract

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

Description

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

技术领域

本发明涉及页面开发领域，特别涉及一种页面开发方法、计算设备及存储介质。

背景技术

HTML5，是互联网的下一代标准，以及构建呈现互联网内容的一种语言方式，被认为是互联网的核心技术之一。HTML产生于1990年，1997年HTML4成为互联网标准，并广泛应用于互联网应用的开发。Canvas API(画布)在HTML5中新增标签，用于在网页实时生成图像，并且可以操作图像内容，具体的是一个可以用JavaScript操作的位图(bitmap)。一个Canvas对象即表示一个HTML画布元素<canvas>，该元素没有自己的行为，但是定义了一个API能够支持脚本化客户端绘图操作。

现有技术中在进行页面构建时，对画布中对页面中元素的元素位置进行测量时需要对页面进行截图，然后在其他应用中(如PS)打开再测量页面元素的位置坐标和像素大小等参数，从而得知元素在画布中元素位置的具体参数，这种方式较为复杂。

为此，需要一种新的页面开发方法。

发明内容

为此，本发明提供一种页面开发方法，以力图解决或者至少缓解上面存在的问题。

根据本发明的一个方面，提供一种页面开发方法，适于在计算设备中运行，初始化开发组件，开发组件包括标尺组件；响应于用户调用标尺组件，根据标尺绘制函数在页面中绘制标尺，标尺包括水平标尺和/或垂直标尺；响应于用户对标尺的拉出参考线操作，在页面中绘制平行于标尺的参考线；判断页面中是否包括多条参考线，并且多条参考线围成矩形区域；若页面中多条参考线围成矩形区域，则对矩形区域的区域参数进行测量，并在页面中进行显示矩形区域的区域参数。

可选地，在根据本发明的方法中，标尺的属性包括高度，透明度，刻度步长和吸附配置。

可选地，在根据本发明的方法中，当用户设置所述吸附配置为自动吸附时，响应于用户将所述标尺移动到页面中元素周围预设范围内，将所述标尺停靠在所述元素的边缘。

可选地，在根据本发明的方法中，方法还包括：响应于用户将参考线移动到标尺内，删除所述参考线。

可选地，在根据本发明的方法中，开发组件还包括网格组件，方法还包括：响应于用户调用所述网格组件，根据网格绘制函数在页面中绘制网格。

可选地，在根据本发明的方法中，根据网格绘制函数在页面中绘制网格包括：根据设置的网格线条颜色、网格线条横向间隔和网格线条纵向间隔在页面中绘制网格。

可选地，在根据本发明的方法中，开发组件还包括测量框组件，方法还包括：响应于用户调用所述测量框组件，在所述页面中绘制测量框并显示测量框的区域参数。

可选地，在根据本发明的方法中，用户调用所述测量框组件包括：用户在页面中的编辑区点击并在保持点击状态下拖动，得到根据用户点击位置和鼠标行程终点生成的测量框。

根据本发明的另一方面，提供了一种计算设备，包括：一个或多个处理器；存储器；以及一个或多个程序，其中，一个或多个程序存储在存储器中并被配置为由一个或多个处理器执行，一个或多个程序包括用于执行根据本发明的页面开发方法的指令。

根据本发明的再一方面，提供了一种存储一个或多个程序的计算机可读存储介质，一个或多个程序包括指令，该指令当由计算设备执行时，使得计算设备执行根据本发明的页面开发方法。

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

附图说明

为了实现上述以及相关目的，本文结合下面的描述和附图来描述某些说明性方面，这些方面指示了可以实践本文所公开的原理的各种方式，并且所有方面及其等效方面旨在落入所要求保护的主题的范围内。通过结合附图阅读下面的详细描述，本发明公开的上述以及其它目的、特征和优势将变得更加明显。遍及本公开，相同的附图标记通常指代相同的部件或元素。

图1示出了根据本发明一个示范性实施例的页面开发方法100的示意图；

图2示出了根据本发明一个示范性实施例的计算设备200的结构框图。

图3示出了根据本发明一个示范性实施例的多条参考线围成矩形区域的示意图；

图4示出了根据本发明一个示范性实施例的绘制的矩形测量框的示意图。。

具体实施方式

下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示了本公开的示例性实施例，然而应当理解，可以以各种形式实现本公开而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本公开，并且能够将本公开的范围完整的传达给本领域的技术人员。相同的附图标记通常指代相同的部件或元素。

图1示出了根据本发明一个示范性实施例的页面开发方法100的示意图。本发明的页面开发方法100适于在计算设备中执行。

图2示出了根据本发明一个示范性实施例的计算设备的结构框图。在基本配置中，计算设备200包括至少一个处理单元220和系统存储器210。根据一个方面，取决于计算设备的配置和类型，系统存储器210包括但不限于易失性存储(例如，随机存取存储器)、非易失性存储(例如，只读存储器)、闪速存储器、或者这样的存储器的任何组合。根据一个方面，系统存储器210包括操作系统211。

根据一个方面，操作系统211，例如，适合于控制计算设备200的操作。此外，示例结合图形库、其他操作系统、或任何其他应用程序而被实践，并且不限于任何特定的应用或系统。在图2中通过在虚线215内的那些组件示出了该基本配置。根据一个方面，计算设备200具有额外的特征或功能。例如，根据一个方面，计算设备200包括额外的数据存储设备(可移动的和/或不可移动的)，例如磁盘、光盘、或者磁带。

如在上文中所陈述的，根据一个方面，在系统存储器210中存储程序模块212。根据一个方面，程序模块212可包括一个或多个应用程序，本发明不限制应用程序的类型，例如应用还包括：电子邮件和联系人应用程序、文字处理应用程序、电子表格应用程序、数据库应用程序、幻灯片展示应用程序、绘画或计算机辅助应用程序、网络浏览器应用程序等。

根据一个方面，可以在包括分立电子元件的电路、包含逻辑门的封装或集成的电子芯片、利用微处理器的电路、或者在包含电子元件或微处理器的单个芯片上实践示例。例如，可以经由其中在图2中所示出的每个或许多组件可以集成在单个集成电路上的片上系统(SOC)来实践示例。根据一个方面，这样的SOC设备可以包括一个或多个处理单元、图形单元、通信单元、系统虚拟化单元、以及各种应用功能，其全部作为单个集成电路而被集成(或“烧”)到芯片基底上。当经由SOC进行操作时，可以经由在单个集成电路(芯片)上与计算设备200的其他组件集成的专用逻辑来对在本文中所描述的功能进行操作。还可以使用能够执行逻辑操作(例如AND、OR和NOT)的其他技术来实践本发明的实施例，所述其他技术包括但不限于机械、光学、流体、和量子技术。另外，可以在通用计算机内或在任何其他任何电路或系统中实践本发明的实施例。

根据一个方面，计算设备200还可以具有一个或多个输入设备231，例如键盘、鼠标、笔、语音输入设备、触摸输入设备等。还可以包括输出设备232，例如显示器、扬声器、打印机等。前述设备是示例并且也可以使用其他设备。计算设备200可以包括允许与其他计算设备240进行通信的一个或多个通信连接233。合适的通信连接233的示例包括但不限于：RF发射机、接收机和/或收发机电路；通用串行总线(USB)、并行和/或串行端口。计算设备200可通过通信连接233与其他计算设备240通信连接。

本发明实施方式还提供一种非暂态可读存储介质，存储有指令，所述指令用于使所述计算设备执行根据本发明实施方式的方法。本实施例的可读介质包括永久性和非永久性、可移动和非可移动介质，可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。可读存储介质的例子包括但不限于：相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁盘存储或其他磁性存储设备或任何其他非暂态可读存储介质。

根据一个方面，通信介质是由计算机可读指令、数据结构、程序模块、或者经调制的数据信号(例如，载波或其他传输机制)中的其他数据实施的，并且包括任何信息传递介质。根据一个方面，术语“经调制的数据信号”描述了具有一个或多个特征集或者以将信息编码在信号中的方式改变的信号。作为示例而非限制，通信介质包括诸如有线网络或直接有线连接之类的有线介质，以及诸如声学、射频(RF)、红外线的、以及其他无线介质之类的无线介质。

需要说明的是，尽管上述计算设备仅示出了处理单元220、系统存储器210、输入设备231、输出设备232、以及通信连接233，但是在具体实施过程中，该设备还可以包括实现正常运行所必需的其他组件。此外，本领域的技术人员可以理解的是，上述设备中也可以仅包含实现本说明书实施例方案所必需的组件，而不必包含图中所示的全部组件。

在现有技术中，前端在撰写样式设置时，可能会由于对画布上所要设置的那段距离，或某个对象的具体参数不够清楚，导致样式设置出错发生盒模型坍塌问题。在出现问题后，还要对问题进行定位，花费较多时间对问题进行处理。通过本发明中设置的各种工具，如标尺、参考线以及测量矩形区域参数等能够实现用户掌握画布中各种元素的参数，便于正确设置样式，及时发现样式设置中出现的各种问题，提高页面开发效率。

回到图1，如图1所示，本发明的页面开发方法首先执行步骤110：初始化开发组件，开发组件包括标尺组件。根据本发明的一个实施例，开发组件包括标尺组件，网格组件和测量框组件。初始化开发组件时，加载对标尺组件、网格组件和测量框组件进行绘制的构造函数，执行初始化操作。

根据本发明的一个实施例，本发明中的开发组件，包括标尺组件，网格组件和测量框组件均可使用工厂模式进行开发，用户在使用是能够添加自己写的方法，通过这种方式来个性化定制框架代码，通过对代码进行迭代能够使工具更加实用，改善其中的功能。

通过工厂模式能够对象的创建和使用过程分割开来。比如说Class A想调用ClassB的方法，那么无需关心Class B是如何创建的，直接去工厂获取Class B就行。工厂模式能够减少代码量，易于维护。如果直接新建一个对象时，需要的对象构造方法比较复杂，那么需要较多的代码去重复创建对象。通过工厂模式能够隐藏对象创建的具体逻辑，减少了代码量。以后如果需要迭代更新只需要修改其中一处即可，方便我们日常的维护。

初始化开发组件时，获取并创建画布以及画布上下文对象，设置画布的宽高，使其与样式中的宽高保持一致，初始化创建实例对象，初始化默认值，包括初始缩放比，字体大小，网格宽度等。

根据本发明的一个实施例，初始化开发组件可具体通过执行如下代码实现：

随后，执行步骤120，响应于用户调用标尺组件，根据标尺绘制函数在页面中绘制标尺，标尺包括水平标尺和/或垂直标尺。水平标尺即在页面中与页面的上下边界平行的标尺，垂直标尺即在页面中与页面的左右边界平行的标尺。标尺的位置可通过绝对定位的方式进行设置，在绘制标尺后，可对标尺进行的移动以改变标尺在页面中的位置。

根据本发明的一个实施例，标尺的属性包括高度，透明度，刻度步长和吸附配置。标尺的高度及标尺在页面上显示的高度，刻度步长及相邻两个刻度之间的距离，具体可设置为1像素、一厘米或以英尺等单位。用户可根据需要进行设置。吸附配置包括自动吸附和不吸附，用于设置标尺在靠近页面元素一定距离时，是否停靠在额页面元素边缘。标尺停靠在页面元素的边缘是指标尺带刻度的一边与页面元素的边缘重合并进行锚定。当用户设置吸附配置为自动吸附时，响应于用户将标尺移动到页面中元素周围预设范围内，将标尺停靠在元素的边缘。

绘制标尺时的时通过标尺绘制函数进行绘制，标尺绘制函数主要作用是计算虚拟网格大小，并根据虚拟网格大小计算出实际刻度的数量和尺寸，使得标尺尽量均匀。遍历虚拟网格宽度数组，找出一个最合适的，缩放后在图像上的实际占用像素大于50，确定水平方向和竖直方向的刻度数量，遍历绘制标尺中的刻度，遍历绘制标尺上的数字文本，具体的：绘制数字文本的每一位。根据本发明的一个实施例，可具体通过执行如下代码绘制垂直标尺和水平标尺：

随后，执行步骤130，响应于用户对标尺的拉出参考线操作，在页面中绘制平行于标尺的参考线。根据本发明的一个实施例，本发明中用户将光标移动到标尺内长按并拖动即可脱出参考线；光标放置在参考线上时，可移动参考线，并且用户将参考线移动到标尺内时，删除参考线。

随后，执行步骤140，判断页面中是否包括多条参考线，并且多条参考线围成矩形区域，以及步骤150，若页面中多条参考线围成矩形区域，则对矩形区域的区域参数进行测量，并在页面中进行显示矩形区域的区域参数，包括矩形区域左上角顶点的坐标，宽度和高度。

图3示出了根据本发明一个示范性实施例的多条参考线围成矩形区域的示意图。如图3所示，矩形区域的每条边均由参考线构成。测量矩形区域的参数时，可测量矩形区域各顶底的坐标、各边的长度以及矩形区域的面积等。

本发明可对是否对参考线所围成矩形区域进行测量进行设置，若设置固定显示，则自动对矩形区域的参数进行测量并显示，若设置固定隐藏，则不进行测量及显示。

根据本发明的一个实施例，本发明方法还包括：响应于用户调用网格组件，根据网格绘制函数在页面中绘制网格。根据网格绘制函数在页面中绘制网格包括：根据设置的网格线条颜色、网格线条横向间隔和网格线条纵向间隔在页面中绘制网格。网格绘制函数是用于绘制网格的功能函数，包括参数：网格线条的颜色、横向网格线条的间隔和竖向网格线条的间隔。函数能够实现从上向下连续绘制横向和竖向网格线条，并实现画布中其他图形状态的保存和恢复。

根据本发明的一个实施例，可具体通过执行如下代码绘制网格：

根据本发明的一个实施例，本发明方法还包括响应于用户调用测量框组件，在页面中绘制测量框并显示测量框的区域参数。用户调用测量框组件包括：用户在页面中的编辑区点击并拖动；测量框为根据用户点击位置和鼠标行程终点构建的编辑区。

根据本发明的一个实施例，测量框组件可自动测量矩形框宽度、高度以及矩形框距离屏幕、页面以及最近元素的距离。矩形框距离屏幕、页面以及最近元素的距离均包括矩形框左侧、右侧、顶部和底部距离屏幕、页面以及最近元素的距离，如矩形框距离屏幕包括矩形框左侧、右侧、顶部和底部分别距离屏幕的距离。

根据本发明的一个实施例，本发明还可设置矩形测量框各角为圆角，将矩形测量框设置为圆角矩形。

图4示出了根据本发明一个示范性实施例的绘制的矩形测量框的示意图。如图4所示，显示有设置的矩形测量框左上角顶点的坐标，以及宽度和高度。

根据本发明的一个实施例，本发明在使用开发组件时，可通过设置快捷键使用各种开发组件，如在做页面开发的时候引入工具对应的框架，通过Ctrl+R调用标尺，Ctrl+W显示网格，鼠标置于标尺内点击右键打开配置菜单，进行配置标尺显示的默认显示像素，配置吸附像素默认为5px，即标尺移动到元素周围5px范围内将标尺与元素吸附，以及配置网格大小。通过鼠标置于标尺内拖出横向参考线和纵向参考线，按快捷键M调用测量框组件测量样式模块数据，协助开发，还可提供存储功能，使用Ctrl+S将测量样式模块数据储存在云端。

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

在此处所提供的说明书中，说明了大量具体细节。然而，能够理解，本发明的实施例可以在没有这些具体细节的情况下被实践。在一些实例中，并未详细示出公知的方法、结构和技术，以便不模糊对本说明书的理解。

类似地，应当理解，为了精简本公开并帮助理解各个发明方面中的一个或多个，在上面对本发明的示例性实施例的描述中，本发明的各个特征有时被一起分组到单个实施例、图、或者对其的描述中。

本领域那些技术人员应当理解在本文所公开的示例中的设备的模块或单元或组间可以布置在如该实施例中所描述的设备中，或者可替换地可以定位在与该示例中的设备不同的一个或多个设备中。前述示例中的模块可以组合为一个模块或者此外可以分成多个子模块。

本领域那些技术人员可以理解，可以对实施例中的设备中的模块进行自适应性地改变并且把它们设置在与该实施例不同的一个或多个设备中。可以把实施例中的模块或单元或组间组合成一个模块或单元或组间，以及此外可以把它们分成多个子模块或子单元或子组间。除了这样的特征和、或过程或者单元中的至少一些是相互排斥之外，可以采用任何组合对本说明书中公开的所有特征以及如此公开的任何方法或者设备的所有过程或单元进行组合。除非另外明确陈述，本说明书中公开的每个特征可以由提供相同、等同或相似目的的替代特征来代替。

此外，本领域的技术人员能够理解，尽管在此所述的一些实施例包括其它实施例中所包括的某些特征而不是其它特征，但是不同实施例的特征的组合意味着处于本发明的范围之内并且形成不同的实施例。

此外，所述实施例中的一些在此被描述成可以由计算机系统的处理器或者由执行所述功能的其它装置实施的方法或方法元素的组合。因此，具有用于实施所述方法或方法元素的必要指令的处理器形成用于实施该方法或方法元素的装置。此外，装置实施例的在此所述的元素是如下装置的例子：该装置用于实施由为了实施该发明的目的的元素所执行的功能。

这里描述的各种技术可结合硬件或软件，或者它们的组合一起实现。从而，本发明的方法和设备，或者本发明的方法和设备的某些方面或部分可采取嵌入有形媒介，例如软盘、CD-ROM、硬盘驱动器或者其它任意机器可读的存储介质中的程序代码(即指令)的形式，其中当程序被载入诸如计算机之类的机器，并被所述机器执行时，所述机器变成实践本发明的设备。

在程序代码在可编程计算机上执行的情况下，计算设备一般包括处理器、处理器可读的存储介质(包括易失性和非易失性存储器和、或存储元件)，至少一个输入装置，和至少一个输出装置。其中，存储器被配置用于存储程序代码；处理器被配置用于根据该存储器中存储的所述程序代码中的指令，执行本发明的页面开发方法。

以示例而非限制的方式，计算机可读介质包括计算机存储介质和通信介质。计算机可读介质包括计算机存储介质和通信介质。计算机存储介质存储诸如计算机可读指令、数据结构、程序模块或其它数据等信息。通信介质一般以诸如载波或其它传输机制等已调制数据信号来体现计算机可读指令、数据结构、程序模块或其它数据，并且包括任何信息传递介质。以上的任一种的组合也包括在计算机可读介质的范围之内。

如在此所使用的那样，除非另行规定，使用序数词“第一”、“第二”、“第三”等等来描述普通对象仅仅表示涉及类似对象的不同实例，并且并不意图暗示这样被描述的对象必须具有时间上、空间上、排序方面或者以任意其它方式的给定顺序。

尽管根据有限数量的实施例描述了本发明，但是受益于上面的描述，本技术领域内的技术人员明白，在由此描述的本发明的范围内，可以设想其它实施例。此外，应当注意，本说明书中使用的语言主要是为了可读性和教导的目的而选择的，而不是为了解释或者限定本发明的主题而选择的。因此，对于本技术领域的普通技术人员来说许多修改和变更都是显而易见的。对于本发明的范围，对本发明所做的公开是说明性的，而非限制性的。

Claims (10)

1.一种页面开发方法，适于在计算设备中运行，所述方法包括：

初始化开发组件，所述开发组件包括标尺组件；

响应于用户调用所述标尺组件，根据标尺绘制函数在页面中绘制标尺，所述标尺包括水平标尺和/或垂直标尺；

响应于用户对所述标尺的拉出参考线操作，在页面中绘制平行于标尺的参考线；

判断所述页面中是否包括多条参考线，并且多条参考线围成矩形区域；

若页面中多条参考线围成矩形区域，则对所述矩形区域的区域参数进行测量，并在页面中进行显示矩形区域的区域参数。

2.如权利要求1所述的方法，其中，所述标尺的属性包括高度，透明度，刻度步长和吸附配置。

3.如权利要求2所述的方法，其中，当用户设置所述吸附配置为自动吸附时，响应于用户将所述标尺移动到页面中元素周围预设范围内，将所述标尺停靠在所述元素的边缘。

4.如权利要求1所述的方法，其中，所述方法还包括：

响应于用户将参考线移动到标尺内，删除所述参考线。

5.如权利要求1所述的方法，其中，所述开发组件还包括网格组件，所述方法还包括：

响应于用户调用所述网格组件，根据网格绘制函数在页面中绘制网格。

6.如权利要求5所述的方法，其中，所述根据网格绘制函数在页面中绘制网格包括：

根据设置的网格线条颜色、网格线条横向间隔和网格线条纵向间隔在页面中绘制网格。

7.如权利要求1-6中任一项所述的方法，其中，所述开发组件还包括测量框组件，所述方法还包括：

响应于用户调用所述测量框组件，在所述页面中绘制测量框并显示测量框的区域参数。

8.如权利要求7所述的方法，其中，所述用户调用所述测量框组件包括：用户在页面中的编辑区点击并在保持点击状态下拖动，得到根据用户点击位置和鼠标行程终点生成的测量框。

9.一种计算设备，包括：

一个或多个处理器；

存储器；以及

一个或多个程序，其中，一个或多个程序存储在存储器中并被配置为由一个或多个处理器执行，一个或多个程序包括用于执行根据权利要求1-8中任一项所述的方法的指令。

10.一种存储一个或多个程序的计算机可读存储介质，所述一个或多个程序包括指令，所述指令当由计算设备执行时，使得所述计算设备执行根据权利要求1-8中任一项所述的方法。