WeWork/invitation-maker
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 抽离输入框配置并添加拖拽位置提示

Browse Source
This commit is contained in:
ZF Sun
2026-05-15 14:35:51 +08:00
parent 6a0294f0c0
commit c6f7787c35
4 changed files with 104 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
images/default-bg.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 111 KiB

After

Width:  |  Height:  |  Size: 633 KiB

7
index.html
View File

@@ -121,11 +121,11 @@
<!-- 输入框图层 -->
<div class="preview-input-layer" id="previewInputLayer">
<!-- 文字输入框1 - 企业 -->
<div class="text-input hidden" id="input1" contenteditable="false" data-placeholder="请输入" style="left: 98px; top: 234.445px; font-weight: bold;"></div>
<div class="text-input hidden" id="input1" contenteditable="false"></div>
<!-- 文字输入框2 - 姓名 -->
<div class="text-input hidden" id="input2" contenteditable="false" data-placeholder="请输入" style="left: 98px; top: 276.355px; font-weight: bold;"></div>
<div class="text-input hidden" id="input2" contenteditable="false"></div>
<!-- 文字输入框3 - 编号 -->
<div class="text-input hidden" id="input3" contenteditable="false" data-placeholder="请输入" style="left: 98px; top: 319.048px; font-weight: bold;"></div>
<div class="text-input hidden" id="input3" contenteditable="false"></div>
</div>
<!-- 提示文字（最上层，层叠图之下） -->
<div class="empty-tip" id="emptyTip">请点击上方「添加图片」按钮上传背景图</div>
@@ -171,6 +171,7 @@
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
<script src="./js/inputs-config.js"></script>
<script src="./js/script.js"></script>
<script src="./js/qr.js"></script>
</body>

30
js/inputs-config.js Normal file
View File

@@ -0,0 +1,30 @@
// 输入框初始化配置 - 独立于主逻辑的配置文件
// 如需调整初始化位置或样式，请修改此文件
var INPUTS_CONFIG = {
"inputs": [
{
"id": "input1",
"label": "企业",
"left": 100,
"top": 218.4,
"fontWeight": "bold",
"placeholder": "请输入"
},
{
"id": "input2",
"label": "嘉宾",
"left": 100,
"top": 261.4,
"fontWeight": "bold",
"placeholder": "请输入"
},
{
"id": "input3",
"label": "编号",
"left": 100,
"top": 308.1,
"fontWeight": "bold",
"placeholder": "请输入"
}
]
};

70
js/script.js
View File

@@ -44,6 +44,7 @@
const guideV = document.getElementById('guideV');
const gridLines = document.getElementById('gridLines');
let inputsConfig = null;
let currentImage = null;
let bgImageScale = 1;
let bgImageOpacity = 1;
@@ -263,6 +264,19 @@
updateUndoRedoButtons();
// 从配置文件应用输入框初始参数
if (typeof INPUTS_CONFIG !== 'undefined' && INPUTS_CONFIG && INPUTS_CONFIG.inputs) {
INPUTS_CONFIG.inputs.forEach(function(cfg) {
var el = document.getElementById(cfg.id);
if (el) {
el.style.left = cfg.left + 'px';
el.style.top = cfg.top + 'px';
if (cfg.fontWeight) el.style.fontWeight = cfg.fontWeight;
if (cfg.placeholder) el.dataset.placeholder = cfg.placeholder;
}
});
}
// 初始化输入框
initInput(input1);
initInput(input2);
@@ -393,6 +407,7 @@
if (selectedInput) {
selectedInput.classList.remove('selected');
selectedInput = null;
hidePositionInfo();
}
// 取消层叠图选中状态
if (selectedOverlay) {
@@ -1192,6 +1207,7 @@
if (selectedInput) {
selectedInput.classList.remove('selected');
selectedInput = null;
hidePositionInfo();
}
if (editingInput) {
endEdit(editingInput);
@@ -1505,6 +1521,53 @@
}
}
// ==================== 输入框位置信息显示 ====================
var positionInfoEl = null;
// 创建位置信息提示元素
function ensurePositionInfo() {
if (!positionInfoEl) {
positionInfoEl = document.createElement('div');
positionInfoEl.className = 'input-position-info';
positionInfoEl.style.cssText = 'display:none;position:fixed;padding:3px 8px;background:rgba(0,0,0,0.75);color:#fff;font-size:12px;border-radius:4px;pointer-events:none;z-index:10000;white-space:nowrap;font-family:monospace;';
document.body.appendChild(positionInfoEl);
}
return positionInfoEl;
}
// 显示并更新位置信息
function showPositionInfo(element) {
var info = ensurePositionInfo();
var left = parseFloat(element.style.left) || 0;
var top = parseFloat(element.style.top) || 0;
info.textContent = 'left: ' + left.toFixed(1) + 'px top: ' + top.toFixed(1) + 'px';
// 将 info 定位在输入框上方
var rect = element.getBoundingClientRect();
info.style.left = (rect.left + rect.width / 2 - info.offsetWidth / 2) + 'px';
info.style.top = (rect.top - 30) + 'px';
info.style.display = 'block';
}
// 更新位置信息（拖拽中实时调用）
function updatePositionInfo(element, left, top) {
var info = ensurePositionInfo();
info.textContent = 'left: ' + left.toFixed(1) + 'px top: ' + top.toFixed(1) + 'px';
info.style.left = (parseFloat(info.style.left)) + 'px';
// 重新定位到输入框上方
var rect = element.getBoundingClientRect();
info.style.left = (rect.left + rect.width / 2 - info.offsetWidth / 2) + 'px';
info.style.top = (rect.top - 30) + 'px';
}
// 隐藏位置信息
function hidePositionInfo() {
if (positionInfoEl) {
positionInfoEl.style.display = 'none';
}
}
// 初始化输入框 - 每个输入框独立管理自己的拖拽状态
function initInput(element) {
let isMouseDown = false;
@@ -1633,6 +1696,9 @@
element.style.left = snapped.left + 'px';
element.style.top = snapped.top + 'px';
// 实时更新位置信息显示
updatePositionInfo(element, snapped.left, snapped.top);
// 显示对齐辅助线
showAlignmentGuides(element);
}
@@ -1728,6 +1794,9 @@
// 更新工具栏状态
updateToolbarState(element);
// 显示位置信息
showPositionInfo(element);
}
// 开始编辑
@@ -2272,6 +2341,7 @@
if (selectedInput) {
selectedInput.classList.remove('selected');
selectedInput = null;
hidePositionInfo();
}
// 隐藏编辑器工具栏
editorToolbar.classList.remove('active');