silverlight 模仿淘宝预览图片

1.先贴个效果图,看看哦。

2. 分为两个silverlight,左侧是小图(HoverImageSmall.xap),右侧为大图(HoverImageLarge.xap),web项目承载两个silverlight,并负责两个sl之间的通讯。

3.小图(HoverImageSmall.xap)部分,源码如下

代码
//这个声明要加的,否则JS调用不到
[ScriptableType]
public partial class MainPage : UserControl
{
//遮罩块的宽、高
double thumbWidth, thumbHeight;
//是否需要局部放大显示
bool IsHoverView = true;

//这个构造可以从html传参数进来
public MainPage(IDictionary<string, string> InitParams)
{
InitializeComponent();

//从html接收的参数 这样子获取
var parm1 = InitParams["parm1"].ToString();

canMove.MouseMove
+= new MouseEventHandler(ImgThumb_MouseMove);
canMove.MouseEnter
+= new MouseEventHandler(ImgThumb_MouseEnter);
canMove.MouseLeave
+= new MouseEventHandler(ImgThumb_MouseLeave);

ImgOriginal.ImageOpened
+= new System.EventHandler<RoutedEventArgs>(ImgOriginal_ImageOpened);
ImgThumb.ImageOpened
+= new System.EventHandler<RoutedEventArgs>(ImgThumb_ImageOpened);

//注册js调用的宿主名称
HtmlPage.RegisterScriptableObject("HoverImageSmall", this);
}

#region image event
//小图载入后,计算遮罩块的尺寸,最小20*20
void ImgThumb_ImageOpened(object sender, RoutedEventArgs e)
{
thumbWidth
= ImgThumb.ActualWidth;
thumbHeight
= ImgThumb.ActualHeight;

recMove.Width
= 400 / (ImgOriginal.ActualWidth / ImgThumb.ActualWidth);
if (recMove.Width > ImgThumb.ActualWidth)
recMove.Width
= ImgThumb.ActualWidth;

recMove.Height
= 400 / (ImgOriginal.ActualHeight / ImgThumb.ActualHeight);
if (recMove.Height > ImgThumb.ActualHeight)
recMove.Height
= ImgThumb.ActualHeight;

if (recMove.Width < 20)
recMove.Width
= 20;

if (recMove.Height < 20)
recMove.Height
= 20;
}

//判断当前图是否小于大图尺寸,如果小于,不需要此功能
void ImgOriginal_ImageOpened(object sender, RoutedEventArgs e)
{
if (ImgOriginal.ActualWidth < 400 && ImgOriginal.ActualHeight < 400)
{
recMove.Visibility
= System.Windows.Visibility.Collapsed;
IsHoverView
= false;
}
}

//鼠标离开小图
void ImgThumb_MouseLeave(object sender, MouseEventArgs e)
{
this.Cursor = Cursors.Arrow;
hoverPosition
= "Visibility:0";
if (HoverChanged != null)
HoverChanged(
this, null);
}

//鼠标进入小图区域
void ImgThumb_MouseEnter(object sender, MouseEventArgs e)
{
this.Cursor = Cursors.Hand;
hoverPosition
= "Visibility:1";
if (HoverChanged != null)
HoverChanged(
this, null);
}

//查看指定区域
void ImgThumb_MouseMove(object sender, MouseEventArgs e)
{
if (!IsHoverView)
{
hoverPosition
= "NoHover:";
if (HoverChanged != null)
HoverChanged(
this, null);
return;
}
Point p
= e.GetPosition(ImgThumb);
double moveLeft = p.X - recMove.Width / 2;
double moveTop = p.Y - recMove.Height / 2;
if (moveLeft < 0) moveLeft = 0;
if (moveTop < 0) moveTop = 0;

if (moveLeft > thumbWidth - recMove.Width)
moveLeft
= thumbWidth - recMove.Width;
if (moveTop > thumbHeight - recMove.Height) moveTop = thumbHeight - recMove.Height;

Canvas.SetLeft(recMove, moveLeft);
Canvas.SetTop(recMove, moveTop);

double newLeft = moveLeft * ImgOriginal.ActualWidth / thumbWidth;
double newTop = moveTop * ImgOriginal.ActualHeight / thumbHeight;

hoverPosition
= "Position:" + newLeft + "," + newTop;
if (HoverChanged != null)
HoverChanged(
this, null);
}


#endregion

#region 更换图片
private void button1_Click(object sender, RoutedEventArgs e)
{
OpenFileDialog ofg
= new OpenFileDialog();
ofg.Multiselect
= false;
ofg.Filter
= "All files (*.*)|*.*|PNG Images (*.png)|*.png";

if (ofg.ShowDialog() == true)
AddFile(ofg.File.OpenRead(), ofg.File.Name);
}

void AddFile(FileStream fs, string fileName)
{
byte[] bytes = new byte[fs.Length];
fs.Read(bytes,
0, bytes.Length);

imgBase64
= Convert.ToBase64String(bytes);

string imgFormat = "<img id=\"testImg\" style=\"width:500px; height:400px;\" src=\"data:image/png;base64,{0}\"; />";
imgHtml
= string.Format(imgFormat, imgBase64);

BitmapImage bitImg
= new BitmapImage();
bitImg.SetSource(fs);

ImgThumb.Source
= bitImg;
ImgOriginal.Source
= bitImg;

#region xx
if (bitImg.PixelWidth < 400 && bitImg.PixelHeight < 400)
{
recMove.Visibility
= System.Windows.Visibility.Collapsed;
IsHoverView
= false;
}
else
{
IsHoverView
= true;
recMove.Visibility
= System.Windows.Visibility.Visible;
}

if (bitImg.PixelWidth <= 160 && bitImg.PixelHeight <= 160)
{
thumbWidth
= bitImg.PixelWidth;
thumbHeight
= bitImg.PixelHeight;
}
else if (bitImg.PixelWidth < 160)
{
thumbHeight
= 160;
thumbWidth
= 160 * bitImg.PixelWidth / bitImg.PixelHeight;
}
else if (bitImg.PixelHeight < 160)
{
thumbWidth
= 160;
thumbHeight
= 160 * bitImg.PixelHeight / bitImg.PixelWidth;
}
else
{
if (bitImg.PixelWidth > bitImg.PixelHeight)
{
thumbWidth
= 160;
thumbHeight
= 160 * bitImg.PixelHeight / bitImg.PixelWidth;
}
else
{
thumbHeight
= 160;
thumbWidth
= 160 * bitImg.PixelWidth / bitImg.PixelHeight;
}
}

recMove.Width
= 400 / (bitImg.PixelWidth / thumbWidth);
if (recMove.Width > thumbWidth)
recMove.Width
= thumbWidth;

recMove.Height
= 400 / (bitImg.PixelHeight / thumbHeight);
if (recMove.Height > thumbHeight)
recMove.Height
= thumbHeight;

if (recMove.Width < 20)
recMove.Width
= 20;

if (recMove.Height < 20)
recMove.Height
= 20;
#endregion

if (FileSelected != null)
FileSelected(
this, null);
}
#endregion

#region ScriptableMemberAttribute
[ScriptableMemberAttribute]
public string imgBase64 { get; set; }

[ScriptableMemberAttribute]
public string imgHtml { get; set; }

[ScriptableMemberAttribute]
public string hoverPosition { get; set; }

[ScriptableMemberAttribute]
public string imgViewVisible { get; set; }
#endregion

#region ScriptableEvent
[ScriptableMember()]
public event EventHandler FileSelected;

[ScriptableMember()]
public event EventHandler MoveOnImage;

[ScriptableMember()]
public event EventHandler ViewVisibilityChanged;

[ScriptableMember()]
public event EventHandler HoverChanged;
#endregion

#region Scriptable members to control functions via javascript

[ScriptableMember]
public void EnableDrop()
{
//button1 image1.AllowDrop = true;
}

[ScriptableMember()]
public event EventHandler MaximumFileSizeReached;

#endregion
}

