CN113672210A - 三角形图标代码生成方法、生成装置及可读存储介质 - Google Patents

Abstract

本发明公开了一种三角形图标代码生成方法、生成装置及可读存储介质，该方法包括：创建编辑区域、预览区域、代码区域，获取用户在编辑区域设置的实时显示属性值；基于用户在编辑区域设置的实时显示属性值，在预览区域显示对应样式的三角形；并根据编辑区域设置的实时显示属性，在代码区域生成对应的CSS代码，本发明中，前端开发工程师通过在编辑区域设置三角形的实时显示属性值，可在预览区域实时查看是否是自己所需的三角形，若是，则直接复制代码区域生成的CSS代码即可，解决了现有技术中前端开发工程师在网页上创建三角形图标时，需要重复编写代码导致开发效率低的问题。

Description

三角形图标代码生成方法、生成装置及可读存储介质

技术领域

本发明涉及前端开发技术领域，尤其涉及一种三角形图标代码生成方法、生成装置及计算机可读存储介质。

背景技术

随着互联网信息技术的飞速发展，终端设备的日益普及，越来越多针对终端设备的应用程序被开发出来。在应用程序开发过程中，前端开发是其中必不可少的一环。前端开发是指创建网页页面或应用程序等前端界面呈现给用户的过程，其主要功能是把互联网产品的界面以一种更友好、更便捷地方式呈现给用户，通过例如HTML(Hyper Text MarkupLanguage ，超文本标记语言)、CSS（Cascading Style Sheet，层叠样式表）工具、脚本语言(Java Script)以及其他衍生出来的各种技术、框架、解决方案等，实现互联网产品的用户界面交互。

在制作网页时，有时候需要在网页上创建一个三角形图标，工程师则需要在程序中编写三角形图标的代码，针对不同大小和形状的三角形图标，则需要重新编写不同的代码，这无疑降低了前端开发工程师的开发效率。

发明内容

本发明的主要目的在于提供一种三角形图标代码生成方法、生成装置及计算机可读存储介质，旨在解决现有技术中前端工程师在网页上创建三角形图标时，需要重复编写代码导致开发效率低的问题。

为实现上述目的，本发明实施例提供一种三角形图标代码生成方法，所述三角形图标代码生成方法包括：

创建编辑区域，所述编辑区域用来设置三角形的显示属性；

创建预览区域，所述预览区域用来根据所述编辑区域设置的显示属性值显示对应样式的三角形；

创建代码区域，所述代码区域用来根据所述编辑区域设置的显示属性值显示对应的CSS代码；

获取用户在编辑区域设置的实时显示属性值；

基于用户在编辑区域设置的实时显示属性值，在预览区域显示对应样式的三角形；

根据所述编辑区域设置的实时显示属性值，生成对应的CSS代码。

可选地，所述显示属性包括三角形顶点方向、三角形类型、底边宽度、顶点到底边的高度、旋转角度、背景色和IE兼容性的多种类型。

可选地，所述创建编辑区域的步骤包括：

用div标签分别创建不同方向的控制块，基于用户点击不同方向的控制块，生成对应方向的三角形；

用input标签创建旋转角度控制条，基于用户拖动旋转角度控制条更改三角形的旋转角度；

用input标签创建两个类型单选项，基于用户点击对应的类型单选项，生成等边三角形或者等腰三角形；

用input标签创建三角形底边的宽度控制条，基于用户拖动宽度控制条更改三角形底边的宽度；

用input标签创建三角形顶点到底边的高度控制条，基于用户拖动高度控制条更改三角形顶点到底边的高度；

用input标签创建颜色选择器，基于用户点击颜色选择器中不同的颜色区域设置三角形的颜色；

用input标签创建IE兼容可选项，用于设置是否需要生成兼容IE的三角形图标，默认为选中状态。

可选地，所述创建编辑区域的步骤还包括：

用input标签创建旋转角度输入框，用于输入任意的旋转角度数值；

用input标签创建底边宽度输入框，用于输入任意的底边宽度数值；

用input标签创建顶点高度输入框，用于输入任意的顶点高度数值。

可选地，所述三角形图标代码生成方法应用于浏览器插件，浏览器中设置用于触发所述三角形图标代码生成方法的触发控件；

