last day (15 days later) » 

9:03 PM
1
Q: How can you scale to arbitrary center points using ScaleTransform?

JeffIf you try the following XAML code, you'll notice some strange behavior. <Canvas Width="300" Height="300"> <Rectangle Canvas.Left="50" Canvas.Top="50" Width="100" Height="100" Stroke="Blue" StrokeThickness="1"/> <Canvas.RenderTransform> <ScaleTransform CenterX="50" CenterY="50" ...

 
+1 for a great question. By the way, your rectangle is missing its close tag, so this won't compile as is.
 
Thank you! Fixed.
 
I"m not sure I understand the update. Where is the inner rectangle in that picture and why do you expect it's upper left corner to be in the center of the bigger box?
 
Ah, sorry yes it's confusing. The inner rect is not the rect from the XAML. The inner rect is the scaled area around the center point. Think of it in terms of "rubber band" scaling wherein you select a region and (ignoring aspect ratio for now) want that region to inflate to fill the viewport. This is also exactly what I'm trying to achieve although there are a number of reasons I'd like to it this way vs with scrolling, separate transforms, etc.
 
My question is, given the diagram you posted (which looks right to me), why would you expect a point in the inner (non-zoomed) rectangle, selected as the "center" to zoom from, would be at the center of the zoomed area?
 
9:03 PM
Well if you think of the left edge of the inner rectangle as having to move (the translate part) to match the left edge of the outer rectangle and then filling the viewport (the scale part) then I would expect the center point of the inner rect would now be the center point of the outer rect. FWIW it actually comes quite close, but is off by some mystery amount. BTW, I really appreciate you talking this through with me!
Good call
BTW there are a number of developers here pulling out their hair on this one :)
 
I totally agree, and I believe that no matter what, the canvas's center point stays in the center of the scaled region (at least I think I'm sure :) )
 
It doesn't stay if the CenterX and CenterY values are set (also that's only true if RenderTransformOrigin is 0.5,0.5)
and by "set" I mean non-zero
You can test that with the XAML I posted
Ah, well I guess it depends what you mean by "scaled region"
Since the whole canvas is scaling
 
Yes, it would
The scaled region is the canvas, and the center of the canvas is (from what I can tell) staying in the center of the canvas
Are you seeing something different?
 
No, that's correct
sorry I misunderstood
 
No problem
 
9:07 PM
However, the outer box in my diagram isn't the canvas
it's the "viewport"
which can be imaginary but it is what defines CenterX and CenterY
I probably should have included a more useful XAML snippet
If you paste that XAML snip into a window you can pretend the window is the viewport
and you'll note that CenterX, CenterY is not centered in the window after scaling
You're right of course, the center of the canvas will always be the center of the canvas
 
I wouldn't expect it to
 
Well it's tough to argue with you since it's not :)
But why not?
 
true
 
Based on the math in the ScaleTransform it seems like it should be. But clearly I'm missing something.
 
Like I said, I don't remember enough of that math to be sure from that front
Though it is just adjusting the coordinate system to perform the scale
Not doing a "true" translation
from what I can tell
After setting the canvas fill to black, I feel that I can confirm, however, that moving the center does just seem to shift the canvas around
If it is affect the zoom itself, I can't tell, but I will try a few more values
 
9:23 PM
Yeah, I think it is translating it...just not sure how
 
Ok, I think I have something
Going back to "center just sets the center of the translation"
No matter what scale I put in, with that center, the upper left corner NEVER moves
So because it is the center of the transformation
it stays put, while eveything else scales around it
Thus, it should never be in the middle of the screen.
Since it didn't start there
(Verified with a piece of paper and my finger :) )
 
Not sure what you mean by the corner never moves...it seems to move on mine
If you change CenterX and CenterY it doesn't move?
 
It moves if I change CenterX and Y of course
 
If CenterX = CenterY= 0, I agree it never moves
which makes sense
Right, but I want to be able to say "zoom in on 324,566" (for example)
 
I'm saying that the code you posted, where you set the center equal to the position of the corner, it never moves.
 
9:32 PM
Ah, yes good point
Still, the fact remains that it is translating it
So it seems like you should be able to specify CenterX and CenterY such that the result is what I'm looking for
 
I agree
 
That's what I don't understand, how much is it being translated by
 
I see
That is a very good question :)
So the desired output is the "blue box" centered on the screen, given the postion of the upper-left corner, correct?
BTW, no problem at all talking this through. It is a very interesting question and I'm learning some stuff here as well.
 
The XAML was meant as a very simple example, but yes that would be a good start
I think if you artificially center the blue box through trial and error you'll find that you have weird values for CenterX and CenterY
 
9:49 PM
Yeah, I'll bet
and obviously you want a generic solution
 
right :)
Although some people here are lobbying for adding a mysterious universal constant :)
 
You definitely picked a good problem ;)
I always find that said mysterious universal constants are (a) never precise enough and (b) change when you change the size of the window or something else equally unassuming.
Will it always be a single control/container that you are zooming, or are you trying to just zoom a generic rectangle?
as in area on the screen not the rectangle control
 
so you can pick a region and zoom in on it
It's actually a rubber band type control
Hey man I'm out of here. Thanks so much for your help! I'll try to get back to it tomorrow.
 
Alright, I'll post if I think of anything.
 

last day (15 days later) »