Scale and calculate new mouse Point

Question

I have to create a zoom feature in my application. Zooming listens really easy but I have really big trouble with it.

Okay, I have my page (orange) and on this page is a div (blue). In this div is an SVG with a group (gray). This group has an offset with a transform matrix. e.g.

<g transform="matrix(1,0,0,1,-188,-101)"><!-- [...] --></g>

You can drag and drop elements and you can also move the group. Now, i want to add a zoom feature. I realize this by change the matrix. e.g. matrix(2,0,0,2,-188,-101) is to double the scale.

If I only scale the group, my current elements are out of my viewpoint. I have to change the offset to get them back to the viewpoint.

My first idea was to multiply the offset with 2. But this cannot work. So, I thought a bit about this topic. My next idea was to get the mouse Point and the distance to the middle point of the group. And then scale this distance by my scaling factor. But this also doesn't work. I have no ideas anymore how I can solve this issue. I can also get all heights and width of all elements.

tech-e tech-e · Accepted Answer · 2017-10-14T00:01:51

here is how to get the scale ratio:

var width = shape.width; 
var currentScaledWidth = width * oldScale; 
var scaledWidth = currentScaledWidth + (width * scale); 
var scale = (scaledWidth) / width;

then you should be able to use that to get the position

var x = mouseX * scale; 
var y = mouseY * scale;

Then you can scroll the container

var halfX = (parentElement.style.width / 2),
    halfY = (parentElement.style.height / 2); 

var centerX = (halfX > x)? 
    (x - (x - halfX)) 
:
    (x + (halfX - x));

var centerY = (halfY > y)? 
    (y - (y - halfY)) 
:
    (y + (halfY - y));

parentElement.scrollTo(centerX, centerY);

Scale and calculate new mouse Point

1 Answers