Указатель jQuery на изображение (план этажа) ⇐ Jquery

[Anonymous]

Я пытаюсь разместить маркер над изображением (планом этажа), который будет придерживаться этих координат независимо от того, увеличивает или уменьшает пользователь масштаб, перетаскивает изображение в режиме масштабирования. Я пытался, но без особого успеха, создать полуфункциональный код, использующий события щелчка и касания.
Можно дважды щелкнуть или дважды нажать, чтобы добавить маркер на план этажа, а затем изменить масштаб или нет, чтобы маркер должен был измениться. оставаться в том же положении. Представьте, что вы хотите иметь маркер там, где должна быть лампочка, вы добавляете маркер в этом точном положении, а затем можете масштабировать план этажа, но маркер должен оставаться там, где он был добавлен, если только пользователь не коснется / не щелкнет еще раз.

Код: Выделить всё

    




Image Zoom and Marker


#image-container {
position: relative;
width: 100%;
max-width: 600px;
height: 400px; /* Specify a fixed height for better control */
overflow: hidden;
}
#image-container img {
width: 100%;
transform-origin: top left;
transition: transform 0.25s ease;
cursor: grab;
}
.marker {
position: absolute;
color: red;
pointer-events: none; /* Prevent marker from capturing click events */
font-size: 1.5em; /* Smaller marker size */
transform-origin: center;
}
#zoom-button {
position: absolute;
top: 10px;
right: 10px;
background: rgba(0, 0, 0, 0.5); /* Dark transparent background */
border: none;
cursor: pointer;
z-index: 10;
padding: 5px;
border-radius: 10px; /* Rounded corners */
}
#zoom-button i {
font-size: 2em;
color: white;
}




[i]

[/i]






$(document).ready(function() {
let scale = 1;
const maxScale = 5; // Maximum zoom level
const minScale = 1;
const scaleStep = 1;

let isDragging = false;
let startX, startY;
let imgX = 0, imgY = 0;

let pinX, pinY;
let existingPin = null;

// Handle zoom button click
$('#zoom-button').on('click', function() {
if (scale < maxScale) {
scale += scaleStep;
} else {
scale = minScale; // Reset to original size
}
updateZoom();
updateMarkers();
});

// Handle double click/tap for marker placement
$('#image-container').on('dblclick', function(e) {
if ($(e.target).is('#zoom-button, #zoom-button *')) {
return; // Prevent placing marker when clicking the zoom button
}

const image = $('#zoom-image');
const offsetX = e.pageX - image.offset().left;
const offsetY = e.pageY - image.offset().top;
const x = offsetX / scale;
const y = offsetY / scale;

// Remove existing pin
if (existingPin) {
existingPin.remove();
}

pinX = x;
pinY = y;

const marker = $('[i][/i]');  // Adjusted size
marker.css({
top: pinY * scale + 'px', // Relative to image
left: pinX * scale + 'px', // Relative to image
transform: `scale(${1 / scale})` // Ensure marker size stays consistent
});

existingPin = marker;
image.after(marker);
});

// Enable dragging
$('#zoom-image').on('mousedown touchstart', function(e) {
isDragging = true;
const event = e.type === 'mousedown' ? e : e.touches[0];
startX = event.pageX - imgX;
startY = event.pageY - imgY;
$('#zoom-image').css('cursor', 'grabbing');
e.preventDefault(); // Prevent default touch actions
});

$(document).on('mousemove touchmove', function(e) {
if (isDragging) {
const event = e.type === 'mousemove' ? e : e.touches[0];
imgX = event.pageX - startX;
imgY = event.pageY - startY;

// Limit dragging within image boundaries
const image = $('#zoom-image');
const maxX = (image.width() * scale - image.width()) / 2;
const maxY = (image.height() * scale - image.height()) / 2;
imgX = Math.max(-maxX, Math.min(imgX, maxX));
imgY = Math.max(-maxY, Math.min(imgY, maxY));

$('#zoom-image').css('transform', 'scale(' + scale + ') translate(' + imgX + 'px, ' + imgY + 'px)');
updateMarkers();
}
});

$(document).on('mouseup touchend', function() {
isDragging = false;
$('#zoom-image').css('cursor', 'grab');
});

// Update marker positions based on the current scale
function updateMarkers() {
if (existingPin) {
existingPin.css({
top: pinY * scale + 'px', // Relative to image
left: pinX * scale + 'px', // Relative to image
transform: `scale(${1 / scale})` // Ensure marker size stays consistent
});
}
}

// Update image zoom level
function updateZoom() {
$('#zoom-image').css('transform', 'scale(' + scale + ') translate(' + imgX + 'px, ' + imgY + 'px)');
}
});

При масштабировании указатель не будет привязан к текущим координатам щелчка, а также не будет отображаться при масштабировании. Забавно то, что при увеличении или уменьшении масштаба высота указателя увеличивается или уменьшается.
Может кто-нибудь показать мне, где я делаю что-то глупое?
Спасибо!

Подробнее здесь: https://stackoverflow.com/questions/785 ... floor-plan