6
글쎄, 내 현재의 접근 방식으로이 작업을 수행 할 수 있는지 확실하지 않습니다. 현재 뷰포트의 크기 인 페이지에 HTML 문서의 내용을 맞추려고합니다. 저는 현재 문서의 모든 요소를 반복하고 맨 위 오프셋이 현재 페이지의 경계 내에 있는지 확인합니다. 그렇지 않으면이 오프셋은 새 페이지의 시작이되고 페이지 경계는이 오프셋으로 설정됩니다. 뷰포트의 높이를 더한 값.HTML을 페이지로 나눠서 긴 단락으로 나눕니다.
내가 직면 한 문제는 높이가 뷰포트 자체보다 큰 요소 (예 : 단락)가있을 수 있기 때문에 알고리즘이이 요소를 새 페이지의 시작 부분에 배치하더라도, 그 내용이 오버플로됩니다. 첫 번째 슬라이스가 페이지의 나머지 부분을 차지하는 방식으로 이러한 요소를 분할하는 방법을 찾으려고합니다.
이것은 더 어려움을 나타냅니다. 페이지의 나머지 부분에서 단락의 텍스트가 얼마나 잘 맞는지 결정할 수있는 방법을 찾을 수는 있지만 그 자체로는 상당히 어려움이 입증되었지만 DOM의 문제는 여전히 분할되지 않은 상태에서 업데이트되지 않습니다. 다음 페이지의 계산을 엉망으로 만들거나 최소한 알고리즘을 복잡하게 만드는 재귀를 중단하도록 강요합니다.
첫 번째 조각이 페이지의 나머지 공간을 차지하는 방식으로 단락을 분할하는 방법에 대한 제안을 환영합니다. 이것은 지금까지 내 코드입니다 :
편집 :그것은이 단지 거기가 더 절대 위치하거나 요소를 떴다되는 아주 간단한 HTML에서 작동 것이 주목할 가치가있다. 제 경우에는 문제가되지 않습니다.
var elementIndex = -1;
var pages = 1;
var pageBoundary = 0;
var pageBreaks = [];
function calculatePages() {
//first page boundary is window height
pageBoundary = $(window).height();
//do calculations
iterateElements($("body"));
//print results
console.log(pageBreaks);
}
function iterateElements(parent) {
$.each($(parent).children(), function(i, e) {
//increase current element index
elementIndex = elementIndex + 1;
//get element's top offset
var offsetTop = $(e).offset().top;
//get the last position that the element occupies
var elementSpan = offsetTop + $(e).outerHeight();
if ($(e).children().length == 0) { //only leaf nodes will be set as page breaks
//element's start position is outside page boundary
if (offsetTop >= pageBoundary) {
//mark page start with red in order to visualize
$(e).attr("style", "border-top: 1px solid red");
//increase page count
pages = pages + 1;
//new page starts at element's top, next page boundary
//is element's starting position plus the viewport's height
pageBoundary = offsetTop + $(window).height();
//store index of page break
pageBreaks.push(elementIndex);
}
//element's start position is inside current page, but contents overflow
else if (elementSpan >= pageBoundary) {
//NO IDEA WHAT TO DO HERE
//NEED A WAY TO SPLIT LARGE ELEMENTS
}
}
iterateElements(e);
});
}
$(function() {
calculatePages();
});
하나의 순진한 접근법은 단락에서 1/2 단어의 크기를 계산하고, 큰 단락을 두 개로 분할 한 경우 다른 단어로 다시 분할하십시오. –
네, 저의 초기 접근 방식이었습니다. 문제는 이것이 다음 페이지에 여러 단락 단편을 남겨서 텍스트의 정상적인 흐름을 변경시킬 수 있다는 것입니다. 또한 DOM이 함수가 반환 될 때까지 업데이트되지 않기 때문에 재귀를 깨지 않고 1/2 단어가 페이지에 들어 맞는지 확인할 방법이없는 것 같습니다. – JayPea
한 단락이 전체 페이지보다 큰 경우 분명 단락이 분리됩니다. 재귀에 관해서는, 어떤 경우에는 문제에 대한 정상적인 재귀가 잘못된 대답입니다. –