Silverlight开发实践--PicZoomShow（源）

老师最近让做个小研究，其中有一部分是实现图片的缩放功能，由于要在Web中实现，silverlight在图形图像处理方面有很强的支持功能，索性就研究了一下，弄了个小Demo，分享给大家。还有些疑问向高手请教，先看下效果：

设计界面很简单：

Code
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--><UserControlx:Class="PicShowZoom.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="1000"Height="600">
<Gridx:Name="LayoutRoot"Background="White">
<Grid.RowDefinitions>
<RowDefinitionHeight="50"></RowDefinition>
<RowDefinitionHeight="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinitionWidth="*"/>
</Grid.ColumnDefinitions>

<Canvasx:Name="Show"Background="Black"Width="900"Height="500"Grid.Row="1"Grid.Column="0">
<ScrollViewerHeight="430"Width="880"Canvas.Left="8"Canvas.Top="20"x:Name="img_Scroll"HorizontalScrollBarVisibility="Hidden"VerticalScrollBarVisibility="Hidden"TabNavigation="Local">
<ImageStretch="Uniform"MouseLeftButtonDown="img_c_MouseLeftButtonDown"MouseLeftButtonUp="img_c_MouseLeftButtonUp"RenderTransformOrigin="0.5,0.5"x:Name="img_c"Source="78_104606.jpg"Cursor="Hand"Loaded="img_c_Loaded">
<Image.RenderTransform>
<TransformGroup>
<ScaleTransformx:Name="img_scale"ScaleX="1"ScaleY="1"/>
<SkewTransform/>
<RotateTransformAngle="0"/>
<TranslateTransformX="0"x:Name="img_translate"/>
</TransformGroup>
</Image.RenderTransform>
</Image>
</ScrollViewer>
</Canvas>
<Sliderx:Name="ChangeShow"Height="20"Width="500"Grid.Row="0"Grid.Column="0"ValueChanged="ChangeShow_ValueChanged"Maximum="1000"Minimum="0"></Slider>
</Grid>
</UserControl>

后台代码：

Code
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->publicpartialclassPage:UserControl
{
MouseEventHandlermeh;//声明一个事件委托
PointMouseDownAt;//二维空间内的X，Y的坐标对
doubleimg_actualWidth=0;//图片宽度
doubleimg_actualHeight=0;//图片高度

publicPage()
{
meh=newMouseEventHandler(img_c_MouseMove);
InitializeComponent();
}

privatevoidChangeShow_ValueChanged(objectsender,RoutedPropertyChangedEventArgs<double>e)//根据Soilder的值改变图片的大小
{
if(img_scale!=null)
{
stringt=e.NewValue.ToString();//获取Soilder的值，并根据值算出放大或缩小图片的大小
img_c.Width=(ChangeShow.Value/500)*img_actualWidth;
img_c.Height=(ChangeShow.Value/500)*img_actualHeight;

stringLeftT="";
stringRightT="";
intindex=t.IndexOf('.');

if(index!=-1)//根据图片的大小计算出图片所在的位置
{
LeftT=t.Substring(0,index);
RightT=t.Substring(index+1,t.Length-index-1);
if(RightT.Length>1)
{
RightT=RightT.Substring(0,1);
}
}
else
{
LeftT=t;
RightT="0";
}
}
}
///<summary>
///通过编写鼠标按下，抬起，移动事件实现图片的拖动。
///</summary>
privatevoidimg_c_MouseLeftButtonDown(objectsender,MouseButtonEventArgse)
{
img_c.MouseMove+=meh;
MouseDownAt=e.GetPosition(null);//获取鼠标当前坐标的位置
img_c.CaptureMouse();//在此元素上强制捕获鼠标。如果成功捕获了鼠标，则为true；否则为false。这句话可以没有，但是建议加上。
}

privatevoidimg_c_MouseLeftButtonUp(objectsender,MouseButtonEventArgse)
{
img_c.MouseMove-=meh;
img_c.ReleaseMouseCapture();//移出对鼠标的捕获
}

voidimg_c_MouseMove(objectsender,MouseEventArgse)
{
Pointp=e.GetPosition(null);
img_Scroll.ScrollToVerticalOffset(img_Scroll.VerticalOffset-((p.Y-MouseDownAt.Y)*1.2));//将ScrollViewer内的内容滚动到指定的垂直偏移量位置。
img_Scroll.ScrollToHorizontalOffset(img_Scroll.HorizontalOffset-((p.X-MouseDownAt.X)*1.2));//将ScrollViewer内的内容滚动到指定的水平偏移量位置。
MouseDownAt=p;
}
///<summary>
///初始化变量
///</summary>
privatevoidimg_c_Loaded(objectsender,RoutedEventArgse)
{
Stretchs=img_c.Stretch;
img_c.Stretch=Stretch.None;
img_actualHeight=img_c.ActualHeight;
img_actualWidth=img_c.ActualWidth;
img_c.Stretch=s;

ChangeShow.Value=500;
}
}

代码中我作了解释，不是很难。毕竟这个实现的算法比较简单。大致的效果就是这样，小弟还有些问题请教高手，希望大虾们多多指导。

（1）如果图片的大小超过了显示区域，或者图片的大小已经超过了实际的大小，那么没有显示的部分显示在了哪里？是放在内存中吗？如果无限的增大图片，会不会导致IE的瘫掉？Silverlight内部对图像作了什么处理吗？

（2）现在的增大图片，只是将图片拉伸，求一个更好的算法，实现矢量图形最大。（如何实现矢量图形的放大，如何用SL制作矢量图）。

源码：/Files/gaoweipeng/PicShowZoom.rar

Silverlight开发实践系列（提供源码）