4. 大图 (HoverImageLarge.xap),这个部分比较简单。

代码
public partial class MainPage : UserControl
{
double newLeft, newTop;

public MainPage()
{
InitializeComponent();
HtmlPage.RegisterScriptableObject(
"HoverImageLarge", this);
}

void messageReceiver_MessageReceived(object sender, MessageReceivedEventArgs e)
{
string msg;
if (e.Message.StartsWith("Position:"))
{
msg
= e.Message.Replace("Position:", "");
string[] arr = msg.Split(new string[] { "," }, StringSplitOptions.RemoveEmptyEntries);
newLeft
= double.Parse(arr[0]);
newTop
= double.Parse(arr[1]);
Canvas.SetLeft(img2,
-newLeft);
Canvas.SetTop(img2,
-newTop);
}

if (e.Message.StartsWith("NoHover:"))
{
Canvas.SetLeft(img2,
0);
Canvas.SetTop(img2,
0);
}

if (e.Message.StartsWith("Visibility:"))
{
msg
= e.Message.Replace("Visibility:", "");
if (Int32.Parse(msg) == 1)
{
img2.Visibility
= System.Windows.Visibility.Visible;
}
else
{
img2.Visibility
= System.Windows.Visibility.Collapsed;
}
}

}

#region script method
[ScriptableMember()]
public void SetImage(string imageBase64)
{
if (imageBase64 == null) return;
MemoryStream pFileStream
= new MemoryStream();
byte[] imgByte = Convert.FromBase64String(imageBase64);
pFileStream.Write(imgByte,
0, imgByte.Length);
BitmapImage bitmap
= new BitmapImage();
bitmap.SetSource(pFileStream);
img2.Source
= bitmap;
}

[ScriptableMember()]
public void SetPosition(string msg)
{
if (msg == null) return;
if (msg.StartsWith("Position:"))
{
msg
= msg.Replace("Position:", "");
string[] arr = msg.Split(new string[] { "," }, StringSplitOptions.RemoveEmptyEntries);
newLeft
= double.Parse(arr[0]);
newTop
= double.Parse(arr[1]);
Canvas.SetLeft(img2,
-newLeft);
Canvas.SetTop(img2,
-newTop);
}

if (msg.StartsWith("NoHover:"))
{
Canvas.SetLeft(img2,
0);
Canvas.SetTop(img2,
0);
}

if (msg.StartsWith("Visibility:"))
{
msg
= msg.Replace("Visibility:", "");
if (Int32.Parse(msg) == 1)
{
img2.Visibility
= System.Windows.Visibility.Visible;
}
else
{
img2.Visibility
= System.Windows.Visibility.Collapsed;
}
}
}

#endregion
}

5.由于最近比较忙,没空详细写,呵呵。源代码在这里,各位看官那自己下载分析吧。

源码下载selectFile仿淘宝预览图片.rar

posted @ 2010-12-09 14:13  xiaokang088  阅读(760)  评论(0编辑  收藏  举报