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

最近的项目中也要用到一个局部图片放大的功能，前面这篇《silverlight实现图片局部放大效果的方法》虽然已经给出了原理、知识要点、尺寸要点及后端主要代码，但遗憾的是没有给出xaml的代码。这里按照前文中的提示，动手用WPF实践了一下，花了一个小时，终于搞出来了。这篇文章也就算是一个补充吧。

界面如下图所示：

实现的原理和用到的知识点请点击上面的链接，杨大侠已经说的很清楚了。这里主要强调的就是尺寸要点：

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

为了简单起见，我们把尺寸固定死（其实是可以搞成活的），这里仅为了演示，以下尺寸满足上面的条件。

准备一张原图：dog.jpg  分辨率：1920 * 1080

左侧小图片显示区域：用Canvas 显示，尺寸：320 * 180

半透明矩形框尺寸：50*50

右侧大图显示区域：用Canvas显示，尺寸：300 * 300

以下是XAML代码：

<Window x:Class="WpfZoom.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="WPF局部放大效果" Height="370" Width="700">
  <Canvas x:Name="RootCanvas">
    <!--左侧小图-->
    <Canvas x:Name="SmallBox" Width="320" Height="180" Canvas.Left="20" Canvas.Top="20">
      <Canvas.Background>
        <ImageBrush ImageSource="Images/dog.jpg" Stretch="UniformToFill" />
      </Canvas.Background>
      <!--半透明矩形框-->
      <Rectangle x:Name="MoveRect" Fill="White" Opacity="0.3" Stroke="Red" Width="50" Height="50" Canvas.Top="78" Canvas.Left="202"
          MouseMove="MoveRect_MouseMove"
          MouseLeftButtonDown="MoveRect_MouseLeftButtonDown"
          MouseLeftButtonUp="MoveRect_MouseLeftButtonUp"/>
    </Canvas>
    <!--右侧大图-->
    <Canvas x:Name="BigBox" Width="300" Height="300" Canvas.Left="360" Canvas.Top="20">
      <!--右侧原图片 注意尺寸-->
      <Image x:Name="bigImg" Width="1920" Height="1080" Canvas.Left="0" Canvas.Top="-780" Source="Images/dog.jpg" />
      <Canvas.Clip>
        <RectangleGeometry Rect="0,0,300,300" />
      </Canvas.Clip>
    </Canvas>
  </Canvas>
</Window>

cs 代码：

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
namespace WpfZoom
{
  /// <summary>
  /// MainWindow.xaml 的交互逻辑
  /// </summary>
  public partial class MainWindow : Window
  {
    //移动标志
    bool trackingMouseMove = false;
    //鼠标按下去的位置
    Point mousePosition;
    public MainWindow()
    {
      InitializeComponent();
      this.Loaded += new RoutedEventHandler(MainWindow_Loaded);
    }
    void MainWindow_Loaded(object sender, RoutedEventArgs e)
    {
      AdjustBigImage();
    }
    /// <summary>
    /// 半透明矩形框鼠标左键按下
    /// </summary>
    private void MoveRect_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;
      }
    }
    /// <summary>
    /// 半透明矩形框鼠标左键弹起
    /// </summary>
    private void MoveRect_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
    {
      FrameworkElement element = sender as FrameworkElement;
      trackingMouseMove = false;
      element.ReleaseMouseCapture();
      mousePosition.X = mousePosition.Y = 0;
      element.Cursor = null;
    }
    /// <summary>
    /// 半透明矩形框移动
    /// </summary>
    private void MoveRect_MouseMove(object sender, MouseEventArgs e)
    {
      FrameworkElement element = sender as FrameworkElement;
      if (trackingMouseMove)
      {
        //计算鼠标在X轴的移动距离
        double deltaV = e.GetPosition(element).Y - mousePosition.Y;
        //计算鼠标在Y轴的移动距离
        double deltaH = e.GetPosition(element).X - mousePosition.X;
        //得到图片Top新位置
        double newTop = deltaV + (double)element.GetValue(Canvas.TopProperty);
        //得到图片Left新位置
        double newLeft = deltaH + (double)element.GetValue(Canvas.LeftProperty);
        //边界的判断
        if (newLeft <= 0)
        {
          newLeft = 0;
        }
        //左侧图片框宽度 - 半透明矩形框宽度
        if (newLeft >= (this.SmallBox.Width - this.MoveRect.Width))
        {
          newLeft = this.SmallBox.Width - this.MoveRect.Width;
        }
        if (newTop <= 0)
        {
          newTop = 0;
        }
        //左侧图片框高度度 - 半透明矩形框高度度
        if (newTop >= this.SmallBox.Height - this.MoveRect.Height)
        {
          newTop = this.SmallBox.Height - this.MoveRect.Height;
        }
        element.SetValue(Canvas.TopProperty, newTop);
        element.SetValue(Canvas.LeftProperty, newLeft);
        AdjustBigImage();
        if (mousePosition.X <= 0 || mousePosition.Y <= 0) { return; }
      }
    }
    /// <summary>
    /// 调整右侧大图的位置
    /// </summary>
    void AdjustBigImage()
    {
      //获取右侧大图框与透明矩形框的尺寸比率
      double n = this.BigBox.Width / this.MoveRect.Width;
      //获取半透明矩形框在左侧小图中的位置
      double left = (double)this.MoveRect.GetValue(Canvas.LeftProperty);
      double top = (double)this.MoveRect.GetValue(Canvas.TopProperty);
      //计算和设置原图在右侧大图框中的Canvas.Left 和 Canvas.Top
      double newLeft = -left * n;
      double newTop = -top * n;
      bigImg.SetValue(Canvas.LeftProperty, newLeft);
      bigImg.SetValue(Canvas.TopProperty, newTop);
    }
  }
}

