Tips for using JavaScript to magnify a specific point on a webpage

Question

Tips for using JavaScript to magnify a specific point on a webpage

As I work on my web project, I am trying to achieve the functionality of zooming in a div element centered around the mouse position while using the mouse wheel. I came across a helpful answer by @Tatarize on Zoom in on a point (using scale and translate), but I am having trouble implementing it accurately. The current issue is that the zoom and translation are not working as expected around the mouse position. Can anyone provide assistance?

window.onload = function() {
    const STEP = 0.05;
    const MAX_SCALE = 10;
    const MIN_SCALE = 0.01;

    const red = document.getElementById('red');
    const yellow = red.parentNode;

    let scale = 1;

    yellow.onmousewheel = function (event) {
        event.preventDefault();
        
        let mouseX = event.clientX - yellow.offsetLeft - red.offsetLeft;
        let mouseY = event.clientY - yellow.offsetTop - red.offsetTop;

        const factor = event.wheelDelta / 120;

        const oldScale = scale;
        scale = scale + STEP * factor;
        scale = Math.max(MIN_SCALE, Math.min(MAX_SCALE, scale));

        const scaleChanged = scale - oldScale;
        const offsetX = -(mouseX * scaleChanged);
        const offsetY = -(mouseY * scaleChanged);

        console.log(offsetX, offsetY);

        red.style.transform = 'translate(' + offsetX + 'px, ' + offsetY + 'px)' + 'scale(' + scale + ')';
    }
}

.yellow {
    background-color: yellow;
    width: 400px;
    height: 200px;
}

.red {
    background-color: red;
    width: 100px;
    height: 50px;
}

<div class="yellow">
    <div id="red" class="red"></div>
</div>

javascript html css

Answer 1

Answer №1

Wow, I can't believe I actually accomplished it!

window.onload = () => {
    const STEP = 0.99;
    const MAX_SCALE = 5;
    const MIN_SCALE = 0.01;

    const red = document.getElementById("red");
    const yellow = red.parentNode;

    let scale = 1;

    const rect = red.getBoundingClientRect();
    const originCenterX = rect.x + rect.width / 2;
    const originCenterY = rect.y + rect.height / 2;

    yellow.onwheel = (event) => {
        event.preventDefault();

        const factor = event.deltaY;

        // If current scale is equal to or greater than MAX_SCALE, but you're still zoom in it, then return;
        // If current scale is equal to or smaller than MIN_SCALE, but you're still zoom out it, then return;
        // Can not use Math.max and Math.min here, think about it.
        if ((scale >= MAX_SCALE && factor < 0) || (scale <= MIN_SCALE && factor > 0)) return;
        
        const scaleChanged = Math.pow(STEP, factor);
        scale *= scaleChanged;

        const rect = red.getBoundingClientRect();
        const currentCenterX = rect.x + rect.width / 2;
        const currentCenterY = rect.y + rect.height / 2;

        const mousePosToCurrentCenterDistanceX = event.clientX - currentCenterX;
        const mousePosToCurrentCenterDistanceY = event.clientY - currentCenterY;

        const newCenterX = currentCenterX + mousePosToCurrentCenterDistanceX * (1 - scaleChanged);
        const newCenterY = currentCenterY + mousePosToCurrentCenterDistanceY * (1 - scaleChanged);

        // All we are doing above is: getting the target center, then calculate the offset from origin center.
        const offsetX = newCenterX - originCenterX;
        const offsetY = newCenterY - originCenterY;

        // !!! Both translate and scale are relative to the original position and scale, not to the current.
        red.style.transform = 'translate(' + offsetX + 'px, ' + offsetY + 'px)' + 'scale(' + scale + ')';
    }
}

.yellow {
  background-color: yellow;
  width: 200px;
  height: 100px;

  margin-left: 50px;
  margin-top: 50px;

  position: absolute;
}

.red {
  background-color: red;
  width: 200px;
  height: 100px;

  position: absolute;
}

<div class="yellow">
    <div id="red" class="red"></div>
</div>

Answer 2

Wow, I can't believe I actually accomplished it!

