yiming/17168ERP
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

牌位排版調整

Browse Source
This commit is contained in:
minom
2026-07-30 18:01:35 +08:00
parent cc85cb5bd7
commit 4b9448d548
6 changed files with 969 additions and 263 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/admin/print/TabletDesign.aspx
+351 -105
View File
@@ -1365,6 +1365,7 @@ html, body, * {
// fontSize = el.style.fontSize;
// rowWidth = fontSize * 2;
//}
fontSize = el.style.fontSize;
// 1. 依據 textHeight 與 textSpan 計算一行(垂直列)最多能放幾個名字
let th = Number(el.textHeight) || 0;
@@ -1380,31 +1381,77 @@ html, body, * {
if (cols < 1) cols = 1;
let colWidth = Math.floor(w / cols);
html = this.renderNameList(slice, el, colWidth);
html = this.renderNameList(slice, el, 0);
}
else if (el.id === 'alive') {
//console.log("createEl:", slice, el)
let perRow = Math.floor(Number(el.height) / Number(el.textHeight));
let rows = Math.ceil(Number(slice.length) / Number(perRow));//總行數
let rowWidth = Math.floor(Number(el.width) / rows);
fontSize = Math.floor(rowWidth / 2);
if (fontSize > el.style.fontSize) {
fontSize = el.style.fontSize;
rowWidth = fontSize * 2;
}
html = this.renderLiveList(slice, el, rowWidth);
//let perRow = Math.floor(Number(el.height) / Number(el.textHeight));
//let rows = Math.ceil(Number(slice.length) / Number(perRow));//總行數
//let rowWidth = Math.floor(Number(el.width) / rows);
//fontSize = Math.floor(rowWidth / 2);
//if (fontSize > el.style.fontSize) {
// fontSize = el.style.fontSize;
// rowWidth = fontSize * 2;
//}
let th = Number(el.textHeight) || 0;
let span = Number(el.textSpan) || 0;
let h = Number(el.height);
let w = Number(el.width);
let namesPerCol = Math.floor((h + span) / (th + span));
if (namesPerCol < 1) namesPerCol = 1;
// 2. 計算總共會產生幾列 (cols)，並推算出每個名字能分配到的最大欄寬
let cols = Math.ceil(slice.length / namesPerCol);
if (cols < 1) cols = 1;
let colWidth = Math.floor(w / cols);
html = this.renderLiveList(slice, el, colWidth);
}
else {
html = el.text;
let normal = []
normal.push(el.text);
html = this.renderNormalWithSpace(normal,el)
//html = el.text;
}
//el.style.fontSize
return $(`<div class="tablet-element vertical-text ${this.activeId === el.id ? 'selected' : ''}" id="${el.id}"></div>`)
.css({
position: "absolute", left: el.x + "mm", top: el.y + "mm", fontSize: fontSize + 'pt', fontFamily: el.style.fontFamily, "z-index": 9999, visibility: el.style.visibility
position: "absolute", left: el.x + "mm", top: el.y + "mm", fontFamily: el.style.fontFamily, "z-index": 9999, visibility: el.style.visibility
//position: "absolute", left: el.startX + "mm", top: el.startY + "mm", fontSize: el.fontSize + 'pt', fontFamily: el.fontFamily, "z-index": 9999, visibility: el.isActive
})
.html(html);
},
renderNormalWithSpace(mid, d) {
console.log("renderNormal:", d)
let self = this;
let txt = $(`<div class='${d.elementID}'></div>`).css({
"z-index": 9999, visibility: d.visibility,
width: d.width, height: d.height,
padding: "1px",
"writing-mode": "vertical rl",
display: "flex",
"flex-direction": "row",
"flex-wrap": "wrap",
margin: "auto",
//"letter-spacing": "0.1em",
"column-gap": `${d.textSpan}px`,
//"row-gap": "1px",
"align-items": "flex-start",
"justify-content": "start",
"font-size":`${d.style?d.style.fontSize:d.fontSize}pt`
});
//console.log("吼優:",mid);
mid.forEach(x => {
let dd = $(`<div>${x}</div>`).css({
"margin-bottom": "10px",
"margin-left": "5px",
"text-justify": "inter-character",
"white-space": "pre-line",
});
$(txt).append(dd);
});
return txt;
},
calcIndividualFontSize(name, el, maxW) {
let s = Number(el.style.fontSize);
let maxH = Number(el.textHeight); // 限制在單一名字預設的區塊高度內
@@ -1413,106 +1460,257 @@ html, body, * {
while (s >= 12) {
let s_px = s * 1.333; // 將 pt 轉換為 px
// 如果單行高度夠放，直接回傳當下大小 (不會過度縮小)
if (l * s_px <= maxH) {
return s;
}
//if (l * s_px <= maxH) {
// return s;
//}
// 單行放不下，模擬多行折疊後的總寬度
let charsPerCol = Math.floor(maxH / s_px);
if (charsPerCol < 1) charsPerCol = 1;
let cols = Math.ceil(l / charsPerCol);
let neededWidth = cols * (s_px * 1.1); // 1.1 為緊密行高
let neededWidth = (cols===1)?s_px:cols * (s_px * 1.1); // 1.1 為緊密行高
// 如果折疊後的總寬度不超過分配到的橫向欄寬，就是最佳字體
if (neededWidth <= maxW) {
if (neededWidth <= maxW&&(cols>1||l*s_px<=maxH)) {
return s;
}
s -= 1; // 否則繼續縮小 1pt
}
return 12; // 極限最小字體
},
countFontSize(name, el, baseFontSize) {
let s = Number(baseFontSize);
renderNameList(names, el, rowWidth) {
let h = Number(el.height);
let w = Number(el.width);
let l = Number(name.length);
let th = Number(el.textHeight) || h;
let gap = 5; // 對應 span 的 margin-left
// 逐步縮小字體 (最低限制到 4pt)
while (s >= 4) {
// ★ 關鍵修正：將 pt 轉換為實際的像素(px)高度 (1pt ≈ 1.333px)
let s_px = s * 1.333;
let s = Number(el.style.fontSize);
let sizes = [];
// 如果單行的高度夠放
if (l * s_px <= h) {
// 如果原本的字體就放得下回傳 0，否則回傳縮小後的字體大小
return s === Number(baseFontSize) ? 0 : s;
//// 1. 模擬排版：找出能讓全體塞入的最佳字體組合
//while (s >= 12) {
// let short_s_px = s * 1.333;
// let long_s = Math.floor(s * 0.75); // 長字體最多縮小 25%
// if (long_s < 12) long_s = 12;
// let long_s_px = long_s * 1.333;
// let currentColHeight = 0;
// let totalWidth = 0;
// let tempSizes = [];
// for (let i = 0; i < names.length; i++) {
// let name = names[i];
// let l = name.length;
// let isMulti = (l * short_s_px) > th;
// let size = isMulti ? long_s : s;
// let size_px = isMulti ? long_s_px : short_s_px;
// tempSizes.push({ name: name, size: size, isMulti: isMulti });
// if (isMulti) {
// // 多行長名
// let charsPerCol = Math.floor(h / size_px);
// if (charsPerCol < 1) charsPerCol = 1;
// let lines = Math.ceil(l / charsPerCol);
// let nameW = lines * (size_px * 1.1); // 1.1倍行距
// if (currentColHeight > 0) currentColHeight = 0;
// totalWidth += nameW + gap;
// } else {
// // 單行短名
// if (currentColHeight > 0 && (currentColHeight + th + gap) <= h) {
// currentColHeight += th + gap;
// } else {
// currentColHeight = th;
// totalWidth += short_s_px + gap;
// }
// }
// }
// if (totalWidth > 0) totalWidth -= gap;
// // 總寬度未爆框，確定最佳組合
// if (totalWidth <= w) {
// sizes = tempSizes;
// break;
// }
// s -= 1;
//}
//// 處理極端情況
//if (sizes.length === 0) {
// sizes = names.map(name => {
// return { name: name, size: 12, isMulti: (name.length * 12 * 1.333) > th };
// });
//}
// 1. 模擬排版：找出能讓全體塞入的最佳字體組合
while (s >= 12) {
let short_s_px = s * 1.333;
let hasShort = names.some(n => (n.length * short_s_px) <= th);
let long_s = hasShort ? Math.floor(s * 0.75) : s; // 長字體最多縮小 25%
if (long_s < 12) long_s = 12;
let long_s_px = long_s * 1.333;
let currentColHeight = 0;
let totalWidth = 0;
let tempSizes = [];
let anyWrapped = false;
for (let i = 0; i < names.length; i++) {
let name = names[i];
let l = name.length;
//let isMulti = (l * short_s_px) > th;
let isShort = (l * short_s_px) <= th;
let size = isShort ? s : long_s;//isMulti ? long_s : s;
let size_px = size * 1.333; //isMulti ? long_s_px : short_s_px;
let isMulti = !isShort && (l * size_px >= h);
if (isMulti) anyWrapped = true;
tempSizes.push({ name: name, size: size, isMulti: isMulti, isShort: isShort });
if (isMulti) {
// 多行長名
let charsPerCol = Math.floor(h / size_px);
if (charsPerCol < 1) charsPerCol = 1;
let lines = Math.ceil(l / charsPerCol);
let nameW = lines * (size_px * 1.1); // 1.1倍行距
if (currentColHeight > 0) currentColHeight = 0;
totalWidth += nameW + gap;
} else {
if (isShort) {
// 單行短名
if (currentColHeight > 0 && (currentColHeight + th + gap) <= h) {
currentColHeight += th + gap;
} else {
currentColHeight = th;
totalWidth += short_s_px + gap;
}
} else {
currentColHeight = 0;
totalWidth += size_px + gap;
}
}
}
// 單行放不下，必須折行
let charsPerCol = Math.floor(h / s_px); // 一行(垂直)最多能塞幾個字
if (charsPerCol < 1) charsPerCol = 1;
if (totalWidth > 0) totalWidth -= gap;
let cols = Math.ceil(l / charsPerCol); // 計算總共需要折成幾行
let neededWidth = cols * (s_px * 1.2); // 估算折行後需要的總像素寬度 (1.2為行距緩衝)
// 總寬度未爆框，確定最佳組合
if (totalWidth <= w) {
if (hasShort) {
sizes = tempSizes;
break;
} else {
if (!anyWrapped || s === 12) {
sizes = tempSizes;
break;
}
}
// 若折行後的總寬度小於等於容器寬度，代表此字體大小剛好能安全放下
if (neededWidth <= w) {
return s;
}
s -= 1; // 放不下則縮小 1pt 繼續嘗試
s -= 1;
}
return 8; // 極限最小字體
},
renderNameList(names, el,rowWidth) {
// 處理極端情況
if (sizes.length === 0) {
sizes = names.map(name => {
return { name: name, size: 12, isMulti: (name.length * 12 * 1.333) > th };
});
}
// 2. 建立外層的 Flexbox 容器
let $namelist = $(`<div class='nameList'></div>`).css({
"writing-mode": "vertical rl",
"writing-mode": "vertical-rl",
display: "flex",
"flex-direction": "row",
"flex-wrap": "wrap",
"align-content": "center",
"align-items": "center", // 確保元素靠上對齊
margin: "auto",
width: `${el.width}px`,
height: `${el.height}px`,
border: "0px solid #ccc",
padding: "1px",
"font-family": el.fontFamily,
//"letter-spacing": `${el.textSpan}px`,
"column-gap": `${el.textSpan}px`,
"align-items": "center",
"font-family": el.fontFamily
});
//
//"row-gap": "1px",
// 3. 將資料物件傳給 renderNameSpan 產生子元素
let self = this;
names.forEach(n => {
$namelist.append(self.renderNameSpan(n, el, rowWidth))
})
sizes.forEach(item => {
$namelist.append(self.renderNameSpan(item, el));
});
return $namelist;
//let $namelist = $(`<div class='nameList'></div>`).css({
// "writing-mode": "vertical rl",
// display: "flex",
// "flex-direction": "row",
// "flex-wrap": "wrap",
// margin: "auto",
// width: `${el.width}px`,
// height: `${el.height}px`,
// border: "0px solid #ccc",
// padding: "1px",
// "font-family": el.fontFamily,
// //"letter-spacing": `${el.textSpan}px`,
// "column-gap": `${el.textSpan}px`,
// "align-items": "center",
//});
////
////"row-gap": "1px",
//let self = this;
//names.forEach(n => {
// $namelist.append(self.renderNameSpan(n, el, rowWidth))
//})
//return $namelist;
},
renderNameSpan(name, el, colWidth) {
// 為「這個名字」獨立計算出專屬的最完美字體大小
let indSize = this.calcIndividualFontSize(name, el, colWidth);
// 2. 判斷是否發生了折行 (名字長度 * 單字像素高度 > 分配到的最大高度)
let s_px = indSize * 1.333;
let isMultiLine = (name.length * s_px) > Number(el.textHeight);
renderNameSpan(item, el, colWidth) {
let th = Number(el.textHeight) || Number(el.height)
//let minH = item.isMulti ? `${d.height}px` : `${d.textHeight}px`;
let minH = item.isShort ? `${th}px` : `${el.height}px`
;
let alignStyle = item.isMulti ? "start" : "justify";
// 3. 根據是否折行動態決定對齊方式
// 單行：分散對齊 (justify) / 多行：置中對齊 (center) 或是改為 靠上對齊 (start)
let alignStyle = isMultiLine ? "start" : "justify";
return $(`<span style="font-size: ${indSize}pt;">${name}</span>`).css({
return $(`<span style="font-size: ${item.size}pt;">${item.name}</span>`).css({
display: "block",
"min-height": `${el.textHeight}px`,
"min-height": minH, // 強制多行長名撐滿高度，避免其他名字墊底
"max-height": `${el.height}px`,
width: "auto",
"line-height": "1.1",
"text-align": alignStyle, // ★ 動態套用對齊方式
"text-align-last": alignStyle, // ★ 動態套用最後一行對齊方式
"text-align": alignStyle,
"text-align-last": alignStyle,
"margin-left": "5px",
"text-justify": "inter-character",
"word-break": "break-all"
});
//// 為「這個名字」獨立計算出專屬的最完美字體大小
//let indSize = this.calcIndividualFontSize(name, el, colWidth);
//// 2. 判斷是否發生了折行 (名字長度 * 單字像素高度 > 分配到的最大高度)
//let s_px = indSize * 1.333;
//let isMultiLine = (name.length * s_px) > Number(el.textHeight);
//// 3. 根據是否折行動態決定對齊方式
//// 單行：分散對齊 (justify) / 多行：置中對齊 (center) 或是改為 靠上對齊 (start)
//let alignStyle = isMultiLine ? "start" : "justify";
//return $(`<span style="font-size: ${indSize}pt;">${name}</span>`).css({
// display: "block",
// "min-height": `${el.textHeight}px`,
// "max-height": `${el.height}px`,
// width: "auto",
// "line-height": "1.1",
// "text-align": alignStyle, // ★ 動態套用對齊方式
// "text-align-last": alignStyle, // ★ 動態套用最後一行對齊方式
// "margin-left": "5px",
// "text-justify": "inter-character",
// "word-break": "break-all"
//});
//return $(`<span>${name}</span>`).css({
// display: "block",
// "min-height": `${el.textHeight}px`,
@@ -1551,19 +1749,42 @@ html, body, * {
})
return $namelist;
},
renderLiveSpan(name, el, rowWidth) {
//console.log("renderLiveSpan:", name, el );
return $(`<span>${name}</span>`).css({
renderLiveSpan(name, el, colWidth) {
// 為「這個名字」獨立計算出專屬的最完美字體大小
let indSize = this.calcIndividualFontSize(name, el, colWidth);
// 2. 判斷是否發生了折行 (名字長度 * 單字像素高度 > 分配到的最大高度)
let s_px = indSize * 1.333;
let isMultiLine = (name.length * s_px) > Number(el.textHeight);
// 3. 根據是否折行動態決定對齊方式
// 單行：分散對齊 (justify) / 多行：置中對齊 (center) 或是改為 靠上對齊 (start)
let alignStyle = isMultiLine ? "start" : "justify";
return $(`<span style="font-size: ${indSize}pt;">${name}</span>`).css({
display: "block",
"min-height": `${el.textHeight}px`,
"max-height": `${el.height}px`,
width: `${rowWidth}px`,
"text-align": "justify",
"text-align-last": "justify",
width: "auto",
"line-height": "1.1",
"text-align": alignStyle, // ★ 動態套用對齊方式
"text-align-last": alignStyle, // ★ 動態套用最後一行對齊方式
"margin-left": "5px",
"text-justify": "inter-character",
});//"margin-bottom": `${el.textSpan}px`,
"word-break": "break-all"
});
//console.log("renderLiveSpan:", name, el );
//return $(`<span>${name}</span>`).css({
// display: "block",
// "min-height": `${el.textHeight}px`,
// "max-height": `${el.height}px`,
// width: `${rowWidth}px`,
// "text-align": "justify",
// "text-align-last": "justify",
// "margin-left": "5px",
// "text-justify": "inter-character",
//});//"margin-bottom": `${el.textSpan}px`,
},
// 品字佈局邏輯：一上二下
renderRoster(names, el,rowWidth) {
@@ -1704,6 +1925,7 @@ html, body, * {
//}
// 1. 依據 textHeight 與 textSpan 計算一行(垂直列)最多能放幾個名字
let th = Number(el.textHeight) || 0;
let span = Number(el.textSpan) || 0;
let h = Number(el.height);
@@ -1718,47 +1940,71 @@ html, body, * {
let colWidth = Math.floor(w / cols);
//console.log(el.height, el.textHeight, perRow, rows, rowWidth, fontSize)
html = this.renderNameList(slice, el, colWidth);//el.style.fontSize
html = this.renderNameList(slice, el, 0);//el.style.fontSize
$(`.tablet-element[id="${this.activeId}"]`).css({
position: "absolute", left: el.x + "mm", top: el.y + "mm", fontSize: el.style.fontSize + 'pt', fontFamily: el.style.fontFamily, "z-index": 9999, visibility: el.style.visibility
}).html(html);
} else if (this.activeId === "alive") {
let names = el.text.split('\n').filter(s => s.trim());
let slice = names.slice(0 * this.rosterLimit, (0 + 1) * this.rosterLimit);
let perRow = Math.floor(Number(el.height) / Number(el.textHeight));
let rows = Math.ceil(Number(slice.length) / Number(perRow));//總行數
let rowWidth = Math.floor(Number(el.width) / rows);
let fontSize = Math.floor(rowWidth / 2);
if (fontSize > el.style.fontSize) {
fontSize = el.style.fontSize;
rowWidth = fontSize * 2;
}
html = this.renderLiveList(slice, el, rowWidth);
$(`.tablet-element[id="${this.activeId}"]`).css({
position: "absolute", left: el.x + "mm", top: el.y + "mm", fontSize: fontSize + 'pt', fontFamily: el.style.fontFamily, "z-index": 9999, visibility: el.style.visibility
}).html(html);
} else if (this.activeId === "righttitle") {
$(`.tablet-element[id="${this.activeId}"]`).css({
position: "absolute", left: el.x + "mm", top: el.y + "mm", fontSize: el.style.fontSize + 'pt',
fontFamily: el.style.fontFamily, "z-index": 9999, visibility: el.style.visibility,
width: el.width, height: el.height
}).text(el.text);
} else if (this.activeId === "lefttitle") {
$(`.tablet-element[id="${this.activeId}"]`).css({
position: "absolute", left: el.x + "mm", top: el.y + "mm", fontSize: el.style.fontSize + 'pt',
fontFamily: el.style.fontFamily, "z-index": 9999, visibility: el.style.visibility,
width: el.width, height: el.height
}).text(el.text);
} else if (this.activeId === "address") {
$(`.tablet-element[id="${this.activeId}"]`).css({
position: "absolute", left: el.x + "mm", top: el.y + "mm", fontSize: el.style.fontSize + 'pt',
fontFamily: el.style.fontFamily, "z-index": 9999, visibility: el.style.visibility,
width: el.width, height: el.height
}).text(el.text);
} else {
//let perRow = Math.floor(Number(el.height) / Number(el.textHeight));
//let rows = Math.ceil(Number(slice.length) / Number(perRow));//總行數
//let rowWidth = Math.floor(Number(el.width) / rows);
//let fontSize = Math.floor(rowWidth / 2);
//if (fontSize > el.style.fontSize) {
// fontSize = el.style.fontSize;
// rowWidth = fontSize * 2;
//}
let th = Number(el.textHeight) || 0;
let span = Number(el.textSpan) || 0;
let h = Number(el.height);
let w = Number(el.width);
let namesPerCol = Math.floor((h + span) / (th + span));
if (namesPerCol < 1) namesPerCol = 1;
// 2. 計算總共會產生幾列 (cols)，並推算出每個名字能分配到的最大欄寬
let cols = Math.ceil(slice.length / namesPerCol);
if (cols < 1) cols = 1;
let colWidth = Math.floor(w / cols);
html = this.renderLiveList(slice, el, colWidth);
$(`.tablet-element[id="${this.activeId}"]`).css({
position: "absolute", left: el.x + "mm", top: el.y + "mm", fontSize: el.style.fontSize + 'pt', fontFamily: el.style.fontFamily, "z-index": 9999, visibility: el.style.visibility
}).text(el.text);
}).html(html);
} else if (this.activeId === "righttitle") {
let normal = [];
normal.push(el.text)
html = this.renderNormalWithSpace(normal,el)
$(`.tablet-element[id="${this.activeId}"]`).css({
position: "absolute", left: el.x + "mm", top: el.y + "mm", fontSize: el.style.fontSize + 'pt',
fontFamily: el.style.fontFamily, "z-index": 9999, visibility: el.style.visibility,
width: el.width, height: el.height
}).html(html)//.text(el.text);
} else if (this.activeId === "lefttitle") {
let normal = [];
normal.push(el.text)
html = this.renderNormalWithSpace(normal, el)
$(`.tablet-element[id="${this.activeId}"]`).css({
position: "absolute", left: el.x + "mm", top: el.y + "mm", fontSize: el.style.fontSize + 'pt',
fontFamily: el.style.fontFamily, "z-index": 9999, visibility: el.style.visibility,
width: el.width, height: el.height
}).html(html)//.text(el.text);
} else if (this.activeId === "address") {
let normal = [];
normal.push(el.text)
html = this.renderNormalWithSpace(normal, el)
$(`.tablet-element[id="${this.activeId}"]`).css({
position: "absolute", left: el.x + "mm", top: el.y + "mm", fontSize: el.style.fontSize + 'pt',
fontFamily: el.style.fontFamily, "z-index": 9999, visibility: el.style.visibility,
width: el.width, height: el.height
}).html(html)//.text(el.text);
} else {
let normal = [];
normal.push(el.text)
html = this.renderNormalWithSpace(normal, el)
$(`.tablet-element[id="${this.activeId}"]`).css({
position: "absolute", left: el.x + "mm", top: el.y + "mm", fontSize: el.style.fontSize + 'pt', fontFamily: el.style.fontFamily, "z-index": 9999, visibility: el.style.visibility
}).html(html)//.text(el.text);
}
//this.render();
},
web/admin/print/html/tablet-1_new.svg
+4 -4
View File
@@ -147,9 +147,9 @@
<rect fill="none" height="510.24" id="TXT_x5F_L" width="51.02" x="16.06" y="479.15"/>
<rect fill="none" height="45.35" id="TXT_x5F_T1" width="283.46" x="39.43" y="4.16"/>
<rect fill="none" height="34.02" id="TXT_x5F_T2" width="70.87" x="274.24" y="57.72"/>
<text fill="#000000" font-family="DFKai-SB" font-size="24" font-weight="bold" id="svg_129" stroke="#000000" stroke-width="0" text-anchor="middle" x="46.58" xml:space="preserve" y="491.14">陽</text>
<text fill="#000000" font-family="DFKai-SB" font-size="24" font-weight="bold" id="svg_130" stroke="#000000" stroke-width="0" text-anchor="middle" x="46.58" xml:space="preserve" y="521.14">上</text>
<text fill="#000000" font-family="DFKai-SB" font-size="24" font-weight="bold" id="svg_131" stroke="#000000" stroke-width="0" text-anchor="middle" x="46.58" xml:space="preserve" y="920.14">拜</text>
<text fill="#000000" font-family="DFKai-SB" font-size="24" font-weight="bold" id="svg_132" stroke="#000000" stroke-width="0" text-anchor="middle" x="46.58" xml:space="preserve" y="950.14">薦</text>
<text fill="#000000" font-family="DFKai-SB" font-size="24" font-weight="bold" id="svg_129" stroke="#000000" stroke-width="0" text-anchor="middle" x="35.58" xml:space="preserve" y="491.14">陽</text>
<text fill="#000000" font-family="DFKai-SB" font-size="24" font-weight="bold" id="svg_130" stroke="#000000" stroke-width="0" text-anchor="middle" x="35.58" xml:space="preserve" y="521.14">上</text>
<text fill="#000000" font-family="DFKai-SB" font-size="24" font-weight="bold" id="svg_131" stroke="#000000" stroke-width="0" text-anchor="middle" x="35.58" xml:space="preserve" y="920.14">拜</text>
<text fill="#000000" font-family="DFKai-SB" font-size="24" font-weight="bold" id="svg_132" stroke="#000000" stroke-width="0" text-anchor="middle" x="35.58" xml:space="preserve" y="950.14">薦</text>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 99 KiB

After

Width:  |  Height:  |  Size: 99 KiB

web/admin/print/print_multi_new.aspx
+270 -48
View File
@@ -367,92 +367,263 @@
let ancestorFontSize = 16;
details.forEach(d => {
if (d.isActive != "hidden") {
let newFontSize = self.scaleFontSize(mid, d.fontSize, d.width);
let newFontSize =d.fontSize //self.scaleFontSize(mid, d.fontSize, d.width);
let html = "";
let alive = "";
let yang = "";
let bi = "";
if (d.elementID === 'title1') {
let perRow = Math.floor(Number(d.height) / Number(d.textHeight));
let rows = Math.ceil(Number(mid.length) / Number(perRow));//總行數
let rowWidth = Math.floor(Number(d.width) / rows);
newFontSize = Math.floor(rowWidth / 2);
if (newFontSize > d.fontSize) {
newFontSize = d.fontSize;
rowWidth = newFontSize * 2;
let h = Number(d.height);
let w = Number(d.width);
let th = Number(d.textHeight) || h;
let gap = 5; // 對應 span 的 margin-left
let s = Number(d.fontSize);
let sizes = [];
// 1. 模擬排版：找出能讓全體塞入的最佳字體組合
while (s >= 12) {
let short_s_px = s * 1.333;
let hasShort = mid.some(n => (n.length * short_s_px) <= th);
let long_s = hasShort ? Math.floor(s * 0.75) : s; // 長字體最多縮小 25%
if (long_s < 12) long_s = 12;
let long_s_px = long_s * 1.333;
let currentColHeight = 0;
let totalWidth = 0;
let tempSizes = [];
let anyWrapped = false;
for (let i = 0; i < mid.length; i++) {
let name = mid[i];
let l = name.length;
//let isMulti = (l * short_s_px) > th;
let isShort = (l * short_s_px) <= th;
let size = isShort ? s : long_s;//isMulti ? long_s : s;
let size_px = size * 1.333; //isMulti ? long_s_px : short_s_px;
let isMulti = !isShort && (l * size_px >= h);
if (isMulti) anyWrapped = true;
tempSizes.push({ name: name, size: size, isMulti: isMulti,isShort:isShort });
if (isMulti) {
// 多行長名
let charsPerCol = Math.floor(h / size_px);
if (charsPerCol < 1) charsPerCol = 1;
let lines = Math.ceil(l / charsPerCol);
let nameW = lines * (size_px * 1.1); // 1.1倍行距
if (currentColHeight > 0) currentColHeight = 0;
totalWidth += nameW + gap;
} else {
if (isShort) {
// 單行短名
if (currentColHeight > 0 && (currentColHeight + th + gap) <= h) {
currentColHeight += th + gap;
} else {
currentColHeight = th;
totalWidth += short_s_px + gap;
}
} else {
currentColHeight = 0;
totalWidth += size_px + gap;
}
}
}
if (totalWidth > 0) totalWidth -= gap;
// 總寬度未爆框，確定最佳組合
if (totalWidth <= w) {
if (hasShort) {
sizes = tempSizes;
break;
} else {
if (!anyWrapped || s === 12) {
sizes = tempSizes;
break;
}
}
}
s -= 1;
}
// 處理極端情況
if (sizes.length === 0) {
sizes = names.map(name => {
return { name: name, size: 12, isMulti: (name.length * 12 * 1.333) > th };
});
}
// 2. 建立外層的 Flexbox 容器
let $namelist = $(`<div class='nameList'></div>`).css({
"writing-mode": "vertical rl",
"writing-mode": "vertical-rl",
display: "flex",
"flex-direction": "row",
"flex-wrap": "wrap",
"align-content": "center",
"align-items": "center", // 確保元素靠上對齊
margin: "auto",
width: `${d.width}px`,
height: `${d.height}px`,
border: "0px solid #ccc",
padding: "1px",
"font-family": style.fontFamily,
//"letter-spacing": "0.1em",
"column-gap": `${d.textSpan}px`,
//"row-gap": "1px",
"align-items": "center",
"justify-content": "start",
"font-family":d.fontFamily
});
sizes.forEach(item => {
let th = Number(d.textHeight) || Number(d.height)
//let minH = item.isMulti ? `${d.height}px` : `${d.textHeight}px`;
let minH = item.isShort ? `${th}px` : `${d.height}px`
;
let alignStyle = item.isMulti ? "start" : "justify";
mid.forEach(z => {
let info = self.getTextInfo(z, newFontSize);
let spanWidth = mid.length > 1 ? newFontSize : d.width
let height = d.textHeight;
if (info.height >= d.textHeight) {//width
height = d.height;
}
let $span = $(`<span class="nameSpan">${z}</span>`).css({
let $span= $(`<span style="font-size: ${item.size}pt;">${item.name}</span>`).css({
display: "block",
"min-height": `${height}px`,
"min-height": minH, // 強制多行長名撐滿高度，避免其他名字墊底
"max-height": `${d.height}px`,
"max-width": `${rowWidth}px`,
//width: `${newFontSize}px`,
"text-align": "justify",
"text-align-last": "justify",
//"margin-bottom": "20px",
width: "auto",
"line-height": "1.1",
"text-align": alignStyle,
"text-align-last": alignStyle,
"margin-left": "5px",
"text-justify": "inter-character",
"white-space": "pre-line",
//"justify-content":"center"
"word-break": "break-all"
});
$namelist.append($span);
});
//let perRow = Math.floor(Number(d.height) / Number(d.textHeight));
//let rows = Math.ceil(Number(mid.length) / Number(perRow));//總行數
//let rowWidth = Math.floor(Number(d.width) / rows);
//newFontSize = Math.floor(rowWidth / 2);
//if (newFontSize > d.fontSize) {
// newFontSize = d.fontSize;
// rowWidth = newFontSize * 2;
//}
//let th = Number(d.textHeight) || 0;
//let span = Number(d.textSpan) || 0;
//let h = Number(d.height);
//let w = Number(d.width);
//let namesPerCol = Math.floor((h + span) / (th + span));
//if (namesPerCol < 1) namesPerCol = 1;
//// 2. 計算總共會產生幾列 (cols)，並推算出每個名字能分配到的最大欄寬
//let cols = Math.ceil(mid.length / namesPerCol);
//if (cols < 1) cols = 1;
//let colWidth = Math.floor(w / cols);
//let $namelist = $(`<div class='nameList'></div>`).css({
// "writing-mode": "vertical rl",
// display: "flex",
// "flex-direction": "row",
// "flex-wrap": "wrap",
// margin: "auto",
// width: `${d.width}px`,
// height: `${d.height}px`,
// border: "0px solid #ccc",
// padding: "1px",
// "font-family": style.fontFamily,
// //"letter-spacing": "0.1em",
// "column-gap": `${d.textSpan}px`,
// //"row-gap": "1px",
// "align-items": "center",
// "justify-content": "start",
//});
//mid.forEach(z => {
// //let info = self.getTextInfo(z, newFontSize);
// //let spanWidth = mid.length > 1 ? newFontSize : d.width
// //let height = d.textHeight;
// //if (info.height >= d.textHeight) {//width
// // height = d.height;
// //}
// //let $span = $(`<span class="nameSpan">${z}</span>`).css({
// // display: "block",
// // "min-height": `${height}px`,
// // "max-height": `${d.height}px`,
// // "max-width": `${rowWidth}px`,
// // //width: `${newFontSize}px`,
// // "text-align": "justify",
// // "text-align-last": "justify",
// // //"margin-bottom": "20px",
// // "margin-left": "5px",
// // "text-justify": "inter-character",
// // "white-space": "pre-line",
// // //"justify-content":"center"
// //});
// let indSize = this.calcIndividualFontSize(z, d, colWidth);
// // 2. 判斷是否發生了折行 (名字長度 * 單字像素高度 > 分配到的最大高度)
// let s_px = indSize * 1.333;
// let isMultiLine = (z.length * s_px) > Number(d.textHeight);
// // 3. 根據是否折行動態決定對齊方式
// // 單行：分散對齊 (justify) / 多行：置中對齊 (center) 或是改為 靠上對齊 (start)
// let alignStyle = isMultiLine ? "start" : "justify";
// let $span = $(`<span style="font-size: ${indSize}pt;">${z}</span>`).css({
// display: "block",
// "min-height": `${d.textHeight}px`,
// "max-height": `${d.height}px`,
// width: "auto",
// "line-height": "1.1",
// "text-align": alignStyle, // ★ 動態套用對齊方式
// "text-align-last": alignStyle, // ★ 動態套用最後一行對齊方式
// "margin-left": "5px",
// "text-justify": "inter-character",
// "word-break": "break-all"
// });
// $namelist.append($span);
//});
html = $namelist;
} else if (d.elementID === "alive") {
let perRow = Math.floor(Number(d.height) / Number(d.textHeight));
let rows = Math.ceil(Number(left.length) / Number(perRow));//總行數
let rowWidth = Math.floor(Number(d.width) / rows);
newFontSize = Math.floor(rowWidth / 2);
if (newFontSize > d.fontSize) {
newFontSize = d.fontSize;
rowWidth = newFontSize * 2;
}
console.log(d.height,d.width,d.textHeight,perRow,rows,rowWidth,newFontSize,d)
html = self.renderLiveList(left, d, rowWidth);
//let perRow = Math.floor(Number(d.height) / Number(d.textHeight));
//let rows = Math.ceil(Number(left.length) / Number(perRow));//總行數
//let rowWidth = Math.floor(Number(d.width) / rows);
//newFontSize = Math.floor(rowWidth / 2);
//if (newFontSize > d.fontSize) {
// newFontSize = d.fontSize;
// rowWidth = newFontSize * 2;
//}
let th = Number(d.textHeight) || 0;
let span = Number(d.textSpan) || 0;
let h = Number(d.height);
let w = Number(d.width);
let namesPerCol = Math.floor((h + span) / (th + span));
if (namesPerCol < 1) namesPerCol = 1;
// 2. 計算總共會產生幾列 (cols)，並推算出每個名字能分配到的最大欄寬
let cols = Math.ceil(left.length / namesPerCol);
if (cols < 1) cols = 1;
let colWidth = Math.floor(w / cols);
html = self.renderLiveList(left, d, colWidth);
//newFontSize = d.fontSize;
} else if (d.elementID === "titletriangle") {
newFontSize = self.scaleFontSize(mid, d.fontSize, d.width);
html = self.renderRoster(mid, d)
} else if (d.elementID === "combined") {
ancestorFontSize = d.fontSize;
newFontSize = self.scaleFontSize(mid, d.fontSize, d.width);
const parts = mid.join("\n").split('\n');
html = `<div class="ancestor-wrapper" style="width:${d.width}px !important;height:${d.height}px !important;" >
<span class="main-name" >${parts[0] || ''}</span>
<span class="sub-text">${parts[1] || ''}</span>
</div>`;
} else if (d.elementID === "address") {
newFontSize = self.scaleFontSize(mid, d.fontSize, d.width);
html = self.renderNormal(address, d)
} else if (d.elementID === "lefttitle") {
newFontSize = self.scaleFontSize(mid, d.fontSize, d.width);
html = self.renderNormal(lefttitle, d)
}
else if (d.elementID === "righttitle") {
newFontSize = self.scaleFontSize(mid, d.fontSize, d.width);
html = self.renderNormal(righttitle, d)
}
if (newFontSize < 10) {
@@ -815,6 +986,35 @@
fix2(val) {
return Number.parseFloat(val).toFixed(2);
},
calcIndividualFontSize(name, el, maxW) {
let s = Number(el.style ? el.style.fontSize : (el.fontSize ? el.fontSize : 18));
let maxH = Number(el.textHeight); // 限制在單一名字預設的區塊高度內
let l = Number(name.length);
while (s >= 12) {
let s_px = s * 1.333; // 將 pt 轉換為 px
// 如果單行高度夠放，直接回傳當下大小 (不會過度縮小)
//if (l * s_px <= maxH) {
// return s;
//}
// 單行放不下，模擬多行折疊後的總寬度
let charsPerCol = Math.floor(maxH / s_px);
if (charsPerCol < 1) charsPerCol = 1;
let cols = Math.ceil(l / charsPerCol);
let neededWidth = (cols === 1) ? s_px : cols * (s_px * 1.1); // 1.1 為緊密行高
// 如果折疊後的總寬度不超過分配到的橫向欄寬，就是最佳字體
if (neededWidth <= maxW && (cols > 1 || l * s_px <= maxH)) {
return s;
}
s -= 1; // 否則繼續縮小 1pt
}
return 12; // 極限最小字體
},
renderLiveList(names, el,rowWidth) {
let $namelist = $(`<div class='liveList'></div>`).css({
"writing-mode": "vertical rl",
@@ -838,19 +1038,41 @@
})
return $namelist;
},
renderLiveSpan(name, el,rowWidth) {
return $(`<span class="liveSpan">${name}</span>`).css({
renderLiveSpan(name, el, colWidth) {
// 為「這個名字」獨立計算出專屬的最完美字體大小
let indSize = this.calcIndividualFontSize(name, el, colWidth);
// 2. 判斷是否發生了折行 (名字長度 * 單字像素高度 > 分配到的最大高度)
let s_px = indSize * 1.333;
let isMultiLine = (name.length * s_px) > Number(el.textHeight);
// 3. 根據是否折行動態決定對齊方式
// 單行：分散對齊 (justify) / 多行：置中對齊 (center) 或是改為 靠上對齊 (start)
let alignStyle = isMultiLine ? "start" : "justify";
return $(`<span style="font-size: ${indSize}pt;">${name}</span>`).css({
display: "block",
"min-height": `${el.textHeight}px`,
"max-height": `${el.height}px`,
width: `${rowWidth}px`,
"text-align": "justify",
"text-align-last": "justify",
"margin-bottom": "10px",
width: "auto",
"line-height": "1.1",
"text-align": alignStyle, // ★ 動態套用對齊方式
"text-align-last": alignStyle, // ★ 動態套用最後一行對齊方式
"margin-left": "5px",
"text-justify": "inter-character",
"white-space": "pre-line"
"word-break": "break-all"
});
//return $(`<span class="liveSpan">${name}</span>`).css({
// display: "block",
// "min-height": `${el.textHeight}px`,
// "max-height": `${el.height}px`,
// width: `${rowWidth}px`,
// "text-align": "justify",
// "text-align-last": "justify",
// "margin-bottom": "10px",
// "text-justify": "inter-character",
// "white-space": "pre-line"
//});
},
// 品字佈局邏輯：一上二下
renderRoster(names, el) {
web/admin/print/tablet_edit/editorNewOne.html
+293 -74
View File
@@ -368,13 +368,14 @@
if (response.status == 200) {
self.printData = response.data;
console.log("GetDetailToPrint:",response);
self.printData.forEach(x => {
//console.log("GetDetailToPrint:",x.style);
if (x.style != null && x.style != undefined) {
self.selectStyle.style = x.style;
self.selected.style = x.style;
self.defaultStyle = x.style;
//$("#styleSel").val(x.style)
$("#styleSel").val(x.style)
}
if (x.f_num_tablet != "") {
let tablet = JSON.parse(x.f_num_tablet);
@@ -500,33 +501,43 @@
if (mid.length == 0) {
mid.push("請選擇")
}
let perRow = Math.floor(Number(d.height) / Number(d.textHeight));
let rows = Math.ceil(Number(mid.length) / Number(perRow));//總行數
let rowWidth = Math.floor(Number(d.width) / rows);
newFontSize = Math.floor(rowWidth / 2);
if (newFontSize > d.fontSize) {
newFontSize = d.fontSize;
rowWidth = newFontSize * 2;
}
// 1. 依據 textHeight 與 textSpan 計算一行(垂直列)最多能放幾個名字
let th = Number(d.textHeight) || 0;
let span = Number(d.textSpan) || 0;
let h = Number(d.height);
let w = Number(d.width);
let namesPerCol = Math.floor((h + span) / (th + span));
if (namesPerCol < 1) namesPerCol = 1;
// 2. 計算總共會產生幾列 (cols)，並推算出每個名字能分配到的最大欄寬
let cols = Math.ceil(mid.length / namesPerCol);
if (cols < 1) cols = 1;
let colWidth = Math.floor(w / cols);
//console.log(perRow, rows, rowWidth, newFontSize)
html = self.renderNameList(mid, d, newFontSize, style, rowWidth);
html = self.renderNameList(mid, d, newFontSize, style, colWidth);
} else if (d.elementID === "alive") {
self.tabletType = "B";
if (left.length == 0) {
left.push("請選擇");
}
newFontSize = self.scaleFontSize(left, d.fontSize, d.Width);
let perRow = Math.floor(Number(d.height) / Number(d.textHeight));
let rows = Math.ceil(Number(left.length) / Number(perRow));//總行數
let rowWidth = Math.floor(Number(d.width) / rows);
newFontSize = Math.floor(rowWidth / 2);
if (newFontSize > d.fontSize) {
newFontSize = d.fontSize;
rowWidth = newFontSize * 2;
}
newFontSize =d.fontSize //self.scaleFontSize(left, d.fontSize, d.Width);
let th = Number(d.textHeight) || 0;
let span = Number(d.textSpan) || 0;
let h = Number(d.height);
let w = Number(d.width);
let namesPerCol = Math.floor((h + span) / (th + span));
if (namesPerCol < 1) namesPerCol = 1;
// 2. 計算總共會產生幾列 (cols)，並推算出每個名字能分配到的最大欄寬
let cols = Math.ceil(left.length / namesPerCol);
if (cols < 1) cols = 1;
let colWidth = Math.floor(w / cols);
//console.log(perRow, rows, rowWidth, newFontSize)
//newFontSize = d.fontSize;
html = self.renderLiveList(left, d, rowWidth);
html = self.renderLiveList(left, d, colWidth);
} else if (d.elementID === "titletriangle") {
if (mid.length == 0) {
@@ -1320,16 +1331,29 @@
Object.assign(left, self.alive);
//this.printData.forEach(x => {
let d = details.find(y => y.elementID == "alive");
let perRow = Math.floor(Number(d.height) / Number(d.textHeight));
let rows = Math.ceil(Number(left.length) / Number(perRow));//總行數
let rowWidth = Math.floor(Number(d.width) / rows);
let newFontSize = Math.floor(rowWidth / 2);
if (newFontSize > d.fontSize) {
newFontSize = d.fontSize;
rowWidth = newFontSize * 2;
}
self.selectedElement.css("font-size", newFontSize+"px");
let html = self.renderLiveList(left, d);
//let perRow = Math.floor(Number(d.height) / Number(d.textHeight));
//let rows = Math.ceil(Number(left.length) / Number(perRow));//總行數
//let rowWidth = Math.floor(Number(d.width) / rows);
//let newFontSize = Math.floor(rowWidth / 2);
//if (newFontSize > d.fontSize) {
// newFontSize = d.fontSize;
// rowWidth = newFontSize * 2;
//}
let th = Number(d.textHeight) || 0;
let span = Number(d.textSpan) || 0;
let h = Number(d.height);
let w = Number(d.width);
let namesPerCol = Math.floor((h + span) / (th + span));
if (namesPerCol < 1) namesPerCol = 1;
// 2. 計算總共會產生幾列 (cols)，並推算出每個名字能分配到的最大欄寬
let cols = Math.ceil(left.length / namesPerCol);
if (cols < 1) cols = 1;
let colWidth = Math.floor(w / cols);
self.selectedElement.css("font-size", d.fontSize + "px");
console.log("B d:",d)
let html = self.renderLiveList(left, d,colWidth);
$(self.selectedElement).append(html);
} else if ($(self.selectedElement).children().first().hasClass("lefttitle") ||
$(self.selectedElement).children().first().hasClass("righttitle") ||
@@ -1365,21 +1389,24 @@
$(self.selectedElement).empty();
let d = details.find(y => y.elementID == "title1");
let newfontSize = self.scaleFontSize(mid, d.fontSize, d.textWidth)
let perRow = Math.floor(Number(d.height) / Number(d.textHeight));
let rows = Math.ceil(Number(mid.length) / Number(perRow));//總行數
let rowWidth = Math.floor(Number(d.width) / rows);
newfontSize = Math.floor(rowWidth / 2);
if (newfontSize > d.fontSize) {
newfontSize = d.fontSize;
rowWidth = newfontSize * 2;
}
if (newfontSize < 10) {
newfontSize = 10;
}
// 1. 依據 textHeight 與 textSpan 計算一行(垂直列)最多能放幾個名字
//let th = Number(d.textHeight) || 0;
//let span = Number(d.textSpan) || 0;
//let h = Number(d.height);
//let w = Number(d.width);
//let namesPerCol = Math.floor((h + span) / (th + span));
//if (namesPerCol < 1) namesPerCol = 1;
//// 2. 計算總共會產生幾列 (cols)，並推算出每個名字能分配到的最大欄寬
//let cols = Math.ceil(mid.length / namesPerCol);
//if (cols < 1) cols = 1;
//let colWidth = Math.floor(w / cols);
//console.log(self.selectedElement,perRow, rows, rowWidth, newfontSize)
self.selectedElement.css("font-size", newfontSize+"px");
let html = self.renderNameList(mid, d, style.fontSize, style,rowWidth);
let html = self.renderNameList(mid, d, style.fontSize, style,0);
$(self.selectedElement).append(html);
} else if ($(self.selectedElement).children().first().hasClass("rosterList")) {
$(self.selectedElement).empty();
@@ -1404,6 +1431,35 @@
}
}
},
calcIndividualFontSize(name, el, maxW) {
let s = Number(el.style ? el.style.fontSize : (el.fontSize ? el.fontSize : 18));
let maxH = Number(el.textHeight); // 限制在單一名字預設的區塊高度內
let l = Number(name.length);
while (s >= 12) {
let s_px = s * 1.333; // 將 pt 轉換為 px
// 如果單行高度夠放，直接回傳當下大小 (不會過度縮小)
//if (l * s_px <= maxH) {
// return s;
//}
// 單行放不下，模擬多行折疊後的總寬度
let charsPerCol = Math.floor(maxH / s_px);
if (charsPerCol < 1) charsPerCol = 1;
let cols = Math.ceil(l / charsPerCol);
let neededWidth = (cols === 1) ? s_px : cols * (s_px * 1.1); // 1.1 為緊密行高
// 如果折疊後的總寬度不超過分配到的橫向欄寬，就是最佳字體
if (neededWidth <= maxW && (cols > 1 || l * s_px <= maxH)) {
return s;
}
s -= 1; // 否則繼續縮小 1pt
}
return 12; // 極限最小字體
},
async itemAppend(e) {
//console.log(e);
},
@@ -1456,49 +1512,190 @@
});
return txt;
},
renderNameList(mid, d, newFontSize, style,rowWidth) {
renderNameList(names, d, newFontSize, style, colWidth) {
let self = this;
let h = Number(d.height);
let w = Number(d.width);
let th = Number(d.textHeight) || h;
let gap = 5; // 對應 span 的 margin-left
let s = Number(d.fontSize);
let sizes = [];
// 1. 模擬排版：找出能讓全體塞入的最佳字體組合
while (s >= 12) {
let short_s_px = s * 1.333;
let hasShort = names.some(n => (n.length * short_s_px) <= th);
let long_s = hasShort? Math.floor(s * 0.75):s; // 長字體最多縮小 25%
if (long_s < 12) long_s = 12;
let long_s_px = long_s * 1.333;
let currentColHeight = 0;
let totalWidth = 0;
let tempSizes = [];
let anyWrapped = false;
for (let i = 0; i < names.length; i++) {
let name = names[i];
let l = name.length;
//let isMulti = (l * short_s_px) > th;
let isShort = (l * short_s_px) <= th;
let size = isShort ? s : long_s;//isMulti ? long_s : s;
let size_px = size * 1.333; //isMulti ? long_s_px : short_s_px;
let isMulti = !isShort && (l * size_px >= h);
if (isMulti) anyWrapped = true;
tempSizes.push({ name: name, size: size, isMulti: isMulti, isShort: isShort });
if (isMulti) {
// 多行長名
let charsPerCol = Math.floor(h / size_px);
if (charsPerCol < 1) charsPerCol = 1;
let lines = Math.ceil(l / charsPerCol);
let nameW = lines * (size_px * 1.1); // 1.1倍行距
if (currentColHeight > 0) currentColHeight = 0;
totalWidth += nameW + gap;
} else {
if (isShort) {
// 單行短名
if (currentColHeight > 0 && (currentColHeight + th + gap) <= h) {
currentColHeight += th + gap;
} else {
currentColHeight = th;
totalWidth += short_s_px + gap;
}
} else {
currentColHeight = 0;
totalWidth += size_px + gap;
}
}
}
if (totalWidth > 0) totalWidth -= gap;
// 總寬度未爆框，確定最佳組合
if (totalWidth <= w) {
if (hasShort) {
sizes = tempSizes;
break;
} else {
if (!anyWrapped || s === 12) {
sizes = tempSizes;
break;
}
}
}
s -= 1;
}
// 處理極端情況
if (sizes.length === 0) {
sizes = names.map(name => {
return { name: name, size: 12, isMulti: (name.length * 12 * 1.333) > th };
});
}
let $namelist = $(`<div class='nameList'></div>`).css({
"writing-mode": "vertical rl",
"writing-mode": "vertical-rl",
display: "flex",
"flex-direction": "row",
"flex-wrap": "wrap",
"align-content": "center",
"align-items": "center", // 確保元素靠上對齊
margin: "auto",
width: `${d.width}px`,
height: `${d.height}px`,
border: "0px solid #ccc",
padding: "1px",
"font-family": style.fontFamily,
//"letter-spacing": "0.1em",
"column-gap": `${d.textSpan}px`,
//"row-gap": "1px",
"align-items": "center",
"justify-content": "start",
"font-family": d.fontFamily
});
mid.forEach(z => {
let info = self.getTextInfo(z, newFontSize);
let spanWidth = mid.length > 1 ? newFontSize : d.width
let height = d.textHeight;
if (info.width >= d.textHeight) {
height = d.height;
}
let $span = $(`<span class="nameSpan">${z}</span>`).css({
sizes.forEach(item => {
let th = Number(d.textHeight) || Number(d.height)
//let minH = item.isMulti ? `${d.height}px` : `${d.textHeight}px`;
let minH = item.isShort ? `${th}px` : `${d.height}px`
;
let alignStyle = item.isMulti ? "start" : "justify";
let $span= $(`<span style="font-size: ${item.size}pt;">${item.name}</span>`).css({
display: "block",
"min-height": `${height}px`,
"min-height": minH, // 強制多行長名撐滿高度，避免其他名字墊底
"max-height": `${d.height}px`,
"max-width": `${rowWidth}px`,
//width: `${newFontSize}px`,
"text-align": "justify",
"text-align-last": "justify",
//"margin-bottom": "20px",
width: "auto",
"line-height": "1.1",
"text-align": alignStyle,
"text-align-last": alignStyle,
"margin-left": "5px",
"text-justify": "inter-character",
"white-space": "pre-line",
//"justify-content":"center"
"word-break": "break-all"
});
$namelist.append($span);
});
})
//let $namelist = $(`<div class='nameList'></div>`).css({
// "writing-mode": "vertical rl",
// display: "flex",
// "flex-direction": "row",
// "flex-wrap": "wrap",
// margin: "auto",
// width: `${d.width}px`,
// height: `${d.height}px`,
// border: "0px solid #ccc",
// padding: "1px",
// "font-family": style.fontFamily,
// //"letter-spacing": "0.1em",
// "column-gap": `${d.textSpan}px`,
// //"row-gap": "1px",
// "align-items": "center",
// "justify-content": "start",
//});
//mid.forEach(z => {
// //let info = self.getTextInfo(z, newFontSize);
// //let spanWidth = mid.length > 1 ? newFontSize : d.width
// //let height = d.textHeight;
// //if (info.width >= d.textHeight) {
// // height = d.height;
// //}
// //let $span = $(`<span class="nameSpan">${z}</span>`).css({
// // display: "block",
// // "min-height": `${height}px`,
// // "max-height": `${d.height}px`,
// // "max-width": `${rowWidth}px`,
// // //width: `${newFontSize}px`,
// // "text-align": "justify",
// // "text-align-last": "justify",
// // //"margin-bottom": "20px",
// // "margin-left": "5px",
// // "text-justify": "inter-character",
// // "white-space": "pre-line",
// // //"justify-content":"center"
// //});
// // 為「這個名字」獨立計算出專屬的最完美字體大小
// let indSize = this.calcIndividualFontSize(z, d, colWidth);
// // 2. 判斷是否發生了折行 (名字長度 * 單字像素高度 > 分配到的最大高度)
// let s_px = indSize * 1.333;
// let isMultiLine = (z.length * s_px) > Number(d.textHeight);
// // 3. 根據是否折行動態決定對齊方式
// // 單行：分散對齊 (justify) / 多行：置中對齊 (center) 或是改為 靠上對齊 (start)
// let alignStyle = isMultiLine ? "start" : "justify";
// let $span = $(`<span style="font-size: ${indSize}pt;">${z}</span>`).css({
// display: "block",
// "min-height": `${d.textHeight}px`,
// "max-height": `${d.height}px`,
// width: "auto",
// "line-height": "1.1",
// "text-align": alignStyle, // ★ 動態套用對齊方式
// "text-align-last": alignStyle, // ★ 動態套用最後一行對齊方式
// "margin-left": "5px",
// "text-justify": "inter-character",
// "word-break": "break-all"
// });
// $namelist.append($span);
//});
return $namelist;
},
renderLiveList(names, el,rowWidth) {
@@ -1524,19 +1721,41 @@
})
return $namelist;
},
renderLiveSpan(name, el,rowWidth) {
return $(`<span class="liveSpan">${name}</span>`).css({
renderLiveSpan(name, el, colWidth) {
// 為「這個名字」獨立計算出專屬的最完美字體大小
let indSize = this.calcIndividualFontSize(name, el, colWidth);
// 2. 判斷是否發生了折行 (名字長度 * 單字像素高度 > 分配到的最大高度)
let s_px = indSize * 1.333;
let isMultiLine = (name.length * s_px) > Number(el.textHeight);
// 3. 根據是否折行動態決定對齊方式
// 單行：分散對齊 (justify) / 多行：置中對齊 (center) 或是改為 靠上對齊 (start)
let alignStyle = isMultiLine ? "start" : "justify";
return $(`<span style="font-size: ${indSize}pt;">${name}</span>`).css({
display: "block",
"min-height": `${el.textHeight}px`,
"max-height": `${el.height}px`,
width: `${rowWidth}px`,
height: `${el.textHeight}px`,
"text-align": "justify",
"text-align-last": "justify",
//"margin-bottom": "10px",
width: "auto",
"line-height": "1.1",
"text-align": alignStyle, // ★ 動態套用對齊方式
"text-align-last": alignStyle, // ★ 動態套用最後一行對齊方式
"margin-left": "5px",
"text-justify": "inter-character",
"white-space": "pre-line"
"word-break": "break-all"
});
//return $(`<span class="liveSpan">${name}</span>`).css({
// display: "block",
// "min-height": `${el.textHeight}px`,
// "max-height": `${el.height}px`,
// width: `${rowWidth}px`,
// height: `${el.textHeight}px`,
// "text-align": "justify",
// "text-align-last": "justify",
// //"margin-bottom": "10px",
// "text-justify": "inter-character",
// "white-space": "pre-line"
//});
},
// 品字佈局邏輯：一上二下
renderRoster(names, el) {