silverlight实现图片局部放大效果的方法

本文实例讲述了silverlight实现图片局部放大效果的方法。分享给大家供大家参考，具体如下：

很多购物平台中(比如京东购物)，浏览产品详情时都有这种效果，前几天看到有朋友问sl能不能实现，当然可以

界面:

1.左侧小图片(用一个矩形fill一张图片即可)
2.左侧半透明矩形
3.右侧大图片(用一个canvas设置clip裁剪可视区域作为蒙板，图片放置在canvas中即可)

原理：

获取左侧半透明矩形的相对位置，然后动态调整右侧大图的canvas.left与canvas.top

需要知道以下技术点:

1.clip的应用
2.如何拖动对象
3.拖动时的边界检测
4.动态调整对象的canvas.left与canvas.top属性

尺寸要点:

1.右侧大图可视区域与左侧半透明矩形的“长宽比例”应该相同
2.“图片原始尺寸长度比” 应该 “与左侧小图片长度比”相同
3.图片原始大小/左侧小图大小 = 右侧可视区域大小/半透明矩形大小

关键代码：

using system.windows;
using system.windows.controls;
using system.windows.input;
namespace partmagnifier
{
  public partial class mainpage : usercontrol
  {
    bool trackingmousemove = false;
    point mouseposition;
    public mainpage()
    {
      // 为初始化变量所必需
      initializecomponent();
    }
    private void layoutroot_loaded(object sender, system.windows.routedeventargs e)
    {
      adjust();
    }
    private void rectangle_mouseleftbuttondown(object sender, mousebuttoneventargs e)
    {
      frameworkelement element = sender as frameworkelement;
      mouseposition = e.getposition(element);
      trackingmousemove = true;
      if (null != element)
      {
        element.capturemouse();
        element.cursor = cursors.hand;
      }
      adjust();
      debug();
      sb.begin();//标题动画，可去掉
    }
    private void rectangle_mousemove(object sender, mouseeventargs e)
    {
      frameworkelement element = sender as frameworkelement;
      if (trackingmousemove)
      {
        double deltav = e.getposition(element).y - mouseposition.y;
        double deltah = e.getposition(element).x - mouseposition.x;
        double newtop = deltav + (double)element.getvalue(canvas.topproperty);
        double newleft = deltah + (double)element.getvalue(canvas.leftproperty);
        if (newleft <= 10)
        {
          newleft = 10;
        }
        if (newleft >= 130)
        {
          newleft = 130;
        }
        if (newtop <= 10) { newtop = 10; }
        if (newtop >= 85) { newtop = 85; }
        element.setvalue(canvas.topproperty, newtop);
        element.setvalue(canvas.leftproperty, newleft);
        mouseposition = e.getposition(element);
        adjust();
        if (mouseposition.x <= 0 || mouseposition.y <= 0) { return; }
        debug();
      }
    }
    private void rectangle_mouseleftbuttonup(object sender, mousebuttoneventargs e)
    {
      frameworkelement element = sender as frameworkelement;
      trackingmousemove = false;
      element.releasemousecapture();
      mouseposition.x = mouseposition.y = 0;
      element.cursor = null;
    }
    /// <summary>
    /// 调试信息
    /// </summary>
    void debug()
    {
      txtresult.text = "鼠标相对坐标：" + mouseposition.tostring() + "\n小框left：" + rect.getvalue(canvas.leftproperty) + ",小框top：" + rect.getvalue(canvas.topproperty) + "\n大图left：" + ((double)img.getvalue(canvas.leftproperty)).tostring("f0") + ",大图right：" + ((double)img.getvalue(canvas.topproperty)).tostring("f0");
    }
    /// <summary>
    /// 调整右侧大图的位置
    /// </summary>
    void adjust()
    {
      double n = cbig.width / rect.width;
      double left = (double)rect.getvalue(canvas.leftproperty) - 10;
      double top = (double)rect.getvalue(canvas.topproperty) - 10;
      double newleft = -left * n;
      double newtop = -top * n;
      img.setvalue(canvas.leftproperty, newleft);
      img.setvalue(canvas.topproperty, newtop);
    }
  }
}

更多关于c#相关内容感兴趣的读者可查看本站专题：《c#图片操作技巧汇总》、《c#常见控件用法教程》、《winform控件用法总结》、《c#数据结构与算法教程》、《c#面向对象程序设计入门教程》及《c#程序设计之线程使用技巧总结》

希望本文所述对大家c#程序设计有所帮助。