编辑用户界面html,一种HTML用户界面可视化编辑方法及装置与流程

技术特征：

1.一种超文本标记语言HTML用户界面可视化编辑方法，其特征在于，为HTML用户界面生成显示层遮罩容器和交互层遮罩容器，其中，所述交互层遮罩容器所在层在所述显示层遮罩容器所在层之上，所述显示层遮罩容器所在层在所述HTML用户界面所在层之上，对于所述HTML用户界面上包括的至少一个元素，所述交互层遮罩容器中存在每一个所述元素对应的交互遮罩；还包括：

在捕获到外部针对所述至少一个元素中任一目标元素对应的目标交互遮罩的触发操作时，确定所述显示层遮罩容器中的所述目标元素对应的目标显示遮罩；

控制所述目标显示遮罩的显示效果，以为编辑HTML用户界面提供视觉线索；

在利用所述交互层遮罩容器捕获到外部针对所述目标元素的编辑操作时，根据所述编辑操作的操作类型，对所述目标元素执行相应处理。

2.根据权利要求1所述的方法，其特征在于，

所述操作类型包括：新建元素、选择元素、修改元素属性、移动元素位置、删除元素中的任意一种。

3.根据权利要求2所述的方法，其特征在于，

所述操作类型为新建元素时，所述外部针对所述目标元素的编辑操作包括：鼠标拖动有第一元素并于第一位置处释放所述第一元素；所述对所述目标元素执行相应处理包括：判断所述第一位置与所述目标交互遮罩间的位置关系，在判断出所述第一位置位于所述目标交互遮罩的外部，且所述第一位置与所述目标交互遮罩的第一侧边间的距离不小于第一预设值时，在所述目标元素的第一侧边侧增加所述第一元素；在判断出所述第一位置位于所述目标交互遮罩的内部，且所述第一位置与所述目标交互遮罩的任一侧边间的距离均不小于第二预设值时，在所述目标元素的内部增加所述第一元素；

所述操作类型为选择元素时，所述外部针对所述目标元素的编辑操作包括：鼠标单击且鼠标落点位置位于所述目标交互遮罩内；所述对所述目标元素执行相应处理包括：控制所述目标显示遮罩的显示效果，以为编辑HTML用户界面提供视觉线索；

所述操作类型为修改元素属性时，所述外部针对所述目标元素的编辑操作包括：鼠标针对所述目标元素的元素属性列表控制面板上的任一属性值的点击操作、鼠标拖拽所述目标元素的边框并于第二位置处释放、鼠标双击且鼠标落点位置位于所述目标交互遮罩内中的任意一种；

所述外部针对所述目标元素的编辑操作包括：鼠标针对所述目标元素的元素属性列表控制面板上的任一属性值的点击操作时，所述对所述目标元素执行相应处理包括：采集外部输入的修改值，将所述属性值更新为所述修改值；

所述外部针对所述目标元素的编辑操作包括：鼠标拖拽所述目标元素的边框并于第二位置处释放时，所述对所述目标元素执行相应处理包括：更新所述目标元素的尺寸大小，以使所述目标元素的边框包含所述第二位置；

所述外部针对所述目标元素的编辑操作包括：鼠标双击且鼠标落点位置位于所述目标交互遮罩内时，所述对所述目标元素执行相应处理包括：展示对话框，并采集外部在所述对话框中输入的编辑内容，以及根据所述编辑内容更新所述目标元素；

所述操作类型为移动元素位置时，所述外部针对所述目标元素的编辑操作包括：鼠标拖动所述目标元素并于第三位置处释放所述目标元素；所述对所述目标元素执行相应处理包括：将所述目标元素移动至所述第三位置处；

所述操作类型为删除元素时，所述外部针对所述目标元素的编辑操作包括：鼠标单击、鼠标落点位置位于所述目标交互遮罩内，且外部输入删除命令；所述对所述目标元素执行相应处理包括：删除所述目标元素。

4.根据权利要求3所述的方法，其特征在于，

所述HTML用户界面上包括的任一元素的元素类别包括：独立元素或可容纳至少一个元素的容器元素；

在所述目标元素的内部增加所述第一元素时，所述目标元素的元素类别为容器元素，所述第一元素的元素类别为独立元素或容器元素，所述第一元素为所述HTML用户界面上包括的任一元素或预设元素库中的任一待新建元素。

5.根据权利要求1至4中任一所述的方法，其特征在于，

所述视觉线索包括：所述目标元素在所述HTML用户界面上的元素位置、元素边界、突显标识、与其他元素的关系中的任意一种或多种。

6.一种超文本标记语言HTML用户界面可视化编辑装置，其特征在于，包括：

交互单元，用于在捕获到外部针对所述至少一个元素中任一目标元素对应的目标交互遮罩的触发操作时，向处理单元输出第一触发信号；在利用所述交互层遮罩容器捕获到外部针对所述目标元素的编辑操作时，向所述处理单元输出第二触发信号；

