+
+ ${layer.name}
+ ${getLayerTypeName(layer.type)}
+
+ ${layer.visible ? '✓' : '✕'}
+
+ `;
+
+ layersList.appendChild(layerItem);
+ console.log('updateLayersList: 已添加到列表', layer.id);
+ });
+
+ // 恢复滚动位置
+ layersList.scrollTop = scrollTop;
+
+ // 更新按钮状态
+ updateLayerButtons();
+ });
+ }
+
+ // 获取图层名称
+ function getLayerName(element) {
+ console.log('getLayerName', element.id, element.textContent);
+ const text = element.textContent.trim();
+ if (text) {
+ return text.length > 10 ? text.substring(0, 10) + '...' : text;
+ }
+ const placeholder = element.dataset.placeholder;
+ const id = element.id;
+ if (id === 'input1') return '企业';
+ if (id === 'input2') return '嘉宾';
+ if (id === 'input3') return '编号';
+ return placeholder || '文本';
+ }
+
+ // 获取图层类型名称
+ function getLayerTypeName(type) {
+ const names = {
+ 'text': '文本',
+ 'overlay': '层叠图',
+ 'background': '背景图'
+ };
+ return names[type] || type;
+ }
+
+ // 选中图层
+ function selectLayer(layerId) {
+ selectedLayerId = layerId;
+
+ // 取消所有选中
+ document.querySelectorAll('.layer-item').forEach(item => {
+ item.classList.remove('selected');
+ });
+
+ // 高亮当前选中的图层项
+ const layerItem = document.querySelector(`.layer-item[data-layer-id="${layerId}"]`);
+ if (layerItem) {
+ layerItem.classList.add('selected');
+ }
+
+ // 选中对应的元素
+ const element = getLayerElement(layerId);
+ if (element) {
+ if (element.classList.contains('text-input')) {
+ selectInput(element);
+ } else if (element.classList.contains('overlay-image')) {
+ selectOverlay(element);
+ } else if (element.id === 'bgImage') {
+ // 选中背景图
+ editorToolbar.classList.add('active');
+ textTools.classList.remove('active');
+ imageTools.classList.remove('active');
+ bgTools.classList.add('active');
+ }
+ }
+
+ updateLayerButtons();
+ }
+
+ // 获取图层元素
+ function getLayerElement(layerId) {
+ if (layerId === 'background') return bgImage;
+ return document.getElementById(layerId) || document.querySelector(`[data-layer-id="${layerId}"]`);
+ }
+
+ // 更新图层按钮状态
+ function updateLayerButtons() {
+ const hasSelection = selectedLayerId !== null;
+
+ // 显示/隐藏按钮需要选中图层才能使用
+ const visibleBtn = document.getElementById('layerToggleVisible');
+ if (visibleBtn) {
+ visibleBtn.disabled = !hasSelection;
+ }
+ }
+
+ // 切换图层可见性
+ function toggleLayerVisibility() {
+ if (!selectedLayerId) return;
+
+ const element = getLayerElement(selectedLayerId);
+ if (!element) return;
+
+ element.classList.toggle('layer-hidden');
+ updateLayersList();
+ saveState(true);
+ }
+
// 初始化键盘微调功能（方向键 1px 移动）
function initKeyboardNudge() {
document.addEventListener('keydown', (e) => {
@@ -2846,8 +3129,8 @@
const scale = TARGET_WIDTH / displayWidth;
console.log('统一缩放比例:', scale, '画布宽高比:', TARGET_WIDTH/TARGET_HEIGHT, '容器宽高比:', displayRatio);
- // 绘制背景图
- if (currentImage) {
+ // 绘制背景图（检查是否被隐藏）
+ if (currentImage && !bgImage.classList.contains('layer-hidden')) {
if (document.getElementById('globalLoading')) {
loadingManager.updateMessage('正在绘制背景...');
}
@@ -2884,7 +3167,10 @@
]);
textInputs.forEach(textInput => {
- drawTextOnCanvasHD(ctx, textInput, scale);
+ // 跳过隐藏的文本图层
+ if (!textInput.classList.contains('layer-hidden')) {
+ drawTextOnCanvasHD(ctx, textInput, scale);
+ }
});
// 记录总耗时
@@ -3044,6 +3330,12 @@
for (const batch of batches) {
await Promise.all(batch.map(async (overlayEl) => {
+ // 跳过隐藏的图层
+ if (overlayEl.classList.contains('layer-hidden')) {
+ processedCount++;
+ return;
+ }
+
const imgEl = overlayEl.querySelector('img');
if (!imgEl) {
processedCount++;