Thiết kế website giá rẻ

Question

In the following code I have a problem with zooming. When the Mouse is on one position and I zoom to this position, everthing is fine. But when I move the Mouse to another position and zoom there, then the canvas moves to another position. I think the problem is that after zooming, the new mouse position is not right because of zooming. How can I recalculate it correctly?

The zoomfactor must be allways 0.05 -> 1.0, 0.95, 0.9 and back 0.9, 0.95, 1.0

The zoom range goes from 0.3 to 1.0

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas Zoom</title>
    <style>
    
    html, body
    {
            overflow: hidden;
    }
        #container {
            width: 100vw; /* Nimmt die gesamte Breite des Fensters ein */
            height: 100vh; /* Nimmt die gesamte Höhe des Fensters ein */
            overflow: hidden;
            position: relative;
            background-color: lightgrey; /* Hilfreich zum Debuggen */
        }
        #citycanvas {
            position: absolute;
            transform-origin: top left;
            background-color: green;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div id="container">
        <canvas id="citycanvas" width="12600" height="9600"></canvas>
    </div>
    <script src="zoom.js"></script>
</body>
</html>

const container = document.getElementById('container');
const citycanvas = document.getElementById('citycanvas');
const citycontext = citycanvas.getContext('2d');

// Funktion zum Zeichnen von Bergen
function drawMountains(context) {
    const gradient = context.createLinearGradient(0, 0, 0, 400);
    gradient.addColorStop(0, "#000000");
    gradient.addColorStop(1, "#000000");
    context.fillStyle = gradient;

    context.beginPath();
    let startX = 200;
    let startY = 400;
    let width = 300;
    let height = 200;
    context.moveTo(startX, startY);
    context.lineTo(startX + width / 2, startY - height);
    context.lineTo(startX + width, startY);
    context.lineTo(startX, startY);

    let mountainData = [
        { startX: 500, startY: 400, width: 250, height: 150 },
        { startX: 800, startY: 400, width: 350, height: 250 },
        { startX: 1100, startY: 400, width: 200, height: 100 }
    ];

    mountainData.forEach(mountain => {
        context.moveTo(mountain.startX, mountain.startY);
        context.lineTo(mountain.startX + mountain.width / 2, mountain.startY - mountain.height);
        context.lineTo(mountain.startX + mountain.width, mountain.startY);
        context.lineTo(mountain.startX, mountain.startY);
    });

    context.closePath();
    context.fill();
}

drawMountains(citycontext);

let Zoomfaktor = 0.05;
const min_Faktor = 0.3;
const max_Faktor = 1.0;
let mouseX, mouseY;
let Zoomlevel = 1.0;
let woldX = 0;
let woldY = 0;
let windowcursorposX = 0;
let windowcursorposY = 0;
let mapleftposX = 0;
let mapleftposY = 0;
let mapcursorposX = 0;
let mapcursorposY = 0;



// Bestimmt die Cursorposition auf der Map
function cursorpos(e)
{
  woldX = windowcursorposX;
  woldY = windowcursorposY;

  console.log('woldX: ' + woldX);
//  console.log('woldY: ' + woldY);
  
  windowcursorposX = parseInt(e.clientX); 
  windowcursorposY = parseInt(e.clientY);

  console.log('windowcursorposX: ' + windowcursorposX);
//  console.log('windowcursorposY: ' + windowcursorposY);
  

  // Berechne die tatsächliche Position auf der Karte basierend auf dem aktuellen Zoomlevel
  mapcursorposX = windowcursorposX - mapleftposX;
  mapcursorposY = windowcursorposY - mapleftposY;

console.log('mapleftposX: ' + mapleftposX);
//console.log('mapleftposY: ' + mapleftposY);
  
console.log('mapcursorposX: ' + mapcursorposX);
//console.log('mapcursorposY: ' + mapcursorposY);
    
}

// Aktualisiere die Mausposition bei jeder Bewegung
citycanvas.addEventListener('mousemove', (e) => {
  cursorpos(e);
});

// Zoomfunktion nicht löschen und verändern
citycanvas.addEventListener('wheel', (e) => 
{
  e.preventDefault();

  cursorpos(e);

  // Richtung des Mausrads bestimmen
  const delta = e.deltaY > 0 ? -1 : 1; // Zoom-In (delta < 0) und Zoom-Out (delta > 0)
  console.log('delta: ' + delta);

  // Berechnung des neuen Zoomlevels
  let newZoomLevel = Zoomlevel - (delta * Zoomfaktor);

  // Begrenzung des Zoomlevels (optional)
  newZoomLevel = Math.max(min_Faktor, Math.min(max_Faktor, newZoomLevel));
  console.log('newZoomLevel: ' + newZoomLevel);

  // Nur weiterfahren, wenn das neue Zoomlevel sich ändert
  if (newZoomLevel !== Zoomlevel)
  {
        // Berechnung des neuen Transformationsursprungs
        const newPosX = mapcursorposX / Zoomlevel;
        const newPosY = mapcursorposY / Zoomlevel;
  
        console.log('mapcursorposX: ' + mapcursorposX);
        console.log('mapcursorposY: ' + mapcursorposY);
        console.log('Zoomlevel: ' + Zoomlevel);
  
        console.log('newPosX: ' + newPosX);
        console.log('newPosY: ' + newPosY);
  
        // Setze den neuen Zoomfaktor und den neuen Transformationsursprung
        citycanvas.style.transformOrigin = `${newPosX}px ${newPosY}px`;
        citycanvas.style.transform = `scale(${newZoomLevel})`;
  
        // Position der Maus relativ zum Canvas
        const rect = citycanvas.getBoundingClientRect();
        mapleftposX = rect.left;
        mapleftposY = rect.top;
  
        console.log('mapleftposX: ' + mapleftposX);
        console.log('mapleftposY: ' + mapleftposY);
  
        // Aktualisiere das Zoomlevel
        Zoomlevel = newZoomLevel;
  }
});

Thiết kế website giá rẻ

Danh mục

Canvas zoom with CSS transformation