在所述创建编辑区域的步骤之前，所述三角形图标代码生成方法还包括：

当检测到用户点击所述触发控件触发的生成指令时，执行所述创建编辑区域的步骤。

可选地，所述创建预览区域的步骤包括：

用div标签创建画布编辑区，并建立编辑区域显示属性与画布编辑区的赋值关系。

可选地，所述创建代码区域的步骤包括：

用div标签创建文本框，将所述编辑区域的显示属性以字符串的形式赋值到文本框标签内容中；

用button标签创建复制按钮，用于快捷复制生成的代码到剪贴板。

可选地，所述根据所述编辑区域设置的实时显示属性值，生成对应的CSS代码的步骤包括：

根据所述编辑区域设置的实时显示属性的类型，在预设的CSS代码模板中确定待更新代码内容；

根据所述编辑区域设置的实时显示属性值，对所述待更新代码内容进行替换，以在所述代码区域生成对应的CSS代码。

此外，本发明还提供一种三角形图标代码生成装置，所述三角形图标代码生成装置包括：存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述计算机程序被所述处理器执行时实现上述的三角形图标代码生成方法的步骤。

此外，本发明还提供一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现上述的三角形图标代码生成方法的步骤。

本发明公开了一种三角形图标代码生成方法、生成装置及可读存储介质，首先创建编辑区域，用来设置三角形的显示属性，创建预览区域，用来根据编辑区域设置的显示属性值显示对应样式的三角形，创建代码区域，用来根据编辑区域设置的显示属性值显示对应的三角形图标的CSS代码，通过获取用户在编辑区域设置的实时显示属性值并根据编辑区域设置的实时显示属性值，在预览区域显示对应样式的三角形，在代码区域生成对应的CSS代码，前端开发工程师通过在编辑区域设置三角形的实时显示属性值，可在预览区域实时查看是否是自己所需的三角形，若是，则直接复制代码区域生成的CSS代码即可，不需要重复编写不同的三角形图标代码，提高了开发效率。

附图说明

图1为本发明实施例方案涉及的硬件运行环境的三角形图标代码生成装置的结构示意图；

图2为本发明三角形图标代码生成方法第一实施例的流程示意图。

本发明目的的实现、功能特点及优点将结合实施例，参照附图做进一步说明。

具体实施方式

应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。

在后续的描述中，使用用于表示元件的诸如“模块”、“部件”或“单元”的后缀仅为了有利于本发明的说明，其本身没有特定的意义。因此，“模块”、“部件”或“单元”可以混合地使用。

本发明中的三角形图标代码生成装置可以是PC，也可以是智能手机、平板电脑、电子书阅读器、便携计算机等具有显示功能的可移动式终端设备。

参照图1，本发明中的三角形图标代码生成装置可以包括：处理器1001，例如CPU，网络接口1004，用户接口1003，存储器1005，通信总线1002。其中，通信总线1002用于实现这些组件之间的连接通信。用户接口1003可以包括显示屏（Display）、输入单元比如键盘（Keyboard），可选用户接口1003还可以包括标准的有线接口、无线接口。网络接口1004可选的可以包括标准的有线接口、无线接口（如WI-FI接口）。存储器1005可以是高速RAM存储器，也可以是稳定的存储器（non-volatile memory），例如磁盘存储器。存储器1005可选的还可以是独立于前述处理器1001的存储装置。

本领域技术人员可以理解，图1中示出的三角形图标代码生成装置并不构成对三角形图标代码生成装置的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。

如图1所示，作为一种计算机存储介质的存储器1005中可以包括操作系统、网络通信模块、用户接口模块以及计算机程序。

在图1所示的三角形图标代码生成装置中，网络接口1004主要用于服务器，与服务器进行数据通信；用户接口1003主要用于连接客户端，与客户端进行数据通信；而处理器1001可以用于调用存储器1005中存储的计算机程序，并执行以下操作：

创建编辑区域，所述编辑区域用来设置三角形的显示属性；

创建预览区域，所述预览区域用来根据所述编辑区域设置的显示属性值显示对应样式的三角形；

创建代码区域，所述代码区域用来根据所述编辑区域设置的显示属性值显示对应的CSS代码；

获取用户在编辑区域设置的实时显示属性值；

基于用户在编辑区域设置的实时显示属性值，在预览区域显示对应样式的三角形；

