Image goes out of boundry while dragging

06-29-2009 4:23 AM |

Hi,

I am developing an application where I need to drag and zoom an image. Zooming is acheived using slider control and following is the code for that,

 <ScrollViewer x:Name="scrlViewer" HorizontalScrollBarVisibility="Hidden" Margin="0,0,0,0" VerticalScrollBarVisibility="Hidden" BorderThickness="3,3,3,3" BorderBrush="{x:Null}" >
        	<Canvas x:Name="cvsImage">
                <Canvas.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform x:Name="CanvasScaleTransform" ScaleX="1" ScaleY="1"/>
                        <TranslateTransform x:Name="CanvastranslateTransform"/>
                    </TransformGroup>
                </Canvas.RenderTransform>
                <Canvas x:Name="cvsIn">
        	<Image Canvas.Top="0" Source="quince-blooms-with-bee-JJwe.jpg" Stretch="UniformToFill" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Height="390" Width="929" RenderTransformOrigin="0.5,0.5"/>
                </Canvas>
        	</Canvas>
        </ScrollViewer>    

 and C# is

 private void sliderZoom_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
        {
            st.ScaleX = sliderZoom.Value;
            st.ScaleY = sliderZoom.Value;

            cvsIn.RenderTransform = st;
            cvsIn.Height = cvsImage.ActualHeight * sliderZoom.Value;
            cvsIn.Width = cvsImage.ActualWidth * sliderZoom.Value;
         }

for dragging the image,

  
 void cvsImage_MouseMove(object sender, MouseEventArgs e)
        {
            if (IsMouseCapture)
            {
                Pan(e.GetPosition(scrlViewer));
            }
        }
        private void Pan(Point point)
        {
            CanvastranslateTransform.X = point.X - ClickPosition.X * CanvasScaleTransform.ScaleX;
            CanvastranslateTransform.Y = point.Y - ClickPosition.Y * CanvasScaleTransform.ScaleY;

         } 
 
My problem is when ever I drag this image it completly goes out of the screen. So i need to check a condition before moving the canvas.
 
I don't know how to check that.
 
Please help me
 

Re: Image goes out of boundry while dragging

06-29-2009 11:54 AM |

Does it make sense to do something like the following:

Double X = point.X - ClickPosition.X * CanvasScaleTransform.ScaleX;
Double Y = point.Y - ClickPosition.Y * CanvasScaleTransform.ScaleY;

If ( X < something  && Y < something )
{
   CanvastranslateTransform.X = X;
   CanvastranslateTransform.Y = Y
}

Re: Image goes out of boundry while dragging

06-30-2009 12:54 AM |

Yes I tried this too. But on what basis should I need to compare the X and Y value.

Re: Image goes out of boundry while dragging

06-30-2009 5:37 AM |

Get the position of your image in the canvas that vsets the X and Y

Re: Image goes out of boundry while dragging

07-01-2009 11:42 AM |

Sorry, I've been away a while.

As I understand your problem you might be able to use the following: