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:
Zhukj
2026-04-20 10:57:31 +08:00
parent c9f12c3864
commit 58558a2bc6
2 changed files with 10 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
index.html
View File

@@ -85,10 +85,12 @@
<div class="guide-line guide-vertical" id="guideV"></div> <div class="guide-line guide-vertical" id="guideV"></div>
<!-- 输入框图层 --> <!-- 输入框图层 -->
<div class="preview-input-layer"> <div class="preview-input-layer">
<!-- 文字输入框1 - 右下角 --> <!-- 文字输入框1 - 企业 -->
<div class="text-input" id="input1" contenteditable="false" style="left: 5%; top: 80%;">姓名：</div> <div class="text-input" id="input1" contenteditable="false" style="left: 98px; top: 232.945px;">企业：</div>
<!-- 文字输入框2 - 右下角 --> <!-- 文字输入框2 - 姓名 -->
<div class="text-input" id="input2" contenteditable="false" style="left: 5%; top: 90%;">编号：</div> <div class="text-input" id="input2" contenteditable="false" style="left: 98px; top: 275.555px;">姓名：</div>
<!-- 文字输入框3 - 编号 -->
<div class="text-input" id="input3" contenteditable="false" style="left: 98px; top: 317.548px;">编号：</div>
</div> </div>
<!-- 提示文字（最上层，层叠图之下） --> <!-- 提示文字（最上层，层叠图之下） -->
<div class="empty-tip" id="emptyTip">请点击上方「添加图片」按钮上传背景图</div> <div class="empty-tip" id="emptyTip">请点击上方「添加图片」按钮上传背景图</div>

51
js/script.js
View File

@@ -11,6 +11,7 @@
const emptyTip = document.getElementById('emptyTip'); const emptyTip = document.getElementById('emptyTip');
const input1 = document.getElementById('input1'); const input1 = document.getElementById('input1');
const input2 = document.getElementById('input2'); const input2 = document.getElementById('input2');
const input3 = document.getElementById('input3');
const exportCanvas = document.getElementById('exportCanvas'); const exportCanvas = document.getElementById('exportCanvas');
const longPressTip = document.getElementById('longPressTip'); const longPressTip = document.getElementById('longPressTip');
const canvasArea = document.getElementById('canvasArea'); const canvasArea = document.getElementById('canvasArea');
@@ -97,9 +98,10 @@
// 初始化输入框 // 初始化输入框
initInput(input1); initInput(input1);
initInput(input2); initInput(input2);
initInput(input3);
// 为原有两个输入框添加删除按钮 // 为三个输入框添加删除按钮
[input1, input2].forEach(inputEl => { [input1, input2, input3].forEach(inputEl => {
const deleteBtn = document.createElement('button'); const deleteBtn = document.createElement('button');
deleteBtn.className = 'text-delete-btn'; deleteBtn.className = 'text-delete-btn';
deleteBtn.innerHTML = '×'; deleteBtn.innerHTML = '×';
@@ -237,56 +239,11 @@
bgOpacitySlider.value = 100; bgOpacitySlider.value = 100;
bgOpacityValue.textContent = '100%'; bgOpacityValue.textContent = '100%';
updateBgImage(); updateBgImage();
// 创建初始文本输入框
createInitialTextInputs();
}; };
img.src = e.target.result; img.src = e.target.result;
}; };
reader.readAsDataURL(file); reader.readAsDataURL(file);
} }
// 创建初始文本输入框
function createInitialTextInputs() {
const container = imageContainer;
const containerWidth = container.clientWidth;
const containerHeight = container.clientHeight;
// 定义3个输入框的位置（像素值）
const inputs = [
{ left: 98, top: 232.945, text: '参会企业：' },
{ left: 98, top: 275.555, text: '姓名：' },
{ left: 98, top: 317.548, text: '编号：' }
];
inputs.forEach((input, index) => {
const textEl = document.createElement('div');
textEl.className = 'text-input';
textEl.contentEditable = 'false';
textEl.textContent = input.text;
// 将像素位置转换为百分比
const leftPercent = (input.left / containerWidth * 100);
const topPercent = (input.top / containerHeight * 100);
textEl.style.left = leftPercent + '%';
textEl.style.top = topPercent + '%';
// 删除按钮
const deleteBtn = document.createElement('button');
deleteBtn.className = 'text-delete-btn';
deleteBtn.innerHTML = '×';
deleteBtn.addEventListener('click', (e) => {
e.stopPropagation();
textEl.remove();
});
textEl.appendChild(deleteBtn);
const inputLayer = container.querySelector('.preview-input-layer');
inputLayer.appendChild(textEl);
initInput(textEl);
});
}
// 添加文本输入框 // 添加文本输入框
function addTextInput() { function addTextInput() {