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-29 18:01:45 +08:00
parent 35a0be701b
commit ced4eabe71
1 changed files with 139 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/admin/print/TabletDesign.aspx
+139 -21
View File
@@ -1356,16 +1356,54 @@ html, body, * {
else if (el.id === 'title1') { else if (el.id === 'title1') {
//要先去算出需要縮到多小字，根據總寬度跟行數，這樣才會在正中間 //要先去算出需要縮到多小字，根據總寬度跟行數，這樣才會在正中間
//字體大小*2如果大於行數就要縮字體 //字體大小*2如果大於行數就要縮字體
let perRow = Math.floor(Number(el.height) / Number(el.textHeight)); //let perRow = Math.floor(Number(el.height) / Number(el.textHeight));
let rows = Math.ceil(Number(slice.length) / Number(perRow));//總行數 //let rows = Math.ceil(Number(slice.length) / Number(perRow));//總行數
let rowWidth = Math.floor(Number(el.width) / rows); //let rowWidth = Math.floor(Number(el.width) / rows);
fontSize = Math.floor(rowWidth / 2); //fontSize = Math.floor(rowWidth / 2);
//console.log(el.height, el.textHeight, perRow, rows, rowWidth, fontSize) ////console.log(el.height, el.textHeight, perRow, rows, rowWidth, fontSize)
if (fontSize > el.style.fontSize) { //if (fontSize > el.style.fontSize) {
fontSize = el.style.fontSize; // fontSize = el.style.fontSize;
rowWidth = fontSize * 2; // rowWidth = fontSize * 2;
//}
// 1. 初始化最大字體
let s = Number(el.style.fontSize);
let h = Number(el.height);
let w = Number(el.width);
let gap = 5; // 對應 span 樣式裡的 margin-left: 5px
// 2. 模擬所有名字的總寬度，找出不會爆框的最佳字體
while (s >= 8) {
let s_px = s * 2; // 將 pt 轉 px
let charsPerCol = Math.floor(h / s_px); // 這個字體大小下，垂直一行最多能塞幾個字
console.log(charsPerCol);
if (charsPerCol < 1) charsPerCol = 1;
let totalWidth = 0;
// 加總這批名單的真正排版寬度
slice.forEach((name, index) => {
let cols = Math.ceil(name.length / charsPerCol); // 計算這個人需要折成幾行
let nameWidth = cols * (s_px * 2); // 1.1 為緊密行高 (line-height)
totalWidth += nameWidth;
if (index < slice.length - 1) {
totalWidth += gap; // 加上每個人之間的間距
}
});
// 3. 如果總寬度小於等於容器寬度，代表這個字體剛好能讓所有人塞進去！
if (totalWidth <= w) {
break;
}
s -= 1; // 放不下就縮小 1pt 繼續嘗試
} }
html = this.renderNameList(slice, el, rowWidth);
// 確保極限最小字體為 4pt
let fontSize = s < 8 ? 8 : s;
html = this.renderNameList(slice, el, 0);
} }
else if (el.id === 'alive') { else if (el.id === 'alive') {
//console.log("createEl:", slice, el) //console.log("createEl:", slice, el)
@@ -1390,6 +1428,38 @@ html, body, * {
}) })
.html(html); .html(html);
}, },
countFontSize(name, el, baseFontSize) {
let s = Number(baseFontSize);
let h = Number(el.height);
let w = Number(el.width);
let l = Number(name.length);
// 逐步縮小字體 (最低限制到 4pt)
while (s >= 4) {
// ★ 關鍵修正：將 pt 轉換為實際的像素(px)高度 (1pt ≈ 1.333px)
let s_px = s * 1.333;
// 如果單行的高度夠放
if (l * s_px <= h) {
// 如果原本的字體就放得下回傳 0，否則回傳縮小後的字體大小
return s === Number(baseFontSize) ? 0 : s;
}
// 單行放不下，必須折行
let charsPerCol = Math.floor(h / s_px); // 一行(垂直)最多能塞幾個字
if (charsPerCol < 1) charsPerCol = 1;
let cols = Math.ceil(l / charsPerCol); // 計算總共需要折成幾行
let neededWidth = cols * (s_px * 1.2); // 估算折行後需要的總像素寬度 (1.2為行距緩衝)
// 若折行後的總寬度小於等於容器寬度，代表此字體大小剛好能安全放下
if (neededWidth <= w) {
return s;
}
s -= 1; // 放不下則縮小 1pt 繼續嘗試
}
return 8; // 極限最小字體
},
renderNameList(names, el,rowWidth) { renderNameList(names, el,rowWidth) {
let $namelist = $(`<div class='nameList'></div>`).css({ let $namelist = $(`<div class='nameList'></div>`).css({
"writing-mode": "vertical rl", "writing-mode": "vertical rl",
@@ -1417,15 +1487,27 @@ html, body, * {
renderNameSpan(name, el, rowWidth) { renderNameSpan(name, el, rowWidth) {
return $(`<span>${name}</span>`).css({ return $(`<span>${name}</span>`).css({
display: "block", display: "block",
"min-height": `${el.textHeight}px`, "min-height": `${el.textHeight}px`, // ★ 拿掉原本的 textHeight 限制，避免短字被硬撐
"max-height": `${el.height}px`, "max-height": `${el.height}px`,
width: `${rowWidth}px`, width: "auto", // ★ 讓多行文字自然撐開寬度
"line-height": "1.1", // ★ 緊密行高，讓折行的「劉三..」跟「陳五」黏緊
"text-align": "justify", "text-align": "justify",
"text-align-last": "justify", "text-align-last": "justify",
"margin-left": "5px", "margin-left": "5px",
"text-justify": "inter-character", "text-justify": "inter-character",
});// "margin-bottom": `${el.textSpan}px`, "word-break": "break-all"
});
//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`,
}, },
renderLiveList(names, el, rowWidth) { renderLiveList(names, el, rowWidth) {
//console.log("renderLiveList:", names); //console.log("renderLiveList:", names);
@@ -1596,16 +1678,52 @@ html, body, * {
let names = el.text.split('\n').filter(s => s.trim()); let names = el.text.split('\n').filter(s => s.trim());
let slice = names.slice(0 * this.rosterLimit, (0 + 1) * this.rosterLimit); let slice = names.slice(0 * this.rosterLimit, (0 + 1) * this.rosterLimit);
let perRow = Math.floor(Number(el.height) / Number(el.textHeight)); //let perRow = Math.floor(Number(el.height) / Number(el.textHeight));
let rows = Math.ceil(Number(slice.length) / Number(perRow));//總行數 //let rows = Math.ceil(Number(slice.length) / Number(perRow));//總行數
let rowWidth = Math.floor(Number(el.width) / rows); //let rowWidth = Math.floor(Number(el.width) / rows);
let fontSize = Math.floor(rowWidth / 2); //let fontSize = Math.floor(rowWidth / 2);
if (fontSize > el.style.fontSize) { //if (fontSize > el.style.fontSize) {
fontSize = el.style.fontSize; // fontSize = el.style.fontSize;
rowWidth = fontSize * 2; // rowWidth = fontSize * 2;
//}
// 1. 初始化最大字體
let s = Number(el.style.fontSize);
let h = Number(el.height);
let w = Number(el.width);
let gap = 5; // 對應 span 樣式裡的 margin-left: 5px
// 2. 模擬所有名字的總寬度，找出不會爆框的最佳字體
while (s >= 8) {
let s_px = s *2; // 將 pt 轉 px
let charsPerCol = Math.floor(h / s_px); // 這個字體大小下，垂直一行最多能塞幾個字
if (charsPerCol < 1) charsPerCol = 1;
let totalWidth = 0;
// 加總這批名單的真正排版寬度
slice.forEach((name, index) => {
let cols = Math.ceil(name.length / charsPerCol); // 計算這個人需要折成幾行
let nameWidth = cols * (s_px * 2); // 1.1 為緊密行高 (line-height)
totalWidth += nameWidth;
if (index < slice.length - 1) {
totalWidth += gap; // 加上每個人之間的間距
}
});
// 3. 如果總寬度小於等於容器寬度，代表這個字體剛好能讓所有人塞進去！
if (totalWidth <= w) {
break;
}
s -= 1; // 放不下就縮小 1pt 繼續嘗試
} }
// 確保極限最小字體為 4pt
let fontSize = s < 8 ? 8 : s;
//console.log(el.height, el.textHeight, perRow, rows, rowWidth, fontSize) //console.log(el.height, el.textHeight, perRow, rows, rowWidth, fontSize)
html = this.renderNameList(slice, el, rowWidth);//el.style.fontSize html = this.renderNameList(slice, el, 0);//el.style.fontSize
$(`.tablet-element[id="${this.activeId}"]`).css({ $(`.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 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); }).html(html);