所述处理单元，用于为HTML用户界面生成显示层遮罩容器和交互层遮罩容器，其中，所述交互层遮罩容器所在层在所述显示层遮罩容器所在层之上，所述显示层遮罩容器所在层在所述HTML用户界面所在层之上，对于所述HTML用户界面上包括的至少一个元素，所述交互层遮罩容器中存在每一个所述元素对应的交互遮罩；在接收到所述第一触发信号时，确定所述显示层遮罩容器中的所述目标元素对应的目标显示遮罩；控制所述目标显示遮罩的显示效果，以为编辑HTML用户界面提供视觉线索；在接收到所述第二触发信号时，根据所述编辑操作的操作类型，对所述目标元素执行相应处理。

7.根据权利要求6所述的HTML用户界面可视化编辑装置，其特征在于，

所述操作类型包括：新建元素、选择元素、修改元素属性、移动元素位置、删除元素中的任意一种。

8.根据权利要求7所述的HTML用户界面可视化编辑装置，其特征在于，

所述操作类型为新建元素时，所述交互单元具体用于在利用所述交互层遮罩容器捕获到鼠标拖动有第一元素并于第一位置处释放所述第一元素时，向所述处理单元输出第二触发信号；所述处理单元具体用于在接收到所述第二触发信号时，判断所述第一位置与所述目标交互遮罩间的位置关系，在判断出所述第一位置位于所述目标交互遮罩的外部，且所述第一位置与所述目标交互遮罩的第一侧边间的距离不小于第一预设值时，在所述目标元素的第一侧边侧增加所述第一元素；在判断出所述第一位置位于所述目标交互遮罩的内部，且所述第一位置与所述目标交互遮罩的任一侧边间的距离均不小于第二预设值时，在所述目标元素的内部增加所述第一元素；

所述操作类型为选择元素时，所述交互单元具体用于在利用所述交互层遮罩容器捕获到鼠标单击且鼠标落点位置位于所述目标交互遮罩内时，向所述处理单元输出第二触发信号；所述处理单元具体用于在接收到所述第二触发信号时，控制所述目标显示遮罩的显示效果，以为提示所述目标元素当前处于选中状态提供视觉线索；

所述操作类型为修改元素属性时，所述交互单元具体用于捕获鼠标针对所述目标元素的元素属性列表控制面板上的任一属性值的点击操作、鼠标拖拽所述目标元素的边框并于第二位置处释放、鼠标双击且鼠标落点位置位于所述目标交互遮罩内中的任意一种；

所述交互单元在利用所述交互层遮罩容器捕获到鼠标针对所述目标元素的元素属性列表控制面板上的任一属性值的点击操作时，向所述处理单元输出第一通知信号；所述处理单元具体用于在接收到所述第一通知信号时，采集外部输入的修改值，将所述属性值更新为所述修改值；

所述交互单元在利用所述交互层遮罩容器捕获到鼠标拖拽所述目标元素的边框并于第二位置处释放时，向所述处理单元输出第二通知信号；所述处理单元具体用于在接收到所述第二通知信号时，更新所述目标元素的尺寸大小，以使所述目标元素的边框包含所述第二位置；

所述交互单元在利用所述交互层遮罩容器捕获到鼠标双击且鼠标落点位置位于所述目标交互遮罩内时，向所述处理单元输出第三通知信号；所述处理单元具体用于在接收到所述第三通知信号时，展示对话框，并采集外部在所述对话框中输入的编辑内容，以及根据所述编辑内容更新所述目标元素；

所述操作类型为移动元素位置时，所述交互单元具体用于在利用所述交互层遮罩容器捕获到鼠标拖动所述目标元素并于第三位置处释放所述目标元素时，向所述处理单元输出第二触发信号；所述处理单元具体用于在接收到所述第二触发信号时，将所述目标元素移动至所述第三位置处；

所述操作类型为删除元素时，所述交互单元具体用于在利用所述交互层遮罩容器捕获到鼠标单击、鼠标落点位置位于所述目标交互遮罩内，且外部输入删除命令时，向所述处理单元输出第二触发信号；所述处理单元具体用于在接收到所述第二触发信号时，删除所述目标元素。

9.根据权利要求8所述的HTML用户界面可视化编辑装置，其特征在于，

所述HTML用户界面上包括的任一元素的元素类别包括：独立元素或可容纳至少一个元素的容器元素；

所述处理单元具体用于在所述目标元素的内部增加所述第一元素时，所述目标元素的元素类别为容器元素，所述第一元素的元素类别为独立元素或容器元素，所述第一元素为所述HTML用户界面上包括的任一元素或预设元素库中的任一待新建元素。

10.根据权利要求6至9中任一所述的HTML用户界面可视化编辑装置，其特征在于，

所述视觉线索包括：所述目标元素在所述HTML用户界面上的元素位置、元素边界、突显标识、与其他元素的关系中的任意一种或多种。