zoukankan      html  css  js  c++  java
  • silverlight实现图片局部放大效果

           silverlight实现图片局部放大效果方法之一:

    可以使用两幅图片,一幅图片是显示待放大的图片,另一幅图片是原图,这里,他们当然需要满足原图要大于带放大的图片的关系,这样

    我们通过模拟的放大镜遮罩放到待放大图片上,再根据原图,使得局部放大并显示。

    具体的说,可以设置一个Canvas对象,然后把一幅原图放到里面,接着使用clip属性进行剪裁,你可以这样理解剪裁,在一块布上,用剪刀减去一块,或者剪出一个圆,我们就用剪出一个圆为例,在这个圆外面的部分都被剪去了,剩下的也就是我们能看到的这个圆中的那部分图片---也就是原图的一部分。然后,我们可以根据你在待放大图片上需要放大的部分,对原图进行位置的改变,显示出局部放大图。

           那么怎么样来计算你需要放大的位置呢?

    其实也很简单,我们可以这么想,在待放大图片上,你做一个可以随鼠标拖动的放大镜,然后,根据这个放大镜的区域,在那个放原图片的画布对象的剪裁部分显示出相应的那部分,因为原图比待放大图片要大,这样自然就得到了放大的效果。

    现在剩下的问题就是怎么要得到他们对应的部分。在做这一步前,必须要明确一点,就是所以的东西都是按照比例放大的,所以,你那个放大镜的长度和宽度与放大视窗(就是那个圆洞)的比例,应该与待放大图片的长宽与原图长宽的比例相等。接下来,就是要理解,怎么样得到相应的位置了,可以这么想,在待放大图片那边,待放大的图片是不动的,你动的是放大镜,而在原图那边,那个放大视窗是不动的,你动的是原图。这样你根据相对运动,便知道,当你的放大镜像左边移动的时候,只要你的原图向右边移动就可以在视窗看到你需要放大的那部分图。因为我们是用canvas进行绝对定位,所以,可以得到如下:

                double n = img.Width / rect.Width;                                                 //原图与待放大图的比,也就是放大比例
                double left = (double)magnifiter.GetValue(Canvas.LeftProperty);        //得到放大镜的x坐标
                double top = (double)magnifiter.GetValue(Canvas.TopProperty);       //得到放大镜的y坐标
                double newleft = -n * left;                                                               //乘上比例系数并取负数(因为是相对运动)
                double newtop = -n * top;
                img.SetValue(Canvas.LeftProperty, newleft);                                       //设置原图的位置
                img.SetValue(Canvas.TopProperty, newtop);

    具体源代码如下:

    MainPage .xaml

    代码
     1 <UserControl x:Class="magnifier.MainPage"
     2     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     3     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     4     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     5     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     6     mc:Ignorable="d"
     7     d:DesignHeight="300" d:DesignWidth="400">
     8 
     9     <Grid x:Name="LayoutRoot" Background="White">
    10 
    11         <Canvas x:Name="mainback">            
    12            
    13                 <Rectangle Width="260.5" Height="357.5" x:Name="rect">
    14                 <Rectangle.Fill>
    15                     <ImageBrush ImageSource="a.jpg" Stretch="Fill"/>
    16                 </Rectangle.Fill>
    17             </Rectangle>
    18             <Ellipse Width="100" Height="100" x:Name="magnifiter" Opacity="0.5" Fill="White">
    19 
    20             </Ellipse>
    21         </Canvas>
    22         <Canvas x:Name="im" Width="200" Height="200" Canvas.Left="600">
    23             <Image Source="a.jpg"  Width="521" Height="715" x:Name="img"></Image>
    24             <Canvas.Clip>
    25                     <EllipseGeometry RadiusX="100" RadiusY="100" Center="100,100"/>
    26                 </Canvas.Clip>
    27             
    28             </Canvas>
    29     </Grid>
    30 </UserControl>

    MainPage.xaml.cs

    代码
     1 namespace magnifier
     2 {
     3     public partial class MainPage : UserControl
     4     {
     5         bool IsMouseDown = false;
     6         Point mousep;
     7 
     8         public MainPage()
     9         {
    10             InitializeComponent();
    11             magnifiter.MouseLeftButtonDown += new MouseButtonEventHandler(magnifiter_MouseLeftButtonDown);
    12             magnifiter.MouseLeftButtonUp += new MouseButtonEventHandler(magnifiter_MouseLeftButtonUp);
    13             magnifiter.MouseMove += new MouseEventHandler(magnifiter_MouseMove);
    14         }
    15 
    16         void magnifiter_MouseMove(object sender, MouseEventArgs e)
    17         {
    18              
    19             if (IsMouseDown)
    20             {
    21                 double DeltaV = e.GetPosition(null).Y - mousep.Y;
    22                 double DeltaH = e.GetPosition(null).X - mousep.X;
    23                 double NewTop = DeltaV + (double)magnifiter.GetValue(Canvas.TopProperty);
    24                 double NewLeft = DeltaH + (double)magnifiter.GetValue(Canvas.LeftProperty);
    25                 magnifiter.SetValue(Canvas.LeftProperty, NewLeft);
    26                 magnifiter.SetValue(Canvas.TopProperty, NewTop);
    27                 mousep = e.GetPosition(null);
    28                 mag();
    29             }
    30            
    31         }
    32 
    33         void magnifiter_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
    34         {
    35             IsMouseDown = false;
    36             mousep.X = mousep.Y = 0;
    37         }
    38 
    39         void magnifiter_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
    40         {
    41             mousep = e.GetPosition(null);
    42             
    43             IsMouseDown = true;
    44         }
    45         public void mag()
    46         {
    47             double n = img.Width / rect.Width;
    48             double left = (double)magnifiter.GetValue(Canvas.LeftProperty);
    49             double top = (double)magnifiter.GetValue(Canvas.TopProperty);
    50             double newleft = -* left;
    51             double newtop = -* top;
    52             img.SetValue(Canvas.LeftProperty, newleft);
    53             img.SetValue(Canvas.TopProperty, newtop);
    54         }
    55     }
    56 }

    最终效果如下:

  • 相关阅读:
    Azure PowerShell (7) 使用CSV文件批量设置Virtual Machine Endpoint
    Windows Azure Cloud Service (39) 如何将现有Web应用迁移到Azure PaaS平台
    Azure China (7) 使用WebMetrix将Web Site发布至Azure China
    Microsoft Azure News(4) Azure新D系列虚拟机上线
    Windows Azure Cloud Service (38) 微软IaaS与PaaS比较
    Windows Azure Cloud Service (37) 浅谈Cloud Service
    Azure PowerShell (6) 设置单个Virtual Machine Endpoint
    Azure PowerShell (5) 使用Azure PowerShell创建简单的Azure虚拟机和Linux虚拟机
    功能代码(1)---通过Jquery来处理复选框
    案例1.用Ajax实现用户名的校验
  • 原文地址:https://www.cnblogs.com/vimsk/p/1856515.html
Copyright © 2011-2022 走看看