CN103942314B - 一种html文件图文混排显示方法 - Google Patents

Abstract

本发明提出了一种HTML文件图文混排显示方法，包括如下步骤：在HTML文件编辑工具内新建画布，将文本组件调入画布，调整组件编辑区域并布局，向文本组件中添加文字内容，并调整文本组件布局；向画布内添加图片组件，并且把图片保存到临时文件夹中；拖动图片组件到文本组件上方直至合适位置释放图片组件；释放图片组件时，编辑工具捕获到鼠标释放信号，调用文本组件的重绘方法对文本组件进行单个字符操作进行重绘；确定画布展示内容，将画布内组件展示的全部内容信息转化为HTML格式资源；在HTML文件中进行文字图片重排操作；在浏览器中展示步骤混排HTML文件。本发明简单且方便地实现HTML实现图文混排，极大地降低了用户直接手动编写HTML实现图文混排的难度。

Description

一种HTML文件图文混排显示方法

技术领域

本发明涉及HMTL文件制作和展示领域，具体涉及一种HTML文件图文混排显示方法。

背景技术

HTML(HyperTextMarkuplanguage，超级文本标记语言)文档可独立于操作系统，自1990年以来就被用作WorldWideWeb信息表示语言，也是目前应用最多的文档表示格式之一。在网络多媒体技术和数字出版技术快速发展的过程中，HTML不仅用来编写Web网页，也更多用来编排文档、创建列表、建立连接和插入音频、视频和超链接等多媒体内容，通过互联网采用超文本技术向读者提供图、文、声、像等多媒体信息，成为数字内容展现的重要手段之一。内容显示是否清晰明确、是否可确保原版原式、是否支持任意缩放等指标均直接影响读者的直观阅读体验。但是，图文混排作为一种Word中常见的排版方式，在HTML文件的展示却受到一定的限制，仅仅只能居左或居右混排。如何丰富HTML文档缺少的版式信息，特别是文字内容与多媒体内容的混排效果，并具备良好的平台兼容性，成为最核心的关键技术。

发明内容

为了克服上述现有技术中存在的缺陷，本发明的目的是提供一种HTML文件图文混排显示方法，本发明简单且方便地实现HTML实现图文混排。本发明能够在编辑工具中直接预览图片和文字内容，并且进行布局和大小调整，并且最终生成的HTML文件在浏览器上看到的效果和在编辑时的效果相同，极大地降低了用户直接手动编写HTML实现图文混排的难度。

为了实现本发明的上述目的，本发明提供了一种HTML文件图文混排显示方法，包括如下步骤：

S1，在HTML文件编辑工具内新建画布，将文本组件调入画布，调整组件编辑区域并布局，向文本组件中添加文字内容，并调整文本组件布局；

S2：向画布内添加图片组件，并且把图片保存到临时文件夹中；

S3：拖动图片组件到文本组件上方直至合适位置释放图片组件；

S4：释放图片组件时，捕获到鼠标释放信号，调用文本组件的重绘方法对文本组件进行单个字符操作进行重绘；

S5：确定画布展示内容，将画布内组件展示的全部内容信息转化为HTML格式资源；

S6：在HTML文件中进行文字图片重排操作；

S7：在浏览器中展示步骤S6所得混排HTML文件。

本发明的HTML文件图文混排显示方法能够在编辑工具中直接预览图片和文字内容，并且进行布局和大小调整，并且最终生成的HTML文件在浏览器上看到的效果和在编辑时的效果相同，极大地降低了用户直接手动编写HTML实现图文混排的难度。

在本发明的一种优选实施方式中，所述步骤S1、S2为：

S1，在HTML文件编辑工具内新建画布，向画布内添加图片组件，并且把图片保存到临时文件夹中；

S2：将文本组件调入画布，调整组件编辑区域并布局，向文本组件中添加文字内容，并调整文本组件布局。该方法既可先图片，也可先添加文字，操作灵活。

在本发明的一种优选实施方式中，所述步骤S4具体包括如下步骤：

S41，编辑工具捕捉到鼠标释放事件mouseReleaseEvent()，通过此事件定位图片当前所在的位置；

