排版功能
This commit is contained in:
@@ -3,7 +3,7 @@
|
|||||||
<%@ Register Src="~/admin/_uc/alert.ascx" TagPrefix="uc1" TagName="alert" %>
|
<%@ Register Src="~/admin/_uc/alert.ascx" TagPrefix="uc1" TagName="alert" %>
|
||||||
|
|
||||||
<asp:Content ID="Content1" ContentPlaceHolderID="page_header" runat="Server">
|
<asp:Content ID="Content1" ContentPlaceHolderID="page_header" runat="Server">
|
||||||
<%-- <style type="text/css">
|
<%-- <style type="text/css">
|
||||||
@import "css/styles.css";
|
@import "css/styles.css";
|
||||||
@import "css/tablet-design.css";
|
@import "css/tablet-design.css";
|
||||||
@import "css/floating.css";
|
@import "css/floating.css";
|
||||||
@@ -15,35 +15,95 @@
|
|||||||
<div class="d-flex overflow-hidden">
|
<div class="d-flex overflow-hidden">
|
||||||
<div class="p-2 bg-dark text-white floting-box" style="width: 250px; left: 20px; top: 80px;">
|
<div class="p-2 bg-dark text-white floting-box" style="width: 250px; left: 20px; top: 80px;">
|
||||||
<h6 class="border-bottom pb-2">設計工具箱</h6>
|
<h6 class="border-bottom pb-2">設計工具箱</h6>
|
||||||
|
<div class="input-group mb-3">
|
||||||
|
<button class="btn btn-outline-secondary dropdown-toggle" type="button"
|
||||||
|
data-bs-toggle="dropdown" aria-expanded="false">版型</button>
|
||||||
|
<ul class="dropdown-menu">
|
||||||
|
<li><span class="dropdown-item">選擇版型</span></li>
|
||||||
|
</ul>
|
||||||
|
<input type="text" id="styleName" class="form-control" aria-label="版型名稱">
|
||||||
|
</div>
|
||||||
|
<%--<div class="row">
|
||||||
|
<div class="col-6">
|
||||||
|
<select class="form-select" id="styleID" aria-label="版型名稱">
|
||||||
|
<option selected>選擇版型</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="col-6">
|
||||||
|
<div class="form-floating mb-3">
|
||||||
|
<input type="text" id="styleName" class="form-control form-control-sm mb-2"/>
|
||||||
|
<label for="styleName" style="color:black">版型名稱</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>--%>
|
||||||
|
|
||||||
|
<%--<div class="form-floating mb-3">
|
||||||
|
<select class="form-select form-select-sm mb-2 " onchange="Designer.changeStyle()" id="styleName">
|
||||||
|
<option value="">請選擇</option>
|
||||||
|
</select>
|
||||||
|
<label for="styleName" style="color:black">版型名稱</label>
|
||||||
|
</div>--%>
|
||||||
<div class="form-floating mb-3">
|
<div class="form-floating mb-3">
|
||||||
<select class="form-select form-select-sm mb-2 " onchange="Designer.changePaper()" id="paperSize">
|
<select class="form-select form-select-sm mb-2 " onchange="Designer.changePaper()" id="paperSize">
|
||||||
<option value="">請選擇</option>
|
<option value="">請選擇</option>
|
||||||
</select>
|
</select>
|
||||||
<label for="paperSize">尺寸</label>
|
<label for="paperSize" style="color:black">尺寸</label>
|
||||||
</div>
|
</div>
|
||||||
<div id="paperOrientation" onclick="Designer.changeOrientation()" class="mb-2">
|
<div id="paperOrientation" onclick="Designer.changeOrientation()" class="mb-2">
|
||||||
<span></span>
|
<span></span>
|
||||||
</div>
|
</div>
|
||||||
<span class="btn btn-sm btn-outline-light w-100 mb-2" onclick="Designer.displayItem('address')">地址欄</span>
|
<span class="btn btn-sm btn-outline-light w-100 mb-2" onclick="Designer.displayItem('address')">地址欄</span>
|
||||||
<span class="btn btn-sm btn-outline-light w-100 mb-2" onclick="Designer.displayItem('title1')">牌位正名</span>
|
<span class="btn btn-sm btn-outline-light w-100 mb-2" onclick="Designer.displayItem('title1')">牌位正名</span>
|
||||||
|
<span class="btn btn-sm btn-outline-light w-100 mb-2" onclick="Designer.displayItem('lefttitle')">左正名</span>
|
||||||
|
<span class="btn btn-sm btn-outline-light w-100 mb-2" onclick="Designer.displayItem('righttitle')">右正名</span>
|
||||||
<span class="btn btn-sm btn-outline-light w-100 mb-2" onclick="Designer.displayItem('titletriangle')">品字名單</span>
|
<span class="btn btn-sm btn-outline-light w-100 mb-2" onclick="Designer.displayItem('titletriangle')">品字名單</span>
|
||||||
<span class="btn btn-sm btn-outline-info w-100 mb-2" onclick="Designer.displayItem('combined')">正名合併置中</span>
|
<span class="btn btn-sm btn-outline-light w-100 mb-2" onclick="Designer.displayItem('combined')">雙姓合併置中</span>
|
||||||
<span class="btn btn-sm btn-outline-info w-100 mb-2" onclick="Designer.displayItem('alive')">陽上報恩</span>
|
<span class="btn btn-sm btn-outline-light w-100 mb-2" onclick="Designer.displayItem('tricombined')">三姓合併置中</span>
|
||||||
<div>
|
<span class="btn btn-sm btn-outline-light w-100 mb-2" onclick="Designer.displayItem('alive')">陽上報恩</span>
|
||||||
<span class="btn btn-sm btn-outline-secondary" onclick="Designer.clickBackend()">
|
<div class="form-floating mb-3">
|
||||||
<i class="bi bi-upload me-1"></i> 上傳自訂底圖 (PNG/JPG)
|
<%-- <span class="btn btn-sm btn-outline-light w-100 mb-2" onclick="Designer.clickBackend()">
|
||||||
</span>
|
<i class="bi bi-upload me-1"></i>上傳自訂底圖 (PNG/JPG)
|
||||||
<input id="backendInp" type="file" accept="image/png, image/jpeg" style="display: none"
|
</span>--%>
|
||||||
>
|
<select class="form-select form-select-sm mb-2 " onchange="Designer.changeBg()" id="backendInp">
|
||||||
|
<option value="">請選擇</option>
|
||||||
|
</select>
|
||||||
|
<label for="backendInp" style="color:black">選用底圖</label>
|
||||||
|
<%-- <input id="backendInp" type="file" accept="image/png, image/jpeg,image/svg+xml" style="display: none">--%>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<hr>
|
<hr>
|
||||||
|
<div class="form-floating mb-3">
|
||||||
|
<select class="form-select form-select-sm mb-2 " onchange="Designer.changePrintSize()" id="printSize">
|
||||||
|
<option value="">請選擇</option>
|
||||||
|
</select>
|
||||||
|
<label for="printSize" style="color:black">列印尺寸</label>
|
||||||
|
</div>
|
||||||
|
<div class="form-floating mb-3">
|
||||||
|
<select class="form-select form-select-sm mb-2 " onchange="Designer.changePrintMode()" id="printMode">
|
||||||
|
<option value="">請選擇</option>
|
||||||
|
<option value="combine">合併</option>
|
||||||
|
<option value="origin">原尺寸</option>
|
||||||
|
</select>
|
||||||
|
<label for="printMode" style="color:black">列印模式</label>
|
||||||
|
</div>
|
||||||
|
<div class="form-floating mb-3">
|
||||||
|
<input type="number" id="perpage" class="form-control form-control-sm mb-2">
|
||||||
|
<label class="small" for="perpage" style="color:black;">每頁列印筆數</label>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-6">
|
||||||
|
<span class="btn btn-sm btn-outline-info w-100 mb-2" onclick="Designer.saveStyle()">存檔</span>
|
||||||
|
</div>
|
||||||
|
<div class="col-6">
|
||||||
|
<%-- <span class="btn btn-sm btn-outline-info w-100 mb-2" onclick="">存檔</span>--%>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="canvas-area flex-grow-1 overflow-auto d-flex flex-column align-items-center position-relative" id="canvas">
|
<div class="canvas-area flex-grow-1 overflow-auto d-flex flex-column align-items-center position-relative" id="canvas">
|
||||||
<div class="tablet-paper" >
|
<div class="tablet-paper">
|
||||||
<%--<div class="tablet-element vertical-text">嘿嘿</div>--%>
|
<%--<div class="tablet-element vertical-text">嘿嘿</div>--%>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="attr-box" class="d-none p-2 bg-dark text-whit floting-box" style="top: 80px; right: 20px">
|
<div id="attr-box" class="d-none p-2 bg-dark text-whit floting-box" style="top: 80px; right: 20px">
|
||||||
<div class="form-floating mb-3">
|
<div class="form-floating mb-3">
|
||||||
@@ -54,36 +114,58 @@
|
|||||||
<input type="number" id="inp-size" class="form-control form-control-sm mb-2">
|
<input type="number" id="inp-size" class="form-control form-control-sm mb-2">
|
||||||
<label class="small" for="inp-size">字體大小 (pt)</label>
|
<label class="small" for="inp-size">字體大小 (pt)</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-floating mb-3">
|
|
||||||
<input type="number" id="2offset" class="form-control form-control-sm mb-2">
|
<div class="row ">
|
||||||
<label class="small" for="2offset">二行偏移量</label>
|
<div class="col-6">
|
||||||
|
<div class="form-floating mb-3">
|
||||||
|
<input type="number" id="2offset" class="form-control form-control-sm mb-2">
|
||||||
|
<label class="small" for="2offset">二行偏移量</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-6">
|
||||||
|
<div class="form-floating mb-3">
|
||||||
|
<input type="number" id="3offset" class="form-control form-control-sm mb-2">
|
||||||
|
<label class="small" for="3offset">三行偏移量</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-floating mb-3">
|
|
||||||
<input type="number" id="3offset" class="form-control form-control-sm mb-2">
|
<div class="row">
|
||||||
<label class="small" for="3offset">三行偏移量</label>
|
<div class="col-6">
|
||||||
|
<div class="form-floating mb-3">
|
||||||
|
<input type="number" id="4offset" class="form-control form-control-sm mb-2">
|
||||||
|
<label class="small" for="4offset">四行偏移量</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-6">
|
||||||
|
<div class="form-floating mb-3">
|
||||||
|
<input type="number" id="breakLen" class="form-control form-control-sm mb-2">
|
||||||
|
<label class="small" for="breakLen">斷行字數</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-floating mb-3">
|
|
||||||
<input type="number" id="4offset" class="form-control form-control-sm mb-2">
|
<div class="row">
|
||||||
<label class="small" for="4offset">四行偏移量</label>
|
<div class="col-6">
|
||||||
</div>
|
<div class="form-floating mb-3">
|
||||||
<div class="form-floating mb-3">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-6">
|
|
||||||
<input type="number" id="xPosition" class="form-control form-control-sm mb-2">
|
<input type="number" id="xPosition" class="form-control form-control-sm mb-2">
|
||||||
<label class="small" for="xPosition">X</label>
|
<label class="small" for="xPosition">X</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-6">
|
</div>
|
||||||
|
<div class="col-6">
|
||||||
|
<div class="form-floating mb-3">
|
||||||
<input type="number" id="yPosition" class="form-control form-control-sm mb-2">
|
<input type="number" id="yPosition" class="form-control form-control-sm mb-2">
|
||||||
<label class="small" for="yPosition">Y</label>
|
<label class="small" for="yPosition">Y</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</asp:Content>
|
</asp:Content>
|
||||||
<asp:Content ID="Content4" ContentPlaceHolderID="footer_script" runat="Server">
|
<asp:Content ID="Content4" ContentPlaceHolderID="footer_script" runat="Server">
|
||||||
<%-- <script src="../../js/jquery-4.0.0.min.js"></script>
|
<%-- <script src="../../js/jquery-4.0.0.min.js"></script>
|
||||||
<script src="jquery-ui/jquery-ui.js"></script>--%>
|
<script src="jquery-ui/jquery-ui.js"></script>--%>
|
||||||
<script>
|
<script>
|
||||||
const Designer = {
|
const Designer = {
|
||||||
@@ -92,10 +174,16 @@
|
|||||||
paper: { width: 100, height: 272 },
|
paper: { width: 100, height: 272 },
|
||||||
rosterLimit: 8,
|
rosterLimit: 8,
|
||||||
allSize: [
|
allSize: [
|
||||||
{ name: "A3", width: 297, height: 420, selected :""},
|
{ name: "A3", width: 297, height: 420, selected: "" },
|
||||||
{ name: "A4", width: 210, height: 297, selected :""},
|
{ name: "A4", width: 210, height: 297, selected: "" },
|
||||||
{ name: "B4", width: 257, height: 364, selected :""},
|
{ name: "B4", width: 257, height: 364, selected: "" },
|
||||||
{ name: "red", width: 100, height: 272,selected:"selected" },
|
{ name: "red", width: 100, height: 272, selected: "selected" },
|
||||||
|
],
|
||||||
|
bg: [
|
||||||
|
{ name: "黃1", path: "../../admin/print/html/tablet-1.svg" },
|
||||||
|
{ name: "黃2", path: "../../admin/print/html/tablet-1B.svg" },
|
||||||
|
{ name: "紅1", path: "../../admin/print/html/tablet-2.svg" },
|
||||||
|
{ name: "紅2", path: "../../admin/print/html/tablet-2B.svg" }
|
||||||
],
|
],
|
||||||
orientation: "portrait",
|
orientation: "portrait",
|
||||||
init() {
|
init() {
|
||||||
@@ -105,7 +193,11 @@
|
|||||||
this.bindBackend();
|
this.bindBackend();
|
||||||
this.allSize.forEach(x => {
|
this.allSize.forEach(x => {
|
||||||
$("#paperSize").append("<option value='" + x.name + "' " + x.selected + ">" + x.width + "*" + x.height + "</option>")
|
$("#paperSize").append("<option value='" + x.name + "' " + x.selected + ">" + x.width + "*" + x.height + "</option>")
|
||||||
|
$("#printSize").append("<option value='" + x.name + "' " + x.selected + ">" + x.width + "*" + x.height + "</option>");
|
||||||
})
|
})
|
||||||
|
this.bg.forEach(x => {
|
||||||
|
$("#backendInp").append("<option value='" + x.name + "'>" + x.name + "</option>")
|
||||||
|
});
|
||||||
$("#paperOrientation").html("<span>直向</span>")
|
$("#paperOrientation").html("<span>直向</span>")
|
||||||
},
|
},
|
||||||
changeOrientation() {
|
changeOrientation() {
|
||||||
@@ -113,8 +205,8 @@
|
|||||||
console.log(this.orientation);
|
console.log(this.orientation);
|
||||||
$("#paperOrientation").empty();
|
$("#paperOrientation").empty();
|
||||||
let ori = this.orientation == "portrait" ? "直向" : "橫向";
|
let ori = this.orientation == "portrait" ? "直向" : "橫向";
|
||||||
console.log(this.orientation,ori)
|
console.log(this.orientation, ori)
|
||||||
$("#paperOrientation").html("<span>" +ori + "</span>");
|
$("#paperOrientation").html("<span>" + ori + "</span>");
|
||||||
let paperSize = $("#paperSize").val()
|
let paperSize = $("#paperSize").val()
|
||||||
|
|
||||||
|
|
||||||
@@ -123,19 +215,29 @@
|
|||||||
this.paper.width = this.orientation == "portrait" ? size.width : size.height;
|
this.paper.width = this.orientation == "portrait" ? size.width : size.height;
|
||||||
this.paper.height = this.orientation == "portrait" ? size.height : size.width;
|
this.paper.height = this.orientation == "portrait" ? size.height : size.width;
|
||||||
$(".tablet-paper").css({
|
$(".tablet-paper").css({
|
||||||
"background-color": "red",
|
"background-color": "white",
|
||||||
width: this.paper.width + "mm",
|
width: this.paper.width + "mm",
|
||||||
height: this.paper.height + "mm",
|
height: this.paper.height + "mm",
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
changeStyle() {//切換版型
|
||||||
|
|
||||||
|
},
|
||||||
|
changeBg() {
|
||||||
|
let path = this.bg.find(el => el.name == $("#backendInp").val())
|
||||||
|
$(".tablet-paper").css({ 'background-image': 'url(' + path.path + ')', 'background-size': '100% 100%' })
|
||||||
|
},
|
||||||
changePaper() {
|
changePaper() {
|
||||||
let paperSize = $("#paperSize").val()
|
let paperSize = $("#paperSize").val()
|
||||||
let size = this.allSize.find(x => x.name == paperSize)
|
let size = this.allSize.find(x => x.name == paperSize)
|
||||||
$(".tablet-paper").css({
|
$(".tablet-paper").css({
|
||||||
"background-color": "red",
|
"background-color": "white",
|
||||||
width: size.width + "mm",
|
width: size.width + "mm",
|
||||||
height: size.height + "mm",
|
height: size.height + "mm",
|
||||||
});
|
});
|
||||||
|
},
|
||||||
|
changePrintMode() {
|
||||||
|
|
||||||
},
|
},
|
||||||
bindEvents() {
|
bindEvents() {
|
||||||
// 文字變更連動渲染
|
// 文字變更連動渲染
|
||||||
@@ -168,13 +270,13 @@
|
|||||||
//for (let p = 0; p < pages; p++) {
|
//for (let p = 0; p < pages; p++) {
|
||||||
// const $paper = $('<div class="tablet-paper"></div>')
|
// const $paper = $('<div class="tablet-paper"></div>')
|
||||||
// .css({ "background-color": "red", width: this.paper.width + 'mm', height: this.paper.height + 'mm' });
|
// .css({ "background-color": "red", width: this.paper.width + 'mm', height: this.paper.height + 'mm' });
|
||||||
let $paper = $(".tablet-paper").css({ "background-color": "red", width: this.paper.width + 'mm', height: this.paper.height + 'mm' });
|
let $paper = $(".tablet-paper").css({ "background-color": "white", width: this.paper.width + 'mm', height: this.paper.height + 'mm', position: "absolute" });
|
||||||
//const slice = names.slice(p * this.rosterLimit, (p + 1) * this.rosterLimit);
|
//const slice = names.slice(p * this.rosterLimit, (p + 1) * this.rosterLimit);
|
||||||
const slice = names.slice(0 * this.rosterLimit, (0 + 1) * this.rosterLimit);
|
const slice = names.slice(0 * this.rosterLimit, (0 + 1) * this.rosterLimit);
|
||||||
this.elements.forEach(el => {
|
this.elements.forEach(el => {
|
||||||
$paper.append(this.createEl(el, slice));
|
$paper.append(this.createEl(el, slice));
|
||||||
});
|
});
|
||||||
//$canvas.append($paper);
|
//$canvas.append($paper);
|
||||||
//}
|
//}
|
||||||
this.makeDraggable();
|
this.makeDraggable();
|
||||||
},
|
},
|
||||||
@@ -203,7 +305,7 @@
|
|||||||
|
|
||||||
return $(`<div class="tablet-element vertical-text ${this.activeId === el.id ? 'selected' : ''}" id="${el.id}"></div>`)
|
return $(`<div class="tablet-element vertical-text ${this.activeId === el.id ? 'selected' : ''}" id="${el.id}"></div>`)
|
||||||
.css({
|
.css({
|
||||||
left: el.x, top: el.y, fontSize: el.style.fontSize + 'pt', fontFamily: el.style.fontFamily, "z-index": 9999, visibility: el.style.visibility
|
position: "absolute", left: this.getPosInMm(el.x) + "mm", top: this.getPosInMm(el.y) + "mm", fontSize: el.style.fontSize + 'pt', fontFamily: el.style.fontFamily, "z-index": 9999, visibility: el.style.visibility
|
||||||
})
|
})
|
||||||
.html(html);
|
.html(html);
|
||||||
},
|
},
|
||||||
@@ -226,7 +328,9 @@
|
|||||||
const max = Math.max(...names.map(n => n.length), 0);
|
const max = Math.max(...names.map(n => n.length), 0);
|
||||||
return max > 5 ? Math.max(base * (5 / max), base * 0.6) : base;
|
return max > 5 ? Math.max(base * (5 / max), base * 0.6) : base;
|
||||||
},
|
},
|
||||||
|
getPosInMm(px) {
|
||||||
|
return parseFloat((px * 25.4 / 96).toFixed(2));
|
||||||
|
},
|
||||||
// 拖動後同步所有頁面的位置
|
// 拖動後同步所有頁面的位置
|
||||||
makeDraggable() {
|
makeDraggable() {
|
||||||
const self = this;
|
const self = this;
|
||||||
@@ -237,9 +341,12 @@
|
|||||||
stop(e, ui) {
|
stop(e, ui) {
|
||||||
const id = $(this).attr('id');
|
const id = $(this).attr('id');
|
||||||
const el = self.elements.find(x => x.id === id);
|
const el = self.elements.find(x => x.id === id);
|
||||||
el.x = ui.position.left;
|
el.x = self.getPosInMm(ui.position.left);
|
||||||
el.y = ui.position.top;
|
el.y = self.getPosInMm(ui.position.top);
|
||||||
$(`.tablet-element[id="${id}"]`).css({ left: el.x, top: el.y });
|
|
||||||
|
console.log(id, el)
|
||||||
|
//console.log(id,ui.position.left, ui.position.top,ui.offset.left,ui.offset.top);
|
||||||
|
$(`.tablet-element[id="${id}"]`).css({ left: el.x + "mm", top: el.y + "mm" });
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
@@ -252,23 +359,47 @@
|
|||||||
$('#inp-size').val(el.style.fontSize);
|
$('#inp-size').val(el.style.fontSize);
|
||||||
$('#xPosition').val(el.x);
|
$('#xPosition').val(el.x);
|
||||||
$("#yPosition").val(el.y);
|
$("#yPosition").val(el.y);
|
||||||
|
$('#TwoOffset').val(el.TwoOffset);
|
||||||
|
$("#ThreeOffset").val(el.ThreeOffset);
|
||||||
|
$("#FourOffset").val(el.FourOffset);
|
||||||
|
|
||||||
//this.render();
|
//this.render();
|
||||||
},
|
},
|
||||||
|
|
||||||
updateActive(key, val) {
|
updateActive(key, val) {
|
||||||
const el = this.elements.find(x => x.id === this.activeId);
|
const el = this.elements.find(x => x.id === this.activeId);
|
||||||
|
console.log(this.activeId, el)
|
||||||
if (key === 'fontSize') el.style.fontSize = parseFloat(val);
|
if (key === 'fontSize') el.style.fontSize = parseFloat(val);
|
||||||
else el[key] = val;
|
else el[key] = val;
|
||||||
|
if (el.type == "roster") {
|
||||||
|
const names = el.text.split('\n').filter(s => s.trim());
|
||||||
|
$(`.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(this.renderRoster(names.slice(0 * this.rosterLimit, (0 + 1) * this.rosterLimit), el));
|
||||||
|
} else if (el.type == "combined-center") {
|
||||||
|
const parts = el.text.split('\n');
|
||||||
|
html = `<div class="ancestor-wrapper" >
|
||||||
|
<span class="main-name" >${parts[0] || ''}</span>
|
||||||
|
<span class="sub-text">${parts[1] || ''}</span>
|
||||||
|
</div>`;
|
||||||
|
$(`.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 {
|
||||||
|
$(`.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);
|
||||||
|
}
|
||||||
//this.render();
|
//this.render();
|
||||||
},
|
},
|
||||||
displayItem(id) {
|
displayItem(id) {
|
||||||
console.log(id);
|
console.log(id);
|
||||||
let el = this.elements.find(x => x.id === id);
|
let el = this.elements.find(x => x.id === id);
|
||||||
console.log("before:",el);
|
console.log("before:", el);
|
||||||
el.style.visibility = el.style.visibility == "hidden" ? "" : "hidden";
|
el.style.visibility = el.style.visibility === "hidden" ? "" : "hidden";
|
||||||
console.log("after:", el);
|
console.log("after:", el, el.x, el.y);
|
||||||
$("#" + id).css({
|
$("#" + id).css({
|
||||||
left: el.x, top: el.y, fontSize: el.style.fontSize + 'pt', fontFamily: el.style.fontFamily, "z-index": 9999, visibility: el.style.visibility
|
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
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
||||||
@@ -330,12 +461,32 @@
|
|||||||
console.log(base64Image)
|
console.log(base64Image)
|
||||||
// 3. 設定到底圖
|
// 3. 設定到底圖
|
||||||
//this.service.setBackground(svgDataUri);
|
//this.service.setBackground(svgDataUri);
|
||||||
$(".tablet-paper").css({ 'background-image': 'url(' + base64Image + ')','background-size':'100% 100%' })
|
$(".tablet-paper").css({ 'background-image': 'url(' + base64Image + ')', 'background-size': '100% 100%' })
|
||||||
};
|
};
|
||||||
|
|
||||||
reader.readAsDataURL(file);
|
reader.readAsDataURL(file);
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
},
|
||||||
|
saveStyle() {
|
||||||
|
let master = {
|
||||||
|
styleID: "", styleName: $("#styleName").val(), paperSize: $("#paperSize").val(),
|
||||||
|
backendImg: $("#backendInp").val(), printSize: $("#printSize").val(), printMode: $("#printMode").val(),
|
||||||
|
orientation: $("#paperOrientation").val(), printPageCount: $("#perpage").val()
|
||||||
|
}
|
||||||
|
let detail = [
|
||||||
|
|
||||||
|
];
|
||||||
|
|
||||||
|
this.elements.forEach((el) => {
|
||||||
|
detail.push({
|
||||||
|
elementID: el.id, startX: el.x, startY: el.y, fontSize: el.style.fontSize, fontFamily: el.style.fontFamily,
|
||||||
|
breakLen: el.breakLen, twoOffset: el.twoOffset, threeOffset: el.threeOffset, fourOffset: el.fourOffset,
|
||||||
|
isActive: el.style.visibility
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log(master,detail);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -19,6 +19,10 @@ public class TabletElement
|
|||||||
public double? height { get; set; }
|
public double? height { get; set; }
|
||||||
public ElementStyle style { get; set; }
|
public ElementStyle style { get; set; }
|
||||||
public string hidden { get; set; }
|
public string hidden { get; set; }
|
||||||
|
public double? twoOffset { get; set; }
|
||||||
|
public double? threeOffset { get; set; }
|
||||||
|
public double? fourOffset { get; set; }
|
||||||
|
public int? breakLen { get; set; }
|
||||||
}
|
}
|
||||||
|
|
||||||
public class ElementStyle
|
public class ElementStyle
|
||||||
@@ -52,20 +56,34 @@ public partial class admin_item_TabletDesigner :MyWeb.config
|
|||||||
style = new ElementStyle { fontSize = 24, fontFamily = "Kaiti", isVertical = true, letterSpacing = 5, lineHeight = 1.5,visibility="" }
|
style = new ElementStyle { fontSize = 24, fontFamily = "Kaiti", isVertical = true, letterSpacing = 5, lineHeight = 1.5,visibility="" }
|
||||||
},
|
},
|
||||||
new TabletElement {
|
new TabletElement {
|
||||||
id = "title1", type = "ancestor", text = "氏歷代祖先", x = 130, y = 80,
|
id = "title1", type = "ancestor", text = "牌位正名", x = 130, y = 80,
|
||||||
style = new ElementStyle { fontSize = 24, fontFamily = "Kaiti", isVertical = true, letterSpacing = 5, lineHeight = 1.5 ,visibility="" }
|
style = new ElementStyle { fontSize = 24, fontFamily = "Kaiti", isVertical = true, letterSpacing = 5, lineHeight = 1.5 ,visibility="" }
|
||||||
},
|
},
|
||||||
new TabletElement {
|
new TabletElement {
|
||||||
id = "titletriangle", type = "roster", text = "張一\n李二\n陳三", x = 130, y = 80,
|
id = "lefttitle", type = "ancestor", text = "左正名", x = 10, y = 80,
|
||||||
style = new ElementStyle { fontSize = 24, fontFamily = "Kaiti", isVertical = true, letterSpacing = 5, lineHeight = 1.5,visibility="hidden" }
|
style = new ElementStyle { fontSize = 24, fontFamily = "Kaiti", isVertical = true, letterSpacing = 5, lineHeight = 1.5 ,visibility="" }
|
||||||
|
},
|
||||||
|
new TabletElement {
|
||||||
|
id = "righttitle", type = "ancestor", text = "右正名", x = 50, y = 80,
|
||||||
|
style = new ElementStyle { fontSize = 24, fontFamily = "Kaiti", isVertical = true, letterSpacing = 5, lineHeight = 1.5 ,visibility="" }
|
||||||
|
},
|
||||||
|
new TabletElement {
|
||||||
|
id = "titletriangle", type = "roster", text = "張一\n李二\n陳三\n吳四\n劉五\n趙六\n林七\n徐八", x = 10, y = 80,
|
||||||
|
style = new ElementStyle { fontSize = 24, fontFamily = "Kaiti", isVertical = true, letterSpacing = 5, lineHeight = 1.5,visibility="" }
|
||||||
},
|
},
|
||||||
new TabletElement
|
new TabletElement
|
||||||
{
|
{
|
||||||
id="combined",type="combined-center",text="林張吳\n氏歷代祖先", x = 130, y = 80,
|
id="tricombined",type="combined-center",text="林張吳\n氏歷代祖先", x = 10, y = 80,
|
||||||
style = new ElementStyle { fontSize = 24, fontFamily = "Kaiti", isVertical = true, letterSpacing = 5, lineHeight = 1.5 ,visibility="hidden" }
|
style = new ElementStyle { fontSize = 24, fontFamily = "Kaiti", isVertical = true, letterSpacing = 5, lineHeight = 1.5 ,visibility="" }
|
||||||
}, new TabletElement
|
},
|
||||||
|
new TabletElement
|
||||||
{
|
{
|
||||||
id="alive",type="alive",text="劉大哥", x = 60, y = 200,
|
id="combined",type="combined-center",text="李王\n氏歷代祖先", x = 10, y = 80,
|
||||||
|
style = new ElementStyle { fontSize = 24, fontFamily = "Kaiti", isVertical = true, letterSpacing = 5, lineHeight = 1.5 ,visibility="" }
|
||||||
|
},
|
||||||
|
new TabletElement
|
||||||
|
{
|
||||||
|
id="alive",type="alive",text="陽上名字", x = 60, y = 200,
|
||||||
style = new ElementStyle { fontSize = 18, fontFamily = "Kaiti", isVertical = true, letterSpacing = 5, lineHeight = 1.5 ,visibility="" }
|
style = new ElementStyle { fontSize = 18, fontFamily = "Kaiti", isVertical = true, letterSpacing = 5, lineHeight = 1.5 ,visibility="" }
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in New Issue
Block a user