window.onload = () => {
    const STEP = 0.99;
    const MAX_SCALE = 5;
    const MIN_SCALE = 0.01;

    const red = document.getElementById("red");
    const yellow = red.parentNode;

    let scale = 1;

    const rect = red.getBoundingClientRect();
    const originCenterX = rect.x + rect.width / 2;
    const originCenterY = rect.y + rect.height / 2;

    yellow.onwheel = (event) => {
        event.preventDefault();

        const factor = event.deltaY;

        // If current scale is equal to or greater than MAX_SCALE, but you're still zoom in it, then return;
        // If current scale is equal to or smaller than MIN_SCALE, but you're still zoom out it, then return;
        // Can not use Math.max and Math.min here, think about it.
        if ((scale >= MAX_SCALE && factor < 0) || (scale <= MIN_SCALE && factor > 0)) return;
        
        const scaleChanged = Math.pow(STEP, factor);
        scale *= scaleChanged;

        const rect = red.getBoundingClientRect();
        const currentCenterX = rect.x + rect.width / 2;
        const currentCenterY = rect.y + rect.height / 2;

        const mousePosToCurrentCenterDistanceX = event.clientX - currentCenterX;
        const mousePosToCurrentCenterDistanceY = event.clientY - currentCenterY;

        const newCenterX = currentCenterX + mousePosToCurrentCenterDistanceX * (1 - scaleChanged);
        const newCenterY = currentCenterY + mousePosToCurrentCenterDistanceY * (1 - scaleChanged);

        // All we are doing above is: getting the target center, then calculate the offset from origin center.
        const offsetX = newCenterX - originCenterX;
        const offsetY = newCenterY - originCenterY;

        // !!! Both translate and scale are relative to the original position and scale, not to the current.
        red.style.transform = 'translate(' + offsetX + 'px, ' + offsetY + 'px)' + 'scale(' + scale + ')';
    }
}

.yellow {
  background-color: yellow;
  width: 200px;
  height: 100px;

  margin-left: 50px;
  margin-top: 50px;

  position: absolute;
}

.red {
  background-color: red;
  width: 200px;
  height: 100px;

  position: absolute;
}

<div class="yellow">
    <div id="red" class="red"></div>
</div>

Answer 3

Answer №2

The usage of .onmousewheel has been deprecated, and it is recommended to use .onwheel instead.

Additionally, the onwheel event does not contain the property wheelDelta. It is advised to use deltaY instead.

Answer 4

The usage of .onmousewheel has been deprecated, and it is recommended to use .onwheel instead.

Additionally, the onwheel event does not contain the property wheelDelta. It is advised to use deltaY instead.

Answer 5

Answer №3

My code provided is intended to adjust the viewbox based on a specific zoom point. The current implementation is shifting the rectangle using calculations that are not suitable for this scenario.

The goal is to move the zoom area in relation to the scale change. Instead of altering the position and orientation of a rectangle, the focus should be on simulating the new position of the red rectangle as if the yellow rectangle acted as a viewport. This entails zooming in at a translateX translateY position determined by a particular scale factor. The next step is to translate the zoom point value into the appropriate scene space and then reposition the red rectangle accordingly.

Below is the code with some corrections, although there are missing elements. The main issue lies in the failure to maintain the translateX translateY values. By overwriting these values, the code only preserves the zoom aspect, disrupting the expected translateX translateY behavior when dealing with a relative viewport offset.

In a functional implementation, zooming in on the rectangle should result in the red rectangle filling the entire scene space.

window.onload = function() {
    const STEP = 0.05;
    const MAX_SCALE = 10;
    const MIN_SCALE = 0.01;

    const red = document.getElementById('red');
    const yellow = document.getElementById('yellow');
    const svgArea = document.getElementById('svgArea');

    let viewportTranslateX = 0;
    let viewportTranslateY = 0;
    let viewportScale = 1;

    svgArea.onwheel = function (event) {
        event.preventDefault();
        console.log("mouse coords", event.clientX, event.clientY);
         
        let zoompointX = (event.clientX + (viewportTranslateX / viewportScale)) * viewportScale;
        let zoompointY = (event.clientY + (viewportTranslateY / viewportScale)) * viewportScale;
        console.log("zoom point prezoom", zoompointX, zoompointY);
        
        const factor = event.deltaY / 120;

        const oldScale = viewportScale;
        viewportScale = viewportScale * (1 + STEP * factor);
        viewportScale = Math.max(MIN_SCALE, Math.min(MAX_SCALE, viewportScale));

        const scaleChanged = viewportScale - oldScale;
        const offsetX = -(zoompointX * scaleChanged);
        const offsetY = -(zoompointY * scaleChanged);
        console.log("scale", scaleChanged, offsetX, offsetY);
        viewportTranslateX += offsetX;
        viewportTranslateY += offsetY;

        zoompointX = (event.clientX + (viewportTranslateX / viewportScale)) * viewportScale;
        zoompointY = (event.clientY + (viewportTranslateY / viewportScale)) * viewportScale;
        console.log("zoompoint postzoom", zoompointX, zoompointY);

        var x = viewportTranslateX;
        var y = viewportTranslateY;
        var width = (svgArea.getAttribute("width") * viewportScale);
        var height = (svgArea.getAttribute("height") * viewportScale);

        svgArea.setAttribute("viewBox", x + " " + y + " " + width + " " + height);
        console.log("viewport", x, y, width, height, viewportScale);
    }
}