根据所述编辑区域设置的实时显示属性值，生成对应的CSS代码。

进一步地，所述显示属性包括三角形顶点方向、三角形类型、底边宽度、顶点到底边的高度、旋转角度、背景色和IE兼容性的多种类型。

进一步地，所述创建编辑区域的步骤包括：

用div标签分别创建不同方向的控制块，基于用户点击不同方向的控制块，生成对应方向的三角形；

用input标签创建旋转角度控制条，基于用户拖动旋转角度控制条更改三角形的旋转角度；

用input标签创建两个类型单选项，基于用户点击对应的单选项，生成等边三角形或者等腰三角形；

用input标签创建三角形底边的宽度控制条，基于用户拖动宽度控制条更改三角形底边的宽度；

用input标签创建三角形顶点到底边的高度控制条，基于用户拖动高度控制条更改三角形顶点到底边的高度；

用input标签创建颜色选择器，基于用户点击颜色选择器中不同的颜色区域设置三角形的颜色；

用input标签创建IE兼容可选项，用于设置是否需要生成兼容IE的三角形图标，默认为选中状态。

进一步地，所述创建编辑区域的步骤还包括：

用input标签创建旋转角度输入框，用于输入任意的旋转角度数值；

用input标签创建底边宽度输入框，用于输入任意的底边宽度数值；

用input标签创建顶点高度输入框，用于输入任意的顶点高度数值。

进一步地，所述三角形图标代码生成方法应用于浏览器插件，浏览器中设置用于触发所述三角形图标代码生成方法的触发控件；

在所述创建编辑区域的步骤之前，所述三角形图标代码生成方法还包括：

当检测到用户点击所述触发控件触发的生成指令时，执行所述创建编辑区域的步骤。

进一步地，所述创建预览区域的步骤包括：

用div标签创建画布编辑区，并建立编辑区域显示属性与画布编辑区的赋值关系。

进一步地，处理器1001可以调用存储器1005中存储的计算机程序，还执行以下操作：

用div标签创建文本框，将所述编辑区域的显示属性以字符串的形式赋值到文本框标签；

用button标签创建复制按钮，用于快捷复制生成的代码到剪贴板。

进一步地，所述根据所述编辑区域设置的实时显示属性值，生成对应的CSS代码的步骤包括：

根据所述编辑区域设置的实时显示属性的类型，在预设的CSS代码模板中确定待更新代码内容；

根据所述编辑区域设置的实时显示属性值，对所述待更新代码内容进行替换，以在所述代码区域生成对应的CSS代码。

本发明还提供一种三角形图标代码生成方法，在三角形图标代码生成方法的第一实施例中，参照图2，本发明三角形图标代码生成方法包括：

步骤A10，创建编辑区域，所述编辑区域用来设置三角形的显示属性；

具体地，所述显示属性包括三角形顶点方向、三角形类型、底边宽度、顶点到底边的高度、旋转角度、背景色和IE兼容性的多种类型。

需要说明的是，在编辑区域可以设置三角形的多个显示属性，其中三角形顶点方向属性，即设置三角形顶点的朝向，可以包含四个方向的显示属性值，按照顺时针方向，分别为上、右、下、左，也可以包含八个方向的显示属性值，按照顺时针方向，分别为上、右上、右、右下、下、左下、左、左上，用div标签分别创建不同方向的控制块，用户点击不同方向的控制块，则生成对应顶点朝向的三角形。

三角形类型属性，包括等腰三角形和等边三角形两个属性值，等腰三角形是指至少有两边相等的三角形，等边三角形是指三边相等的三角形，用input标签创建两个类型单选项，用户点击对应的类型单选项，即可生成对应类型的三角形，例如，用户点击等腰三角形单选项，则生成等腰三角形。

底边宽度属性，默认以三角形顶点竖直向上或者向下，X轴方向的边，即与顶点相对的边为底边，用input标签创建三角形底边的宽度控制条，用户通过鼠标拖动宽度控制条可设置三角形底边的具体宽度值。

顶点到底边的高度属性，默认以三角形顶点竖直向上，X轴方向的边为底边，与底边相对的点叫顶点，用input标签创建三角形顶点到底边的高度控制条，用户通过鼠标拖动高度控制条可设置三角形顶点到底边的具体高度值。