S42，编辑工具调用文本组件的重绘方法paintEvent()，计算单个字符的大小pixelSize和位置坐标(x,y)；

S43，判断每个字符是否在图片所在区域中，其中，以画布的左上角的位置坐标为原点(0，0)，向右为x轴正方向，向下为y轴正方向，图片左上角的位置坐标(x,y)，图片的宽度为Width，图片的高度为height，具体步骤为：

S431，如果字符的纵坐标位置加上单个字符的高度y1+pixelSize.height大于0且不大于y，或者大于y+height且不大于textField.height，则执行步骤S434，否则执行步骤S432，所述textField.height为文本编辑区的纵坐标最大值；

S432，如果字符的横坐标位置加上单个字符的宽度x1+pixelSize.width大于0且不大于x，或者大于x+Width且不大于textField.width，则执行步骤S434，否则执行步骤S433，所述textField.width为文本编辑区的横坐标最大值；

S433，如果字符的横坐标位置加上单个字符的宽度x1+pixelSize.width大于x且不大于x+Width，则将该字符及其后所有字符的横坐标位置向后移动一个字符位置，该字符横坐标位置为x1＝x1+pixelSize.width，返回步骤S432继续循环检查，其中，pixelSize.width为单个字符的宽度；如果如果字符的横坐标位置加上单个字符的宽度到达文本组件的边界区域，x1>textField.width，所述textField.width为文本编辑区的横坐标最大值，则将该字符向下移动一行位置，坐标为(x1＝0,y1+＝pixelSize.height)，所述pixelSize.height为文本每一行的高度；

S434，绘制字符到画布中。

快速准确地实现了字符重绘。

在本发明的一种优选实施方式中，所述步骤S6中，在HTML文件中添加文本换行方法makeTextWrap()方法进行文字图片重排操作，当HTML的onLoad方法响应时调用makeTextWrap()。

在本发明的一种优选实施方式中，所述步骤S6中，进行文字图片重排操作的方法为：

S61，设定图片的位置；

S62，通过计算单个字符的大小pixelSize和位置坐标(x1,y1)，并以画布的左上角的位置坐标为原点(0，0)，向右为x轴正方向，向下为y轴正方向，图片左上角的位置坐标(x,y)，图片的宽度为Width，图片的高度为height；

S63，判断字符是否在图片所在区域中，如果字符的坐标位置(x1+pixelSize.width，y1)在图片区域中，则向文本所在DIV中添加空格，并令x1＝x1+pixelSize.width，返回继续执行步骤S63；

S64，字符不在图片区域的时候才真正添加字符。

快速准确地在HTML文件中实现文字图片重排操作。

本发明具有如下有益效果：

1、本发明HTML文件图文混排制作显示方法可以将图片和文字内容添加到编辑工具中通过鼠标拖动进行布局和位置大小调整，而无需代码编写。

2、本发明HTML文件图文混排制作和显示方法可以在编辑工具中预览到最终HTML在浏览器中呈现效果。

3、本发明HTML文件图文混排制作和显示方法自动保存图片文件到指定临时文件夹，最后获取相对于HTML文件的路径，用户不用担心图片文件路径错误导致HTML文件不能显示的问题。

本发明的附加方面和优点将在下面的描述中部分给出，部分将从下面的描述中变得明显，或通过本发明的实践了解到。

附图说明

本发明的上述和/或附加的方面和优点从结合下面附图对实施例的描述中将变得明显和容易理解，其中：

图1是本发明一种优选实施方式中基于Qt的图文混排的编辑工具显示界面；

图2是本发明一种优选实施方式中利用Chrome浏览器中预览到HTML图文混排效果图；

图3是本发明另一种优选实施方式中利用FireFox浏览器中预览到HTML图文混排效果图。

具体实施方式

下面详细描述本发明的实施例，所述实施例的示例在附图中示出，其中自始至终相同或类似的标号表示相同或类似的元件或具有相同或类似功能的元件。下面通过参考附图描述的实施例是示例性的，仅用于解释本发明，而不能理解为对本发明的限制。

