Grab-to-pan in Silverlight app -
I have canvas inside a scrollViewer. I want the user to be able to capture and move the canvas, scrollbars But with a thumbs up properly on updating
My initial implementation calculates the offset on each mouse move, and updates the scrollbar:
// calculate new drag distance newOffsetPos = e.GetPosition (MapCanvas); System.Diagnostics.Debug.WriteLine ("New Offset Grade:" + newOffsetPos.X + "" + newOffsetPos.Y); Double delta x = newoffset.pos.x - _offset.position.x; Double Delta Y = newOffsetPos.Y - _offsetPosition.Y; System.Diagnostics.Debug.WriteLine ("Delta X / Y:" + DeltaX + "" + Delta) "; System.Diagnostics.Debug.WriteLine ("SV offset X / Y:" + _scrollViewer.HorizontalOffset + "" + _scrollViewer.VerticalOffset); _scrollViewer.ScrollToHorizontalOffset (_scrollViewer.HorizontalOffset - Deltax); _scrollViewer.ScrollToVerticalOffset (_scrollViewer.VerticalOffset - Delta); _offsetPosition = newOffsetPos;
Although it works, it is not very smooth.
Is there a better way to do this? If transforms are used, will the scrollbar automatically update when moving the canvas?
Thanks for any suggestions ...
In fact this type of problem is actually mouse It is a matter of using the right pattern to track, I have not only seen this issue in Silverlight but in various cases.
The best pattern is to trap the original positions of both the mouse and the subject, then recalculate the original values fixed from the new original offset. In this way the mouse is placed solid on one point on the image being painted. Here is my simple report: -
Start with a new Silverlight application in Visual Studio. Modify the manpage.xml like this: -
& lt; UserControl x: Class = "Silverlight Application 1. Menopause" xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns: x = "http://schemas.microsoft.com/winfx/ 2006 / xaml "& gt; & Lt; Grid X: Name = "Layouts" background = "White" & gt; & Lt; ScrollViewer x: name = "Scroller" horizontal ScrollBarVisibility = "Auto" & gt; & Lt; Image x: name = "map" source = "test.jpg" width = "1600" height = "1200" /> & Lt; / ScrollViewer & gt; & Lt; / Grid & gt; & Lt; / UserControl & gt;
Add the following code to the MainPage.xaml.cs file: -
Public Menpage () {InitializeComponent (); Map.MouseLeftButtonDown + = New MouseButtonEventHandler (Map_MouseLeftButtonDown); } Zero Map_MouseLeftButtonDown (Object Sender, MouseButtonEventArgs e) {point mapOrigin = new point (Scroller.HorizontalOffset, Scroller.VerticalOffset); Point MouseOugin = E. Gapeption (application.quarter.rootvisual); MouseEventHandler moveHandler = null; MouseBootenEventHandlerUpHandler = Faucet; MoveHandler = (s, args) => {Point mousein = arg. Getposition (application.quarter.runVisual); Scroller.ScrollToHorizontalOffset (mapOrigin.X - (MouseNew.X - mouseOrigin.X)); Scroller.ScrollToVerticalOffset (mapOrigin.Y - (Mouse Newew Y - mouseOrigin.Y)); }; UpHandler = (s, args) => {Scroller.MouseMove - = Moving Handler; Scroller.MouseLeftButtonUp - = upHandler; }; Scroller.MouseMove + = HillHandler; Scroller.MouseLeftButtonUp + = upHandler; }}
Take this a big test. JPG (it does not have to scale to 1600x1200 image
scale).
Please note that as long as the mouse is dragged, the image does not remain at a fixed point until you add a boundary. Keep the mouse as fast as you want, because it does not depend on the exact and up-to-date deltas, only the variable is the current mouse's position, the other values remain constant because they were on the mouse.
Comments
Post a Comment