旋转角度属性，即以三角形的外心为中心进行旋转，三角形的外心是指三角形三条中垂线的交点，也是三角形外接圆的圆心，用input标签创建旋转角度控制条，用户通过拖动旋转角度控制条可设置三角形的旋转角度，默认旋转角度控制条最左端的旋转角度为0，旋转角度控制条最右端的旋转角度为360，往右拖动旋转角度控制条则三角形以外心为中心顺时针旋转，往左拖动旋转角度控制条则三角形以外心为中心逆时针旋转。

背景色属性，即用来设置三角形的颜色，用input标签创建颜色选择器，用户通过鼠标点击颜色选择器中不同的颜色区域，可为三角形设置所需的颜色。

IE兼容性属性，即用来设置三角形图标是否兼容IE浏览器，即生成的三角形图标是否能在所有版本的IE浏览器中显示，用input标签创建IE兼容可选项，通过用户点击该可选项，可生成兼容IE的三角形。

通过创建编辑区域，用户通过鼠标点击或者拖动即可设置三角形的显示属性值，从而快速生成所需的三角形。

进一步地，创建编辑区域的步骤还包括：

步骤A11，用input标签创建旋转角度输入框，用于输入任意的旋转角度数值；

步骤A12，用input标签创建底边宽度输入框，用于输入任意的底边宽度数值；

步骤A13，用input标签创建顶点高度输入框，用于输入任意的顶点高度数值。

需要说明的是，还可以用input标签创建旋转角度输入框，用户通过输入具体的旋转角度数值，可一键生成所需旋转角度的三角形，例如，用户输入60，则以当前显示的三角形的外心为中心旋转60度，同样的，用input标签创建底边宽度输入框和顶点高度输入框，用户通过输入具体的底边宽度值和具体的顶点高度值，可一键生成所需大小的三角形。无需通过鼠标拖动控制条去设置，可生成精确大小和旋转角度的三角形。

需要说明的是，本发明三角形图标代码生成方法应用于浏览器插件，浏览器端设置用于触发三角形图标代码生成方法的触发控件，也就是浏览器扩展程序的图标，当用户打开浏览器，点击浏览器扩展程序的图标时，执行创建编辑区域的步骤。

步骤A20，创建预览区域，所述预览区域用来根据所述编辑区域设置的显示属性值显示对应样式的三角形；

具体地，所述创建预览区域的步骤包括：

用div标签创建画布编辑区，并建立编辑区域显示属性与画布编辑区的赋值关系。

需要说明的是，为实现预览三角形图标，以便直观判断所设置的三角形图标的大小和颜色是否是前端开发工程师所需要的，用div标签创建画布编辑区，并建立编辑区域的显示属性与画布编辑区的赋值关系，即将编辑区域的显示属性对应的控件赋值到画布编辑区，当监听到释放鼠标行为操作时，在画布编辑区生成与被拖拽的控件元素相对应的三角形图标的代码，并渲染在画布编辑区上，实现根据编辑区域的实时显示属性值，在预览区域实时显示所设置的三角形图标，以便前端开发工程师通过查看预览区域显示的三角形图标，直观判断所设置的三角形是否是自己所需要的，如果不是，则继续通过鼠标更改三角形图标的显示属性。

步骤A30，创建代码区域，所述代码区域用来根据所述编辑区域设置的显示属性值显示对应的CSS代码；

具体地，所述创建代码区域的步骤包括：

用div标签创建文本框，将所述编辑区域的显示属性以字符串的形式赋值到文本框标签；

用button标签创建复制按钮，用于快捷复制生成的代码到剪贴板

可理解的是，为了将生成的三角形图标以代码的形式展示出来，需要用div标签创建文本框，并将编辑区域的显示属性以字符串的形式赋值到本文框标签，从而实现将编辑区域的显示属性以CSS代码的形式展示出来。

进一步地，生成三角形图标的CSS代码是为了供前端开发人员复制使用，用button标签创建复制按钮，用户点击该复制按钮，即可一键复制生成的三角形图标的CSS代码到剪贴板。

步骤A40，获取用户在编辑区域设置的实时显示属性值；

