feat: 新增背景图默认加载3个固定位置文本框
This commit is contained in:
45
js/script.js
45
js/script.js
@@ -237,12 +237,57 @@
|
|||||||
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() {
|
||||||
const container = imageContainer;
|
const container = imageContainer;
|
||||||
|
|||||||
Reference in New Issue
Block a user