牌位版型調整
This commit is contained in:
@@ -1393,19 +1393,19 @@ html, body, * {
|
||||
// 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 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;
|
||||
//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);
|
||||
//// 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);
|
||||
}
|
||||
else {
|
||||
let normal = []
|
||||
@@ -1723,56 +1723,120 @@ html, body, * {
|
||||
// "text-justify": "inter-character",
|
||||
//});// "margin-bottom": `${el.textSpan}px`,
|
||||
},
|
||||
renderLiveList(names, el, rowWidth) {
|
||||
renderLiveList(names, el) {
|
||||
//console.log("renderLiveList:", names);
|
||||
//$("#imp-text").updateActive("text",names)
|
||||
//let $namelist = $(`<div class='liveList'></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": "BiauKai",
|
||||
// //"letter-spacing": `${el.textSpan}px`,
|
||||
// "column-gap": `${el.textSpan}px`,
|
||||
// "align-items": "center",
|
||||
//});
|
||||
//// "column-gap": `${el.textSpan}px`,
|
||||
////"row-gap": "1px",
|
||||
//let self = this;
|
||||
//names.forEach(n => {
|
||||
// $namelist.append(self.renderLiveSpan(n, el, rowWidth))
|
||||
//})
|
||||
let h = Number(el.height);
|
||||
let w = Number(el.width);
|
||||
let th = Number(el.textHeight) || h;
|
||||
|
||||
// 1. 單純計算總共有幾行 (列)
|
||||
let namesPerCol = Math.floor(h / th);
|
||||
if (namesPerCol < 1) namesPerCol = 1;
|
||||
|
||||
let cols = Math.ceil(names.length / namesPerCol); // 總行數
|
||||
|
||||
// 2. 根據行數，縮小字體直到總寬度放得下
|
||||
let s = Number(el.style.fontSize);
|
||||
while (s >= 4) {
|
||||
let s_px = s * (4 / 3); // pt 轉 px
|
||||
let lh = 1.1; // 行高
|
||||
let gap = 0; // 對應 span 的 margin-left
|
||||
|
||||
// 總寬度 = 總行數 * (單行像素寬度 + 間距)
|
||||
let totalWidth = cols * (s_px * lh + gap);
|
||||
|
||||
// 放得下就停止縮小
|
||||
if (totalWidth <= w) {
|
||||
break;
|
||||
}
|
||||
s -= 1;
|
||||
}
|
||||
|
||||
if (s < 4) s = 4;
|
||||
|
||||
// 3. 建立外層 Flexbox 容器
|
||||
let $namelist = $(`<div class='liveList'></div>`).css({
|
||||
"writing-mode": "vertical rl",
|
||||
"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": "BiauKai",
|
||||
//"letter-spacing": `${el.textSpan}px`,
|
||||
"column-gap": `${el.textSpan}px`,
|
||||
"align-content": "center",
|
||||
"align-items": "center",
|
||||
margin: "auto",
|
||||
width: `${w}px`,
|
||||
height: `${h}px`,
|
||||
border: "0px solid #ccc",
|
||||
padding: "0px",
|
||||
"font-family": el.fontFamily,
|
||||
"column-gap": `${el.textSpan}px`,
|
||||
});
|
||||
// "column-gap": `${el.textSpan}px`,
|
||||
//"row-gap": "1px",
|
||||
|
||||
let self = this;
|
||||
names.forEach(n => {
|
||||
$namelist.append(self.renderLiveSpan(n, el, rowWidth))
|
||||
})
|
||||
names.forEach(name => {
|
||||
$namelist.append(self.renderLiveSpan(name, el, s));
|
||||
});
|
||||
return $namelist;
|
||||
},
|
||||
renderLiveSpan(name, el, colWidth) {
|
||||
renderLiveSpan(name, el, fontSize) {
|
||||
let th = Number(el.textHeight) || Number(el.height);
|
||||
|
||||
// 為「這個名字」獨立計算出專屬的最完美字體大小
|
||||
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({
|
||||
return $(`<span style="font-size: ${fontSize}pt;">${name}</span>`).css({
|
||||
display: "block",
|
||||
"min-height": `${el.textHeight}px`,
|
||||
"min-height": `${th}px`, // ★ 固定分配高度，交給 Flexbox 自動排版
|
||||
"max-height": `${el.height}px`,
|
||||
width: "auto",
|
||||
"line-height": "1.1",
|
||||
"text-align": alignStyle, // ★ 動態套用對齊方式
|
||||
"text-align-last": alignStyle, // ★ 動態套用最後一行對齊方式
|
||||
"margin-left": "5px",
|
||||
width: `${fontSize * 1.33}`,
|
||||
//"line-height": "1.1",
|
||||
"text-align": "justify", // 統一分散對齊
|
||||
"text-align-last": "justify",
|
||||
//"margin-left": "5px",
|
||||
"text-justify": "inter-character",
|
||||
"word-break": "break-all"
|
||||
"word-break": "break-all",
|
||||
"white-space": "pre-line"
|
||||
});
|
||||
//// 為「這個名字」獨立計算出專屬的最完美字體大小
|
||||
//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"
|
||||
//});
|
||||
//console.log("renderLiveSpan:", name, el );
|
||||
//return $(`<span>${name}</span>`).css({
|
||||
// display: "block",
|
||||
@@ -1955,19 +2019,19 @@ html, body, * {
|
||||
// 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 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;
|
||||
//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);
|
||||
//// 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);
|
||||
$(`.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);
|
||||
|
||||
Reference in New Issue
Block a user