feat(二维码): 添加删除按钮并重构二维码元素结构
- 为二维码元素添加删除按钮,仅在选中时显示 - 重构二维码元素结构,将图片包裹在容器div中 - 调整透明度设置逻辑以匹配新结构 - 防止删除按钮触发拖拽事件
This commit is contained in:
80
js/qr.js
80
js/qr.js
@@ -119,21 +119,63 @@
|
||||
const container = document.getElementById('imageContainer');
|
||||
const rect = container.getBoundingClientRect();
|
||||
|
||||
const img = document.createElement('img');
|
||||
img.src = canvas.toDataURL('image/png');
|
||||
img.className = 'qr-item';
|
||||
img.dataset.type = 'qrcode';
|
||||
img.style.cssText = `
|
||||
// 创建二维码容器
|
||||
const wrapper = document.createElement('div');
|
||||
wrapper.className = 'qr-item';
|
||||
wrapper.dataset.type = 'qrcode';
|
||||
wrapper.style.cssText = `
|
||||
position: absolute;
|
||||
width: ${CONFIG.DEFAULT_SIZE}px;
|
||||
height: ${CONFIG.DEFAULT_SIZE}px;
|
||||
opacity: 1;
|
||||
left: ${(rect.width / 2 - CONFIG.DEFAULT_SIZE / 2)}px;
|
||||
top: ${(rect.height / 2 - CONFIG.DEFAULT_SIZE / 2)}px;
|
||||
`;
|
||||
|
||||
container.appendChild(img);
|
||||
makeDraggable(img);
|
||||
selectQR(img);
|
||||
// 创建二维码图片
|
||||
const img = document.createElement('img');
|
||||
img.src = canvas.toDataURL('image/png');
|
||||
img.style.cssText = `
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 1;
|
||||
display: block;
|
||||
`;
|
||||
|
||||
// 创建删除按钮
|
||||
const deleteBtn = document.createElement('button');
|
||||
deleteBtn.className = 'qr-delete-btn';
|
||||
deleteBtn.innerHTML = '×';
|
||||
deleteBtn.title = '删除二维码';
|
||||
deleteBtn.type = 'button';
|
||||
|
||||
// 删除按钮点击事件
|
||||
deleteBtn.onclick = function(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
// 删除二维码元素
|
||||
wrapper.remove();
|
||||
|
||||
// 清除选中状态
|
||||
if (state.selectedQR === wrapper) {
|
||||
state.selectedQR = null;
|
||||
hideQRTools();
|
||||
if (elements.editorToolbar) {
|
||||
elements.editorToolbar.classList.remove('active');
|
||||
}
|
||||
}
|
||||
|
||||
// 保存状态
|
||||
saveState();
|
||||
|
||||
return false;
|
||||
};
|
||||
|
||||
wrapper.appendChild(img);
|
||||
wrapper.appendChild(deleteBtn);
|
||||
container.appendChild(wrapper);
|
||||
makeDraggable(wrapper);
|
||||
selectQR(wrapper);
|
||||
closeModal();
|
||||
|
||||
saveState();
|
||||
@@ -187,7 +229,8 @@
|
||||
function syncToolbarValues() {
|
||||
if (!state.selectedQR) return;
|
||||
|
||||
const opacity = parseFloat(state.selectedQR.style.opacity) || 1;
|
||||
const img = state.selectedQR.querySelector('img');
|
||||
const opacity = img ? (parseFloat(img.style.opacity) || 1) : 1;
|
||||
const size = parseInt(state.selectedQR.style.width) || CONFIG.DEFAULT_SIZE;
|
||||
|
||||
if (elements.qrOpacitySlider) {
|
||||
@@ -222,7 +265,10 @@
|
||||
function updateOpacity(value) {
|
||||
if (!state.selectedQR) return;
|
||||
|
||||
state.selectedQR.style.opacity = value / 100;
|
||||
const img = state.selectedQR.querySelector('img');
|
||||
if (img) {
|
||||
img.style.opacity = value / 100;
|
||||
}
|
||||
elements.qrOpacityValue.textContent = value + '%';
|
||||
}
|
||||
|
||||
@@ -278,16 +324,24 @@
|
||||
}
|
||||
}
|
||||
|
||||
// 鼠标事件
|
||||
// 鼠标事件 - 排除删除按钮
|
||||
el.addEventListener('mousedown', (e) => {
|
||||
// 如果点击的是删除按钮,不处理拖拽
|
||||
if (e.target.closest('.qr-delete-btn')) {
|
||||
return;
|
||||
}
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
selectQR(el);
|
||||
startDrag(e.clientX, e.clientY);
|
||||
});
|
||||
|
||||
// 触摸事件
|
||||
// 触摸事件 - 排除删除按钮
|
||||
el.addEventListener('touchstart', (e) => {
|
||||
// 如果触摸的是删除按钮,不处理拖拽
|
||||
if (e.target.closest('.qr-delete-btn')) {
|
||||
return;
|
||||
}
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
selectQR(el);
|
||||
|
||||
Reference in New Issue
Block a user