在本发明的描述中，除非另有规定和限定，需要说明的是，术语“安装”、“相连”、“连接”应做广义理解，例如，可以是机械连接或电连接，也可以是两个元件内部的连通，可以是直接相连，也可以通过中间媒介间接相连，对于本领域的普通技术人员而言，可以根据具体情况理解上述术语的具体含义。

本发明提供了一种HTML文件图文混排显示方法，包括如下步骤：

S1，在HTML文件编辑工具内新建画布，将文本组件调入画布，调整组件编辑区域并布局，向文本组件中添加文字内容，并调整文本组件布局；

S2：向画布内添加图片组件，并且把图片保存到临时文件夹中。

在本实施方式中，HTML文件编辑工具为任意能够编辑HTML文件的工具，可以为但不限于基于Qt的图文混排的编辑工具。

在本实施方式中，步骤S1、S2的先后顺序可以调换，即：

首先，在HTML文件编辑工具内新建画布，向画布内添加图片组件，并且把图片保存到临时文件夹中；

然后，将文本组件调入画布，调整组件编辑区域并布局，向文本组件中添加文字内容，并调整文本组件布局。

S3：拖动图片组件到文本组件上方直至合适位置释放图片组件，在本实施方式中，具体的位置用户可以根据实际需要自行设定。

S4：释放图片组件时，编辑工具捕获到鼠标释放信号，调用文本组件的重绘方法对文本组件进行单个字符操作进行重绘。在本实施方式中，采用的文本组件的重绘方法具体可以为但不限于重绘方法paintEvent()，具体包括如下步骤：

S41，编辑工具捕捉到鼠标释放事件mouseReleaseEvent()，通过此事件定位图片当前所在的位置；

S42，编辑工具调用文本组件的重绘方法paintEvent()，计算单个字符的大小pixelSize和位置坐标(x1,y1)；

S43，判断每个字符是否在图片所在区域中，其中，以画布的左上角的位置坐标为原点(0，0)，向右为x轴正方向，向下为y轴正方向，图片左上角的位置坐标(x,y)，图片的宽度为Width，图片的高度为height，具体步骤为：

S431，如果字符的纵坐标位置加上单个字符的高度y1+pixelSize.height大于0且不大于y，或者大于y+height且不大于textField.height，则执行步骤S434，否则执行步骤S432，所述textField.height为文本编辑区的纵坐标最大值；

S432，如果字符的横坐标位置加上单个字符的宽度x1+pixelSize.width大于0且不大于x，或者大于x+Width且不大于textField.width，则执行步骤S434，否则执行步骤S433，所述textField.width为文本编辑区的横坐标最大值；

S433，如果字符的横坐标位置加上单个字符的宽度x1+pixelSize.width大于x且不大于x+Width，则将该字符及其后所有字符的横坐标位置向后移动一个字符位置，该字符横坐标位置为x1＝x1+pixelSize.width，返回步骤S432继续循环检查，其中，pixelSize.width为单个字符的宽度；如果如果字符的横坐标位置加上单个字符的宽度到达文本组件的边界区域，x1>textField.width，所述textField.width为文本编辑区的横坐标最大值，则将该字符向下移动一行位置，坐标为(x1＝0,y1+＝pixelSize.height)，所述pixelSize.height为文本每一行的高度；

S434，绘制字符到画布中。

S5：确定画布展示内容，将画布内组件展示的全部内容信息转化为HTML格式资源。

S6：在HTML文件中进行文字图片重排操作。在HTML文件中添加文本换行方法makeTextWrap()方法进行文字图片重排操作，当HTML的onLoad方法响应时调用makeTextWrap()。进行文字图片重排操作的方法为：

S61，设定图片的位置；

S62，通过计算单个字符的大小pixelSize和位置坐标(x1,y1)，并以画布的左上角的位置坐标为原点(0，0)，向右为x轴正方向，向下为y轴正方向，图片左上角的位置坐标(x,y)，图片的宽度为Width，图片的高度为height；