附：完整实例代码点击此处本站下载。

PS：这里再为大家推荐几款比较实用的图片处理工具供大家参考使用：

在线图片转换BASE64工具：
http://tools./transcoding/img2base64

ICO图标在线生成工具：
http://tools./aideddesign/ico_img

在线Email邮箱图标制作工具：
http://tools./email/emaillogo

在线图片格式转换(jpg/bmp/gif/png)工具：
http://tools./aideddesign/picext

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

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

# WPF  # Silverlight  # 图片  # 局部放大  # WPF实现图片合成或加水印的方法【2种方法】  # 深入分析WPF客户端读取高清图片卡以及缩略图的解决方法详解  # MVVM模式下WPF动态绑定展示图片  # 矩形框  # 鼠标  # 程序设计  # 按下  # 鼠标左键  # 小图  # 的是  # 来了  # 相关内容  # 出了  # 也就  # 也要  # 请点击  # 感兴趣  # 数据结构  # 给大家  # 花了  # 点击此处  # 很清楚  # 所示 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： JavaScript如何实现倒计时_时间函数如何精确控制  如何制作公司的网站链接,公司想做一个网站，一般需要花多少钱？  Laravel怎么使用Collection集合方法_Laravel数组操作高级函数pluck与map【手册】  微信小程序 闭包写法详细介绍  Laravel如何发送系统通知？（Notification渠道示例）  EditPlus中的正则表达式实战(5)  如何续费美橙建站之星域名及服务？  如何用PHP快速搭建CMS系统？  创业网站制作流程,创业网站可靠吗？  php读取心率传感器数据怎么弄_php获取max30100的心率值【指南】  如何快速生成专业多端适配建站电话？  如何快速重置建站主机并恢复默认配置？  Laravel如何与Pusher实现实时通信？（WebSocket示例）  香港网站服务器数量如何影响SEO优化效果？  微信小程序 canvas开发实例及注意事项  Laravel如何获取当前登录用户信息_Laravel Auth门面使用与Session用户读取【技巧】  如何在万网自助建站平台快速创建网站？  魔方云NAT建站如何实现端口转发？  javascript基本数据类型及类型检测常用方法小结  UC浏览器如何设置启动页 UC浏览器启动页设置方法  哪家制作企业网站好,开办像阿里巴巴那样的网络公司和网站要怎么做？  详解Android——蓝牙技术 带你实现终端间数据传输  Laravel如何操作JSON类型的数据库字段？（Eloquent示例）  Laravel数据库迁移怎么用_Laravel Migration管理数据库结构的正确姿势  python中快速进行多个字符替换的方法小结  ai格式如何转html_将AI设计稿转换为HTML页面流程【页面】  阿里云高弹*务器配置方案｜支持分布式架构与多节点部署  ChatGPT常用指令模板大全 新手快速上手的万能Prompt合集  Laravel怎么创建自己的包(Package)_Laravel扩展包开发入门到发布  Laravel如何使用Service Provider服务提供者_Laravel依赖注入与容器绑定【深度】  Laravel如何处理JSON字段的查询和更新_Laravel JSON列操作与查询技巧  Laravel如何使用Collections进行数据处理？（实用方法示例）  如何快速使用云服务器搭建个人网站？  Laravel怎么实现微信登录_Laravel Socialite第三方登录集成  Laravel集合Collection怎么用_Laravel集合常用函数详解  成都品牌网站制作公司,成都营业执照年报网上怎么办理？  Laravel如何处理和验证JSON类型的数据库字段  Laravel如何使用集合（Collections）进行数据处理_Laravel Collection常用方法与技巧  如何快速登录WAP自助建站平台？  Laravel如何使用Blade模板引擎？（完整语法和示例）  iOS UIView常见属性方法小结  laravel怎么在请求结束后执行任务（Terminable Middleware）_laravel Terminable Middleware请求结束任务执行方法  Laravel怎么做数据加密_Laravel内置Crypt门面的加密与解密功能  JavaScript如何操作视频_媒体API怎么控制播放  如何在腾讯云免费申请建站？  EditPlus中的正则表达式实战(6)  如何选择可靠的免备案建站服务器？  Laravel Session怎么存储_Laravel Session驱动配置详解  高端建站三要素：定制模板、企业官网与响应式设计优化  Java遍历集合的三种方式