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 }

    最终效果如下:

  • 相关阅读:
    mhWaveEdit 1.4.8
    FFmpeg — 屏幕录制器材
    GNOME 主题: Troll
    cGmail — 主动反省邮件
    最小化布置 Ubuntu
    GNOME Do — 疾速翻开法式和文件
    PyTone 一个控制台音乐播放器
    高恪守编辑器 VIM-把持篇(2)
    Cankiri:玲珑实用的屏幕录像机
    LiVES 0.9.6pre4
  • 原文地址:https://www.cnblogs.com/vimsk/p/1856515.html
Copyright © 2011-2022 走看看