diff --git a/images/default-bg.jpg b/images/default-bg.jpg
index fae8f92..86a706c 100644
Binary files a/images/default-bg.jpg and b/images/default-bg.jpg differ
diff --git a/index.html b/index.html
index 8535679..e84b058 100644
--- a/index.html
+++ b/index.html
@@ -121,11 +121,11 @@
请点击上方「添加图片」按钮上传背景图
@@ -171,6 +171,7 @@
+
diff --git a/js/inputs-config.js b/js/inputs-config.js
new file mode 100644
index 0000000..c07ccff
--- /dev/null
+++ b/js/inputs-config.js
@@ -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": "请输入"
+ }
+ ]
+};
diff --git a/js/script.js b/js/script.js
index b81d03e..ea3eeb6 100644
--- a/js/script.js
+++ b/js/script.js
@@ -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);
@@ -1504,6 +1520,53 @@
isInteractingWithBgImage = false;
}
}
+
+ // ==================== 输入框位置信息显示 ====================
+ 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) {
@@ -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');