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.
(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
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…
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.