silverlight
发布时间:2022-05-04 发布网站:大佬教程 code.js-code.com
大佬教程收集整理的这篇文章主要介绍了Silverlight图片元素――创建DeepZoom应用程序,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
概述
Silverlight 图片元素――创建 DeepZoom 应用程序
在上一篇博文中,我们介绍了 Deep Zoom Composer 的使用方法,下面我们就来自己做一个简单的图片缩放项目吧 ! 首先我们来看一下我们所要实现的效果: 现在我们就用到了我们用 Deep Zoom Composer 工具生成的项目文件了。我们把生成的文件复制到 VS2010 的 Silverlight 项目目录中。如果
Silverlight
图片元素――创建
DeepZoom
应用程序
在上一篇博文中,我们介绍了
Deep Zoom Composer
的使用方法,下面我们就来自己做一个简单的图片缩放项目吧
!
现在我们就用到了我们用
Deep Zoom Composer
工具生成的项目文件了。我们把生成的文件复制到
VS2010
的
Silverlight
项目目录中。如果我们使用的是动态生成测试页面,则需要将其复制到
\Bin\Debug
目录中;如果使用的是测试站点,则需要复制到
\ClientBin
中。由于
Deep Zoom
金字塔是以外部资源的形式存在,所以我们不需要添加到项目中。
<Canvas x:Name="LayoutRoot" BACkground="White">
<MultiScaleIR_712_11845@age x:Name="msi" Width="500" Height="400"
source="GeneratedImages/dzc_output.xml"
@H_526_20@mouseMove="msi_MouseMove"
@H_526_20@mouSELEftButtonDown="msi_MouSELEftButtonDown"
@H_526_20@mouSELEftButtonUp="msi_MouSELEftButtonUp"
<Button Content="
恢复
" Width="75" Canvas.Left="264" Canvas.Top="378" x:Name="BtnResume" Click="BtnResume_lick"/>
<Button Content="
放大
" Width="75" Canvas.Left="0" Canvas.Top="378" x:Name="BtnBig" Click="BtnBig_lick"/>
<Button Content="
缩小
" Width="75" Canvas.Left="125" Canvas.Top="378" x:Name="Btnsmail" Click="Btnsmail_lick"/>
public partial class MainPage : UserControl
Point lastMouse = new Point();
bool mouseButtonPress = false;
bool mouseIsDragging = false;
public void Zoom(double zoom,Point pointToZoom)
Point logicalPoint = this.msi.ElementToLogicalPoint(pointToZoom);
this.msi.ZoomAboutLogicalPoint(zoom,logicalPoint.X,logicalPoint.Y);
private void msi_MouseMove(object sender,MouseEventArgs E)
@H_526_20@mouseIsDragging = true;
newOrigin.X = currentPosition.X - (((e.GetPosition(msi).X - dragOffSet.X) / msi.ActualWidth) * msi.ViewportWidth);
newOrigin.Y = currentPosition.Y - (((e.GetPosition(msi).Y - dragOffSet.Y) / msi.ActualHeight) * msi.ActualHeight);
@H_526_20@msi.ViewportOrigin = newOrigin;
private void msi_MouSELEftButtonDown(object sender,MouseButtonEventArgs E)
@H_526_20@mouseButtonPress = true;
@H_526_20@mouseIsDragging = false;
dragOffSet = e.GetPosition(this);
currentPosition = msi.ViewportOrigin;
private void msi_MouSELEftButtonUp(object sender,MouseButtonEventArgs E)
@H_526_20@mouseButtonPress = false;
this.lastMouse = e.GetPosition(this.msi);
if (mouseIsDragging == falsE)
bool shiftDowm = (Keyboard.Modifiers & ModifierKeys.Shift) == ModifierKeys.Shift;
Zoom(ZoomFactor,this.lastMousE);
@H_526_20@mouseIsDragging = false;
private void msi_MouSELEave(object sender,MouseEventArgs E)
@H_526_20@mouseIsDragging = false;
private void BtnResume_lick(object sender,RoutedEventArgs E)
this.msi.ViewportOrigin = new Point(0,0);
this.msi.ViewportWidth = 1;
private void BtnBig_lick(object sender,RoutedEventArgs E)
Zoom(1.2,new Point(this.ActualWidth / 2,this.ActualHeight / 2));
private void Btnsmail_lick(object sender,RoutedEventArgs E)
Zoom(0.8,this.ActualHeight / 2));
在这里我们需要添加
3
个鼠标
Click
事件方法:
BtnResume_lick
;
BtnBig_lick
;
Btnsmail_lick
,分别代表我们点击恢复,放大,缩小按钮。当我们点击这些按钮时,将会根据当前的逻辑坐标,调用
Zoom
方法调整缩放。其中
Zoom
方法第一个参数表示缩放倍数,如果大于
1
表示放大,小于
1
表示缩小,第二和第三个参数表示设置图片在
@H_131_113
@multi
ScaleIR_712_11845@age
对象区域中的新位置。点击恢复按钮会把我们的图片显示位置和宽度恢复初始值。
this.lastMouse = e.GetPosition(this.msi);
大佬总结
以上是大佬教程为你收集整理的Silverlight图片元素――创建DeepZoom应用程序全部内容,希望文章能够帮你解决Silverlight图片元素――创建DeepZoom应用程序所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。