Pinch zooming to the pointer on an infinite canvas. We're having to offset the camera as we change the zoom, and that offset amount was... not intuitive.
With this kind of thing, it's useful to think in terms of separate "screen space" and "document space" coordinates. These are usually very different: a pointer at x=100 y=100 on the screen could be anywhere in the document, depending on how the document is scrolled or zoomed.
The goal here is to *preserve* that document coordinate as the user zooms in or out. So as we zoom, we need to scoot the document over so that the user's pointer is still pointing at the same place in the document.
Here's a maybe cleaner look at what we're doing. To solve for the camera's next offsets, we need to know the camera's point, the pointer's point, the previous zoom and the difference (or delta) between the next zoom and the previous zoom. Image
(If we weren't clamping the zoom, then we could just use the incoming `change` parameter. But since we are clamping, the actual delta might be reduced if we've had to clamp the result)

• • •

Missing some Tweet in this thread? You can try to force a refresh
 

Keep Current with Steve Ruiz

Steve Ruiz Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @steveruizok

24 Jul
It's Friday! Let's get wild 🙆‍♂️ and learn about finding intersections between line segments and boxes with rounded corners.
This is a lot like finding the points where a line segment intersects a rectangle—it's just that the rectangle has rounded corners, or a "corner radius".
Let's start with a regular rectangle. To find its intersections, we test each of its sides—or "segments"—separately. There are lots of ways to do that. Here's one: gist.github.com/steveruizok/9f…
Read 10 tweets
14 Jul
New approach on my arrows problem. More math, less logic. These are the kinds of arrows I wanted from the start!
So here's how it works. Start by drawing an edge between the two centers. We need this line to have a minimum width—this minimum is: double the length of the shortest side among the two rectangles. We also want a second edge, rotated 90 degrees.
If the distance between centers is below the minimum, add the amount of that overlap to the cross edge. Basically, we want the cross edge to grow as the two rectangles get too close. Here's a better look at it.
Read 11 tweets

Did Thread Reader help you today?

Support us! We are indie developers!


This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Too expensive? Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal Become our Patreon

Thank you for your support!

Follow Us on Twitter!