需要说明的是，本实施例的执行主体为三角形图标代码生成插件，三角形图标代码生成插件以浏览器插件的形式挂载在浏览器端，用户打开浏览器，点击浏览器扩展程序的图标，即向浏览器发送打开扩展程序面板的指令，当接收到该指令时，弹出扩展程序操作面板，即生成本发明中的编辑区域、预览区域、代码区域。

在打开扩展程序操作面板后，本发明中的三角形图标代码生成插件会对设置在编辑区域中的显示属性控件元素进行拖拽操作行为的监测，当用户通过鼠标点击或者拖动编辑区域的显示属性控件，当监听到释放鼠标行为操作时，获取鼠标停留的位置信息，并根据鼠标停留的位置信息确定用户调整的显示属性的类型和对应的显示属性数值，即获取用户在编辑区域设置的实时显示属性。

步骤A50，基于用户在编辑区域设置的实时显示属性值，在预览区域显示对应样式的三角形；

本发明中的三角形图标代码生成插件会对设置在编辑区域中的显示属性控件元素进行点击以及拖拽操作行为进行监测，当用户通过鼠标点击或者拖动编辑区域的显示属性控件，当监听到释放鼠标行为操作时，则按照预设的规范，在画布编辑区生成与被拖拽的控件元素相对应的多媒体控件的代码，并渲染在画布编辑区上，即基于用户在编辑区域设置的实时显示属性值，在预览区域实时显示对应样式的三角形。

步骤A60，根据所述编辑区域设置的实时显示属性值，生成对应的CSS代码。

具体地，所述根据所述编辑区域设置的实时显示属性值，生成对应的CSS代码的步骤包括：

根据所述编辑区域设置的实时显示属性的类型，在预设的CSS代码模板中确定待更新代码内容；

根据所述编辑区域设置的实时显示属性值，对所述待更新代码内容进行替换，以在所述代码区域生成对应的CSS代码。

可理解的是，可根据鼠标拖动哪个显示属性控件确定用户在编辑区域设置的实时显示属性的类型，在预设的CSS代码模板中确定待更新代码内容，并根据鼠标拖动显示属性控件后鼠标释放后的位置，确定用户在编辑区域设置的实时显示属性数值，对待更新代码内容进行替换，以在代码区域生成对应显示属性数值的CSS代码，例如如下代码，width:130px表示底边宽度为130px，height: 103px表示顶点到底边的高度为103px，background-color: rgb(295,99,71)表示背景色的红绿蓝颜色强度值分别为295,99,71，transform:rotate(51deg)表示旋转角度为顺时针51deg，_filter表示该生成的三角形图标是兼容IE浏览器的，如果在编辑区域没有选中IE兼容性这一可选项，则生成的CSS代码中不会包含_filter属性。

width: 130px；

height: 103px；

background-color: rgb(295,99,71)；

transform: rotate(51deg)；

_filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000')；

本发明通过创建编辑区域，用来设置三角形的显示属性，创建预览区域，用来根据编辑区域设置的显示属性值显示对应样式的三角形，创建代码区域，用来根据编辑区域设置的显示属性值显示对应的三角形图标的CSS代码，前端开发工程师通过在编辑区域设置三角形的实时显示属性值，可在预览区域实时查看是否是自己所需的三角形，若是，则直接复制代码区域生成的CSS代码即可，不需要重复编写不同的三角形图标代码，提高了开发效率，且在编辑区域可选择是否兼容IE，若选中兼容IE，则生成的三角形CSS代码包含_filter属性，将生成的包含_filter属性的CSS代码插入创建的网页中，在网页中生成的三角形图标可兼容所有版本的IE浏览器。

进一步地，本发明实施例还提出一种三角形图标代码生成装置，所述三角形图标代码生成装置包括：存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述计算机程序被所述处理器执行时实现上述三角形图标代码生成方法的各实施例的步骤。

此外，本发明实施例还提出一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现上述三角形图标代码生成方法的各实施例的步骤。

本发明三角形图标代码生成装置和计算机可读存储介质的具体实施方式的拓展内容与上述三角形图标代码生成方法各实施例基本相同，在此不做累述。

需要说明的是，在本文中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者装置不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者装置所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括该要素的过程、方法、物品或者装置中还存在另外的相同要素。

上述本发明实施例序号仅仅为了描述，不代表实施例的优劣。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质（如ROM/RAM、磁碟、光盘）中，包括若干指令用以使得一台终端（可以是手机，计算机，服务器，空调器，或者网络设备等）执行本发明各个实施例所述的方法。

