Bonjour à tous, je suis nouveau dans le domaine du code en HTML, CSS et Java et je tente de me former en autodidacte, je me suis fixé comme objectif de réussir à créer un code qui me permet lorsque je clique avec ma souris, de dessiner un rectangle de sélection, lorsque je relâche le bouton de ma souris, ma sélection est centrée et zoomée au milieu de mon écran.
Seulement, je suis confronté à un soucis de taille et je ne parviens pas à le résoudre.
En effet, si j'effectue un premier zoom, tout fonctionne comme prévu, seulement si j'essai à nouveau de zoomer, ça ne fonctionne plus du tout. J'ai assez peu de piste, si ce n'est que (grâce à mes logs) je me rend bien compte que les valeurs de mes Nouvelles distances deviennent énormes
Est ce que quelqu'un aurait une idée ?
Merci !

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test Magnify</title>
    <style>
        .tree-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            transform-origin: top left;
            background-color: lightgrey;
        }
        .left-panel {
            position: relative;
            width: 100%;
            height: 100vh;
            overflow: hidden;
        }
        .selection-rectangle {
            position: absolute;
            border: 1px dashed #000;
            background-color: rgba(0, 0, 255, 0.2);
            display: none;
        }
        .target {
            position: absolute;
            top: 150px;
            left: 200px;
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .axis {
            position: absolute;
            background-color: black;
        }
        .axis.x {
            top: 50%;
            left: 0;
            width: 100%;
            height: 2px;
        }
        .axis.y {
            left: 50%;
            top: 0;
            width: 2px;
            height: 100%;
        }
        .graduation {
            position: absolute;
            background-color: black;
        }
        .graduation.x {
            width: 1px;
            height: 10px;
            top: calc(50% - 5px);
        }
        .graduation.y {
            width: 10px;
            height: 1px;
            left: calc(50% - 5px);
        }
        .controls {
            position: absolute;
            top: 10px;
            left: 10px;
            z-index: 10;
        }
        .controls button {
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <div class="left-panel">
        <div class="tree-container">
            <!-- Élément cible non centré -->
            <div class="target"></div>
        </div>
        <!-- Axes -->
        <div class="axis x"></div>
        <div class="axis y"></div>
        <!-- Graduations X -->
        <div class="graduation x" style="left: 25%;"></div>
        <div class="graduation x" style="left: 50%;"></div>
        <div class="graduation x" style="left: 75%;"></div>
        <!-- Graduations Y -->
        <div class="graduation y" style="top: 25%;"></div>
        <div class="graduation y" style="top: 50%;"></div>
        <div class="graduation y" style="top: 75%;"></div>
    </div>
    <div class="controls">
        <button id="magnifyButton">Magnify</button>
        <button id="resetButton">Reset</button>
    </div>
    <div class="selection-rectangle"></div>
    <script>
        // Variables globales
        let magnifyMode = false;
        let selectionRectangle = null;
        let startX, startY;
        let currentScale = 1;
        let currentLeft = 0;
        let currentTop = 0;

        // Activer le mode de sélection
        document.getElementById('magnifyButton').addEventListener('click', function() {
            magnifyMode = true;
        });

        // Début de la sélection
        document.addEventListener('mousedown', (event) => {
            if (magnifyMode && event.button === 0) {
                startX = event.clientX;
                startY = event.clientY;
                if (!selectionRectangle) {
                    selectionRectangle = document.querySelector('.selection-rectangle');
                }
                selectionRectangle.style.left = `${startX}px`;
                selectionRectangle.style.top = `${startY}px`;
                selectionRectangle.style.width = '0px';
                selectionRectangle.style.height = '0px';
                selectionRectangle.style.display = 'block';
            }
        });

        // Ajustement de la sélection
        document.addEventListener('mousemove', (event) => {
            if (selectionRectangle && selectionRectangle.style.display === 'block') {
                const currentX = event.clientX;
                const currentY = event.clientY;
                const width = Math.abs(currentX - startX);
                const height = Math.abs(currentY - startY);

                selectionRectangle.style.width = `${width}px`;
                selectionRectangle.style.height = `${height}px`;
                selectionRectangle.style.left = `${Math.min(currentX, startX)}px`;
                selectionRectangle.style.top = `${Math.min(currentY, startY)}px`;
            }
        });

        // Fin de la sélection et centrage du conteneur
        document.addEventListener('mouseup', (event) => {
            if (magnifyMode && event.button === 0) {
                if (selectionRectangle) {
                    const rect = selectionRectangle.getBoundingClientRect();
                    const treeContainer = document.querySelector('.tree-container');
                    const leftPanel = document.querySelector('.left-panel');
                    const leftPanelWidth = leftPanel.clientWidth;
                    const leftPanelHeight = leftPanel.clientHeight;

                    console.log('Rectangle de sélection:', rect);
                    console.log('Dimensions du panneau gauche:', leftPanelWidth, leftPanelHeight);

                    const scaleX = leftPanelWidth / rect.width;
                    const scaleY = leftPanelHeight / rect.height;
                    const scale = Math.min(scaleX, scaleY);

                    currentScale *= scale; // Mise à jour du scale actuel
                    treeContainer.style.transformOrigin = 'top left';
                    treeContainer.style.transform = `scale(${currentScale})`;

                    // Forcer une relecture du style
                    treeContainer.offsetHeight;  // Accéder à une propriété pour forcer la relecture

                    const treeContainerRect = treeContainer.getBoundingClientRect();

                    const distanceLeft = (rect.left - treeContainerRect.left);
                    const distanceTop = (rect.top - treeContainerRect.top);

                    console.log('Distances:', distanceLeft, distanceTop);

                    const scaledDistanceLeft = distanceLeft * currentScale;
                    const scaledDistanceTop = distanceTop * currentScale;
                    const scaledRectWidth = rect.width * currentScale;
                    const scaledRectHeight = rect.height * currentScale;

                    console.log('Anciennes positions:', currentLeft, currentTop);
                    console.log('Scale:', scale);

                    // Ajouter des vérifications supplémentaires pour les valeurs intermédiaires
                    console.log('Left Panel Width:', leftPanelWidth);
                    console.log('Scaled Distance Left:', scaledDistanceLeft);
                    console.log('Scaled Rect Width:', scaledRectWidth);
                    console.log('Current Scale:', currentScale);

                    // Calcul des nouvelles positions
                    const newLeft = leftPanelWidth / 2 - (scaledDistanceLeft + scaledRectWidth / 2);
                    const newTop = leftPanelHeight / 2 - (scaledDistanceTop + scaledRectHeight / 2);

                    // Mettre à jour les positions courantes
                    currentLeft += newLeft;
                    currentTop += newTop;

                    console.log('Nouvelles positions:', currentLeft, currentTop);

                    treeContainer.style.left = `${currentLeft}px`;
                    treeContainer.style.top = `${currentTop}px`;

                    selectionRectangle.style.display = 'none';
                }
                magnifyMode = false;
            }
        });

        // Réinitialiser le centrage
        document.getElementById('resetButton').addEventListener('click', () => {
            const treeContainer = document.querySelector('.tree-container');
            currentScale = 1;
            currentLeft = 0;
            currentTop = 0;
            treeContainer.style.left = `${currentLeft}px`;
            treeContainer.style.top = `${currentTop}px`;
            treeContainer.style.transform = 'scale(1)';
        });
    </script>
</body>
</html>

26 juillet 2024 à 1:04:35

Lamecarlate

26 juillet 2024 à 8:20:35

Bonjour,

Le message qui suit est une réponse automatique activée par un membre de l'équipe de modération. Les réponses automatiques leur permettent d'éviter d'avoir à répéter de nombreuses fois la même chose, ce qui leur fait gagner du temps et leur permet de s'occuper des sujets qui méritent plus d'attention.
Nous sommes néanmoins ouverts et si vous avez une question ou une remarque, n'hésitez pas à contacter la personne en question par Message Privé.
Pour plus d'informations, nous vous invitons à lire les règles générales du forum

Déplacement vers un forum plus approprié

Le sujet est déplacé de la section vers la section Javascript

Pas d'aide concernant le code par MP, le forum est là pour ça :)

Forums des Zéros

Zoom grâce à rectangle de sélection

Débutant, je suis face à un bug et n'ai pas de solutions

Déplacement vers un forum plus approprié

Zoom grâce à rectangle de sélection

Zoom grâce à rectangle de sélection

Débutant, je suis face à un bug et n'ai pas de solutions

Déplacement vers un forum plus approprié

Zoom grâce à rectangle de sélection

Supprimer

Modérer

Signaler le message aux modérateurs