document.addEventListener('DOMContentLoaded', function () {
const container = document.getElementById('canvas-container');
const canvas = document.getElementById('infinite-canvas');
let scale = 1;
let originX = 0;
let originY = 0;
let isPanning = false;
let startX, startY;
// 缩放
container.addEventListener('wheel', function (e) {
e.preventDefault();
const delta = e.deltaY > 0 ? -0.1 : 0.1;
scale = Math.max(0.2, Math.min(4, scale + delta));
updateTransform();
});
// 拖动
container.addEventListener('mousedown', function (e) {
if (e.button === 1 || e.button === 2) {
isPanning = true;
startX = e.pageX;
startY = e.pageY;
container.style.cursor = 'grabbing';
e.preventDefault();
}
});
document.addEventListener('mousemove', function (e) {
if (isPanning) {
originX += e.pageX - startX;
originY += e.pageY - startY;
startX = e.pageX;
startY = e.pageY;
updateTransform();
}
});
document.addEventListener('mouseup', function () {
isPanning = false;
container.style.cursor = 'grab';
});
function updateTransform() {
canvas.style.transform = `translate(${originX}px, ${originY}px) scale(${scale})`;
}
container.addEventListener('contextmenu', e => e.preventDefault());
});
