mirror of
https://gitee.com/ulthon/ulthon_information.git
synced 2026-07-01 16:32:48 +08:00
feat(phone-image): 段落按行截断+overflow跨頁續接
- paginateContent新增overflow截斷:剩餘空間>40px時放入當前頁(CSS裁切) - generateContentPage新增overflowOffset參數:續接頁用負margin-top偏移 - 跨多頁溢出while循環處理:單個塊可跨越3+頁 - 保留orphan control和splitOversizedBlock邏輯 - 不限制塊類型:段落/表格/代碼塊/圖片都可截斷
This commit is contained in:
@@ -619,6 +619,7 @@ var PhoneImageEngine = (function () {
|
||||
var currentPageBlocks = [];
|
||||
var currentHeight = 0;
|
||||
var pageNumber = 1;
|
||||
var currentPageOverflowOffset = 0; // 续接页偏移量,0表示普通页
|
||||
|
||||
for (var i = 0; i < blocks.length; i++) {
|
||||
var block = blocks[i];
|
||||
@@ -628,10 +629,11 @@ var PhoneImageEngine = (function () {
|
||||
// 结束当前页
|
||||
if (currentPageBlocks.length > 0) {
|
||||
contentPages.push(generateContentPage(
|
||||
currentPageBlocks, pageNumber, sizeConfig, false
|
||||
currentPageBlocks, pageNumber, sizeConfig, false, currentPageOverflowOffset
|
||||
));
|
||||
currentPageBlocks = [];
|
||||
currentHeight = 0;
|
||||
currentPageOverflowOffset = 0;
|
||||
pageNumber++;
|
||||
}
|
||||
continue; // 跳过这个 page-break 块本身
|
||||
@@ -651,10 +653,11 @@ var PhoneImageEngine = (function () {
|
||||
// 先把当前页已有的内容推出去
|
||||
if (currentPageBlocks.length > 0) {
|
||||
contentPages.push(generateContentPage(
|
||||
currentPageBlocks, pageNumber, sizeConfig, false
|
||||
currentPageBlocks, pageNumber, sizeConfig, false, currentPageOverflowOffset
|
||||
));
|
||||
currentPageBlocks = [];
|
||||
currentHeight = 0;
|
||||
currentPageOverflowOffset = 0;
|
||||
pageNumber++;
|
||||
}
|
||||
|
||||
@@ -670,10 +673,11 @@ var PhoneImageEngine = (function () {
|
||||
var sb = splitBlocks[s];
|
||||
if (currentHeight + sb.estimatedHeight > contentAreaHeight && currentPageBlocks.length > 0) {
|
||||
contentPages.push(generateContentPage(
|
||||
currentPageBlocks, pageNumber, sizeConfig, false
|
||||
currentPageBlocks, pageNumber, sizeConfig, false, currentPageOverflowOffset
|
||||
));
|
||||
currentPageBlocks = [];
|
||||
currentHeight = 0;
|
||||
currentPageOverflowOffset = 0;
|
||||
pageNumber++;
|
||||
}
|
||||
currentPageBlocks.push(sb);
|
||||
@@ -688,37 +692,46 @@ var PhoneImageEngine = (function () {
|
||||
|
||||
if (currentHeight + block.estimatedHeight > contentAreaHeight && currentPageBlocks.length > 0) {
|
||||
var remainingSpace = contentAreaHeight - currentHeight;
|
||||
// 检查是否可以按句拆分来填满剩余空间
|
||||
var canSplit = (block.type === 'p' || block.type === 'blockquote') &&
|
||||
block.estimatedHeight <= contentAreaHeight && remainingSpace > 50;
|
||||
if (remainingSpace > 40) {
|
||||
// 放入当前页,CSS overflow:hidden 截断溢出部分
|
||||
currentPageBlocks.push(block);
|
||||
|
||||
if (canSplit) {
|
||||
// 按句拆分,逐步填入页面
|
||||
var splitParts = splitOversizedBlock(block, contentAreaHeight);
|
||||
if (splitParts.length > 1) {
|
||||
// 逐句填入当前页剩余空间
|
||||
for (var sp = 0; sp < splitParts.length; sp++) {
|
||||
if (currentHeight + splitParts[sp].estimatedHeight > contentAreaHeight && currentPageBlocks.length > 0) {
|
||||
// 推出当前页(含溢出块,视觉上被 .page-content { overflow:hidden } 裁切)
|
||||
contentPages.push(generateContentPage(
|
||||
currentPageBlocks, pageNumber, sizeConfig, false
|
||||
currentPageBlocks, pageNumber, sizeConfig, false, currentPageOverflowOffset
|
||||
));
|
||||
currentPageBlocks = [];
|
||||
currentHeight = 0;
|
||||
pageNumber++;
|
||||
|
||||
// 续接:下一页从截断处继续显示同一个块
|
||||
var overflowOffset = remainingSpace;
|
||||
var remainingHeight = block.estimatedHeight - overflowOffset;
|
||||
|
||||
// 处理跨多页溢出(一个块可能跨越3+页)
|
||||
while (remainingHeight > contentAreaHeight) {
|
||||
contentPages.push(generateContentPage(
|
||||
[block], pageNumber, sizeConfig, false, overflowOffset
|
||||
));
|
||||
pageNumber++;
|
||||
overflowOffset += contentAreaHeight;
|
||||
remainingHeight -= contentAreaHeight;
|
||||
}
|
||||
currentPageBlocks.push(splitParts[sp]);
|
||||
currentHeight += splitParts[sp].estimatedHeight;
|
||||
}
|
||||
// 跳过后面的 currentPageBlocks.push(block),用拆分后的块代替
|
||||
|
||||
// 最后一部分续接,后续块可以继续添加到这一页
|
||||
currentPageBlocks = [block];
|
||||
currentHeight = remainingHeight;
|
||||
currentPageOverflowOffset = overflowOffset;
|
||||
|
||||
// 块已在上方处理完毕,跳过底部的默认 push
|
||||
continue;
|
||||
}
|
||||
}
|
||||
// 不可拆分(img/pre/table/h)或拆分失败,直接换页
|
||||
|
||||
// 剩余空间太小(<40px),不值得截断,直接换页
|
||||
contentPages.push(generateContentPage(
|
||||
currentPageBlocks, pageNumber, sizeConfig, false
|
||||
currentPageBlocks, pageNumber, sizeConfig, false, currentPageOverflowOffset
|
||||
));
|
||||
currentPageBlocks = [];
|
||||
currentHeight = 0;
|
||||
currentPageOverflowOffset = 0;
|
||||
pageNumber++;
|
||||
}
|
||||
|
||||
@@ -732,12 +745,13 @@ var PhoneImageEngine = (function () {
|
||||
currentHeight -= block.estimatedHeight;
|
||||
if (currentPageBlocks.length > 0) {
|
||||
contentPages.push(generateContentPage(
|
||||
currentPageBlocks, pageNumber, sizeConfig, false
|
||||
currentPageBlocks, pageNumber, sizeConfig, false, currentPageOverflowOffset
|
||||
));
|
||||
pageNumber++;
|
||||
}
|
||||
currentPageBlocks = [block];
|
||||
currentHeight = block.estimatedHeight;
|
||||
currentPageOverflowOffset = 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -745,7 +759,7 @@ var PhoneImageEngine = (function () {
|
||||
// 最后一页
|
||||
if (currentPageBlocks.length > 0) {
|
||||
contentPages.push(generateContentPage(
|
||||
currentPageBlocks, pageNumber, sizeConfig, true
|
||||
currentPageBlocks, pageNumber, sizeConfig, true, currentPageOverflowOffset
|
||||
));
|
||||
}
|
||||
|
||||
@@ -1039,7 +1053,7 @@ var PhoneImageEngine = (function () {
|
||||
/**
|
||||
* 生成内容页HTML(含逐页对齐支持)
|
||||
*/
|
||||
function generateContentPage(blocks, pageNum, sizeConfig, isLast) {
|
||||
function generateContentPage(blocks, pageNum, sizeConfig, isLast, overflowOffset) {
|
||||
// 读取逐页对齐配置
|
||||
var alignment = (config.pageAlignments && config.pageAlignments[pageNum]) || 'top';
|
||||
var valignClass = '';
|
||||
@@ -1067,9 +1081,16 @@ var PhoneImageEngine = (function () {
|
||||
|
||||
// 正文内容区
|
||||
html += '<div class="page-content">';
|
||||
// 续接页:用内层div+负margin-top偏移,使截断处之后的内容可见
|
||||
if (overflowOffset && overflowOffset > 0) {
|
||||
html += '<div style="margin-top:-' + overflowOffset + 'px;">';
|
||||
}
|
||||
for (var i = 0; i < blocks.length; i++) {
|
||||
html += blocks[i].html;
|
||||
}
|
||||
if (overflowOffset && overflowOffset > 0) {
|
||||
html += '</div>';
|
||||
}
|
||||
html += '</div>';
|
||||
|
||||
// 页脚 - 占位,render() 中会替换页码
|
||||
|
||||
Reference in New Issue
Block a user