Reposition rectangle after zooming

I have a rectangle defined by R1:x1,y1-x2,y2 and after applying zoom, I get the rectangle R2:X1,Y1-X2,Y2.

+--------------+---+
|              |   |
|     R1       |   |
|              |   |
+--------------+   |
|              R2  |
+------------------+

As you can see, R2 is expanded based on R1's origin. Not my desired effect.

What I want to accomplish is to re-calculate the origin based on where was the mouse pointer when the zooming operation was performed.

For example:

   +-----------------------+ 
   | +-----------------+   |
   | |  o              |   |
   | |       R1        |   |
   | |                 |   |
   | +-----------------+   |
   |            R2         |
   +-----------------------+

Here, the mouse pointer was set on point "o", then zoomed, resulting on a rectangle R2. Please note R2 is not centered on R1, but a little displaced to the right and bottom.

How can I re-position the origin after zooming?.

Answers


This isn't a programming specific question, but a math problem.

If the mouse is in the center of the screen, each side expands equally. If the mouse is all the way to one side, the rectangle expands only in that direction. So you need to determine the size increase from a ratio.

So, we need to setup a few variables here: width_delta, height_delta, mouse_x_relative, mouse_y_relative, rect_width, rect_height.

  • Width delta is the new width minus the old width.
  • Height delta is the new height minus the old height.
  • Mouse x relative is the x-coordinate relative to the rect's left side
  • Mouse y relative is the y-coordinate relative to the rect's top side

With each delta, when the mouse is perfectly centered, we can calculate the change in the rectangles sides with delta - delta / 2, and delta / 2. This results in half of the delta going to the one side, the other half to the other. So instead of dividing by 2, we need to find out how this relates to the mouse position and the size of the rect.

Easy enough: rect_width / mouse_x_relative. Let's say a rect is width 10, mouse is in the center at 5, 10 / 5 is 2, causing the delta to be distributed equally to both sides of the rect. So we need to divide the delta by rect_width / mouse_x_relative.

left_delta = width_delta / rect_width / mouse_x_relative
right_delta = width_delta - left_delta 

But we can clean that up to be:

left_delta = width_delta * mouse_x_relative / rect_width
right_delta = width_delta - left_delta 

I believe that should work with your expected behavior, unlike my last answer. When you zoom in (shrink) the rect closes in on the mouse (centering), when you zoom out it moves away from the mouse (un-centering, if you will), the inverse of the way it moved in.


Need Your Help

How to run Kafka as a stream for Apache Spark using Scala 2.11?

scala apache-spark apache-kafka

I haven't been able to find any any build of Spark Streaming integration for Kafka for Scala 2.11. There is a one available here

Complete list of special Java comment tags

java comments

I just found out I can write "{@value}" in the comment of a public static final field to insert the actual field value into the comment. Example:

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.