上面结合附图对本发明的实施例进行了描述，但是本发明并不局限于上述的具体实施方式，上述的具体实施方式仅仅是示意性的，而不是限制性的，本领域的普通技术人员在本发明的启示下，在不脱离本发明宗旨和权利要求所保护的范围情况下，还可做出很多形式，这些均属于本发明的保护之内。

Claims (10)

1.一种三角形图标代码生成方法，其特征在于，所述三角形图标代码生成方法包括：

创建编辑区域，所述编辑区域用来设置三角形的显示属性；

创建预览区域，所述预览区域用来根据所述编辑区域设置的显示属性值显示对应样式的三角形；

创建代码区域，所述代码区域用来根据所述编辑区域设置的显示属性值显示对应的CSS代码；

获取用户在编辑区域设置的实时显示属性值；

基于用户在编辑区域设置的实时显示属性值，在预览区域显示对应样式的三角形；

根据所述编辑区域设置的实时显示属性值，生成对应的CSS代码。

2.如权利要求1所述的三角形图标代码生成方法，其特征在于，所述显示属性包括三角形顶点方向、三角形类型、底边宽度、顶点到底边的高度、旋转角度、背景色和IE兼容性的多种类型。

3.如权利要求2所述的三角形图标代码生成方法，其特征在于，所述创建编辑区域的步骤包括：

用div标签分别创建不同方向的控制块，基于用户点击不同方向的控制块，生成对应方向的三角形；

用input标签创建旋转角度控制条，基于用户拖动旋转角度控制条更改三角形的旋转角度；

用input标签创建两个类型单选项，基于用户点击对应的类型单选项，生成等边三角形或者等腰三角形；

用input标签创建三角形底边的宽度控制条，基于用户拖动宽度控制条更改三角形底边的宽度；

用input标签创建三角形顶点到底边的高度控制条，基于用户拖动高度控制条更改三角形顶点到底边的高度；

用input标签创建颜色选择器，基于用户点击颜色选择器中不同的颜色区域设置三角形的颜色；

用input标签创建IE兼容可选项，用于设置是否需要生成兼容IE的三角形图标，默认为选中状态。

4.如权利要求3所述的三角形图标代码生成方法，其特征在于，所述创建编辑区域的步骤还包括：

用input标签创建旋转角度输入框，用于输入任意的旋转角度数值；

用input标签创建底边宽度输入框，用于输入任意的底边宽度数值；

用input标签创建顶点高度输入框，用于输入任意的顶点高度数值。

5.如权利要求4所述的三角形图标代码生成方法，其特征在于，所述三角形图标代码生成方法应用于浏览器插件，浏览器中设置用于触发所述三角形图标代码生成方法的触发控件；

在所述创建编辑区域的步骤之前，所述三角形图标代码生成方法还包括：

当检测到用户点击所述触发控件触发的生成指令时，执行所述创建编辑区域的步骤。

6.如权利要求5所述的三角形图标代码生成方法，其特征在于，所述创建预览区域的步骤包括：

用div标签创建画布编辑区，并建立编辑区域显示属性与画布编辑区的赋值关系。

7.如权利要求6所述的三角形图标代码生成方法，其特征在于，所述创建代码区域的步骤包括：

用div标签创建文本框，将所述编辑区域的显示属性以字符串的形式赋值到文本框标签；

用button标签创建复制按钮，用于快捷复制生成的代码到剪贴板。

8.如权利要求7所述的三角形图标代码生成方法，其特征在于，所述根据所述编辑区域设置的实时显示属性值，生成对应的CSS代码的步骤包括：

根据所述编辑区域设置的实时显示属性的类型，在预设的CSS代码模板中确定待更新代码内容；

根据所述编辑区域设置的实时显示属性值，对所述待更新代码内容进行替换，以在所述代码区域生成对应的CSS代码。

9.一种三角形图标代码生成装置，其特征在于，所述三角形图标代码生成装置包括：存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述计算机程序被所述处理器执行时实现如权利要求1至8中任一项所述的三角形图标代码生成方法的步骤。

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现如权利要求1至8中任一项所述的三角形图标代码生成方法的步骤。

Images