S63，判断字符是否在图片所在区域中，如果字符的坐标位置(x1+pixelSize.width，y1)在图片区域中，则向文本所在DIV中添加空格，并令x1＝x1+pixelSize.width，返回继续执行步骤S63；在本实施方式中，具体判断字符是否在图片所在区域中即判断坐标x1+pixelSize.width是否在(x，x+Width)的区间范围内，且y1是否在(y，y+height)的区间范围内。

S64，字符不在图片区域的时候才真正添加字符。

S7：在浏览器中展示步骤S6所得混排HTML文件，具体的浏览器可以为任意浏览器，具体可以为但不限于Chrome浏览器和FireFox浏览器。

在本发明的一种更加优选的实施方式中，HTML文件图文混排显示方法具体为：

第一步：基于Qt的图文混排的编辑工具内，如图1所示，点击工具条上的组件按钮，将文本、图片等组件添加到画布。然后监听用户的鼠标事件，利用鼠标的拖拽事件组合来跟踪组件的运动轨迹和最终位置，具体的鼠标的拖拽事件组合包括鼠标移动事件mouseMoveEvent,拖动到达事件dragEnterEvent和拖动释放事件dropEvent；监听鼠标在组建边缘的按下mousePressEvent()、移动mouseMoveEvent()和释放事件mouseReleaseEvent()来确定组件大小的改变。

第二步：选中文本或图片，然后点击属性编辑器按钮，弹出属性编辑框，可以编辑内容、字体、字号、对齐方式等属性信息；也可以选择图片，设置图片是否等比例显示等；将属性都保存于组件实例中。

第三步：在第一步载入图片文件后，用户就可以拖动图片组件进行位置调整。当用户停止拖动的时候，捕捉到鼠标释放事件mouseReleaseEvent()，通过此事件可以定位图片当前所在的位置。

第四步：根据第三步所获取到的图片位置，调用文本组件的重绘方法paintEvent()，计算单个字符的大小pixelSize和坐标(x1,y1)，判断字符是否在图片所在区域中，就可以排定单个字符所在的位置，即坐标x1+pixelSize.width是否在(x，x+Width)的区间范围内，且y1是否在(y，y+height)的区间范围内。当字符的坐标位置恰好在图片区域中，则字符的横坐标向后移动一个字符位置，即x1＝x1+pixelSize.width，如此循环检查。如果到达文本组件的边界区域x1>textField.width，则向下移动一行位置，令x1＝0,y1＝y1+pixelSize.height。如此绘制所有的字符到画布中。

第五步：经过以上步骤，画布内容基本设置完毕，将画布内组件展示的全部内容信息转化为HTML格式资源。具体是：收集画布上的所有组件，然后遍历每个组件获取组件已经设置好的属性，把每个组件都当作一个div标签，进而添加位置、大小、资源等属性。然后通过html构建函数htmlBuild()来生成一个html格式的文件(包含html、head、body等基本标签)，再按顺序把div标签添加到html页面的body中。

第六步：在生成html文件页面中，添加文本换行方法makeTextWrap()，并在body的onLoad(页面加载完成后执行的动作)属性中调用此方法。文本换行方法MakeTextWrap()即是在页面加载后，首先设定图片的位置，然后通过计算单个字符的大小pixelSize和位置坐标(x1,y1)，判断字符是否在图片所在区域中，如果字符的位置恰好在图片区域中，字符的位置被图片占用，此时就向文本所在DIV中添加相应数量的空格来填充，循环计算出字符不在图片区域的时候才真正添加字符。

第七步：使用Chrome或Firefox浏览器打开第六步中生成的html文件。效果如图2和3所示。

在本说明书的描述中，参考术语“一个实施例”、“一些实施例”、“示例”、“具体示例”、或“一些示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本发明的至少一个实施例或示例中。在本说明书中，对上述术语的示意性表述不一定指的是相同的实施例或示例。而且，描述的具体特征、结构、材料或者特点可以在任何的一个或多个实施例或示例中以合适的方式结合。

尽管已经示出和描述了本发明的实施例，本领域的普通技术人员可以理解：在不脱离本发明的原理和宗旨的情况下可以对这些实施例进行多种变化、修改、替换和变型，本发明的范围由权利要求及其等同物限定。

