diff --git a/public/static/js/phone-image.js b/public/static/js/phone-image.js index c968e1d..2422b22 100644 --- a/public/static/js/phone-image.js +++ b/public/static/js/phone-image.js @@ -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) { - contentPages.push(generateContentPage( - currentPageBlocks, pageNumber, sizeConfig, false - )); - currentPageBlocks = []; - currentHeight = 0; - pageNumber++; - } - currentPageBlocks.push(splitParts[sp]); - currentHeight += splitParts[sp].estimatedHeight; - } - // 跳过后面的 currentPageBlocks.push(block),用拆分后的块代替 - continue; + // 推出当前页(含溢出块,视觉上被 .page-content { overflow:hidden } 裁切) + contentPages.push(generateContentPage( + currentPageBlocks, pageNumber, sizeConfig, false, currentPageOverflowOffset + )); + 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 = [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+负margin-top偏移,使截断处之后的内容可见 + if (overflowOffset && overflowOffset > 0) { + html += '
'; + } for (var i = 0; i < blocks.length; i++) { html += blocks[i].html; } + if (overflowOffset && overflowOffset > 0) { + html += '
'; + } html += '
'; // 页脚 - 占位,render() 中会替换页码