<svg id="svgArea" width=400 height=200 viewBox="0,0,400,200">
   <rect id="yellow" width=400 height=200 fill="yellow"/>
   <rect id="red" width=100 height=50 fill="red"/>
</svg>

Answer 6

My code provided is intended to adjust the viewbox based on a specific zoom point. The current implementation is shifting the rectangle using calculations that are not suitable for this scenario.

The goal is to move the zoom area in relation to the scale change. Instead of altering the position and orientation of a rectangle, the focus should be on simulating the new position of the red rectangle as if the yellow rectangle acted as a viewport. This entails zooming in at a translateX translateY position determined by a particular scale factor. The next step is to translate the zoom point value into the appropriate scene space and then reposition the red rectangle accordingly.

Below is the code with some corrections, although there are missing elements. The main issue lies in the failure to maintain the translateX translateY values. By overwriting these values, the code only preserves the zoom aspect, disrupting the expected translateX translateY behavior when dealing with a relative viewport offset.

In a functional implementation, zooming in on the rectangle should result in the red rectangle filling the entire scene space.

window.onload = function() {
    const STEP = 0.05;
    const MAX_SCALE = 10;
    const MIN_SCALE = 0.01;

    const red = document.getElementById('red');
    const yellow = document.getElementById('yellow');
    const svgArea = document.getElementById('svgArea');

    let viewportTranslateX = 0;
    let viewportTranslateY = 0;
    let viewportScale = 1;

    svgArea.onwheel = function (event) {
        event.preventDefault();
        console.log("mouse coords", event.clientX, event.clientY);
         
        let zoompointX = (event.clientX + (viewportTranslateX / viewportScale)) * viewportScale;
        let zoompointY = (event.clientY + (viewportTranslateY / viewportScale)) * viewportScale;
        console.log("zoom point prezoom", zoompointX, zoompointY);
        
        const factor = event.deltaY / 120;

        const oldScale = viewportScale;
        viewportScale = viewportScale * (1 + STEP * factor);
        viewportScale = Math.max(MIN_SCALE, Math.min(MAX_SCALE, viewportScale));

        const scaleChanged = viewportScale - oldScale;
        const offsetX = -(zoompointX * scaleChanged);
        const offsetY = -(zoompointY * scaleChanged);
        console.log("scale", scaleChanged, offsetX, offsetY);
        viewportTranslateX += offsetX;
        viewportTranslateY += offsetY;

        zoompointX = (event.clientX + (viewportTranslateX / viewportScale)) * viewportScale;
        zoompointY = (event.clientY + (viewportTranslateY / viewportScale)) * viewportScale;
        console.log("zoompoint postzoom", zoompointX, zoompointY);

        var x = viewportTranslateX;
        var y = viewportTranslateY;
        var width = (svgArea.getAttribute("width") * viewportScale);
        var height = (svgArea.getAttribute("height") * viewportScale);

        svgArea.setAttribute("viewBox", x + " " + y + " " + width + " " + height);
        console.log("viewport", x, y, width, height, viewportScale);
    }
}

<svg id="svgArea" width=400 height=200 viewBox="0,0,400,200">
   <rect id="yellow" width=400 height=200 fill="yellow"/>
   <rect id="red" width=100 height=50 fill="red"/>
</svg>

Tips for using JavaScript to magnify a specific point on a webpage

Answer №1

Answer №2

Answer №3

Similar questions

Can you use both HTML and JSON in ROR?

Steer clear of encountering the "$digest already in progress" issue

Choose all the inputs with the value attribute specified

Surprising outcomes encountered when playing audio with JavaScript

Three.js experiencing issues with FBX animations running erratically

Struggled to Find a Solution for Code Alignment

Trouble with executing asynchronous AJAX request using when() and then() functions

Is sendFile causing an error due to an invalid JSON format?

Tips on how to define an ajax request for the PHP section that is being managed

JavaScript first, middle, and last names

What measures can be taken to block Javascript from retrieving PHP cookie information?

Looking for a regular expression to require either a dollar sign ($) or a percentage symbol (%) but not

Managing the expiration time of a Cookie with ngx-cookie-service: Explained

Utilizing a variable within an Angular filter: A step-by-step guide

The Vue component mistakenly saves the image to the incorrect location when the file @change event is triggered

The @input function in Vue.js is currently only triggered after the user has focused out, but I need it to be called while the user is

Developing a Node.js system for mapping ids to sockets and back again

Creating a dynamic form that efficiently captures user information and automatically redirects to the appropriate web page

Compilation failure resulting from core UI build in React js

What is the process for capturing a window screenshot using Node.js?