Claims (4)

1.一种HTML文件图文混排显示方法，其特征在于，包括如下步骤：

S1，在HTML文件编辑工具内新建画布，将文本组件调入画布，调整组件编辑区域并布局，向文本组件中添加文字内容，并调整文本组件布局；

S2：向画布内添加图片组件，并且把图片保存到临时文件夹中；

S3：拖动图片组件到文本组件上方直至合适位置释放图片组件；

S4：释放图片组件时，捕获到鼠标释放信号，调用文本组件的重绘方法对文本组件进行单个字符操作进行重绘，具体包括如下步骤：

S41，编辑工具捕捉到鼠标释放事件mouseReleaseEvent()，通过此事件定位图片当前所在的位置；

S42，调用文本组件的重绘方法paintEvent()，计算单个字符的大小pixelSize和位置坐标(x1,y1)；

S43，判断每个字符是否在图片所在区域中，其中，以画布的左上角的位置坐标为原点(0，0)，向右为x轴正方向，向下为y轴正方向，图片左上角的位置坐标(x,y)，图片的宽度为Width，图片的高度为height，具体步骤为：

S431，如果字符的纵坐标位置加上单个字符的高度y1+pixelSize.height大于0且不大于y，或者大于y+height且不大于textField.height，则执行步骤S434，否则执行步骤S432，所述textField.height为文本编辑区的纵坐标最大值；

S432，如果字符的横坐标位置加上单个字符的宽度x1+pixelSize.width大于0且不大于x，或者大于x+Width且不大于textField.width，则执行步骤S434，否则执行步骤S433，所述textField.width为文本编辑区的横坐标最大值；

S433，如果字符的横坐标位置加上单个字符的宽度x1+pixelSize.width大于x且不大于x+Width，则将该字符及其后所有字符的横坐标位置向后移动一个字符位置，该字符横坐标位置x1赋值为x1+pixelSize.width，返回步骤S432继续循环检查，其中，pixelSize.width为单个字符的宽度；如果字符的横坐标位置加上单个字符的宽度到达文本组件的边界区域，x1>textField.width，所述textField.width为文本编辑区的横坐标最大值，则将该字符向下移动一行位置，坐标x1赋值为0,y1赋值为y1+pixelSize.height，所述pixelSize.height为文本每一行的高度；

S434，绘制字符到画布中；

S5：确定画布展示内容，将画布内组件展示的全部内容信息转化为HTML格式文件；

S6：在HTML文件中进行文字图片重排操作，具体方法为：

S61，设定图片的位置；

S62，通过计算单个字符的大小pixelSize和位置坐标(x1,y1)，并以画布的左上角的位置坐标为原点(0，0)，向右为x轴正方向，向下为y轴正方向，图片左上角的位置坐标(x,y)，图片的宽度为Width，图片的高度为height；

S63，判断字符是否在图片所在区域中，如果字符的坐标位置(x1+pixelSize.width，y1)在图片区域中，则向文本所在DIV中添加空格，并将x1赋值为x1+pixelSize.width，返回继续执行步骤S63；

S64，字符不在图片区域的时候才真正添加字符；

S7：在浏览器中展示步骤S6所得混排HTML文件。

2.如权利要求1所述的HTML文件图文混排显示方法，其特征在于，所述步骤S1、S2为：

S1，在HTML文件编辑工具内新建画布，向画布内添加图片组件，并且把图片保存到临时文件夹中；

S2：将文本组件调入画布，调整组件编辑区域并布局，向文本组件中添加文字内容，并调整文本组件布局。

3.如权利要求1所述的HTML文件图文混排显示方法，其特征在于，所述步骤S6中，在HTML文件中添加文本换行方法makeTextWrap()进行文字图片重排操作。

4.如权利要求1或2所述的HTML文件图文混排显示方法，其特征在于，在所述步骤S1和步骤S2之后还具有以下步骤：

选中文本或图片，进行属性编辑，编辑的属性包括内容、字体、字号、对齐方式、设置图片是否等比例显示；并将属性保存于组件实例中。