[发明专利]一种HTML文件图文混排显示方法

摘要

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

主权项

一种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文件。