类似地图的以鼠标为中心缩放图像

以鼠标为中心进行缩放,就像使用百度地图时一样。这种方式比一般的以图像中心点为中心进行缩放更加符合人们的思维惯性。

在网上找了没发现现成的,自己研究了半天,绕来绕去,头晕眼花的。后来得到群友的帮助才解决了这个问题。

下面给出由网友霸天虎兄弟提供的方法改写出来的代码:

procedure TForm1.Zoom(I: Single);
var
  NewW, NewH: Integer;
  NewX, NewY, SX, SY: Integer;
  A, B: Double;
begin
  FScale := FScale + Round(FScale * I);
  NewW := Trunc(ImgW * (FScale / 1000));
  NewH := Trunc(ImgH * (FScale / 1000));

  SX := Image1.Left;
  SY := Image1.Top;

  if (NewW < ClientWidth) and (NewH < ClientHeight) then begin
    // 图像小于窗口时,居中显示
    NewX := (ClientWidth - NewW) shr 1;
    NewY := (ClientHeight - NewH) shr 1;
  end else begin

    // 窗口显示不下时
    //NewX := SX;
    //NewY := SY;
    GetCursorPos(Mouse);
    Mouse := ScreenToClient(Mouse);
    //Mouse := Image1.ClientToParent(Mouse);
    A := (Mouse.X - SX) / Image1.Width;
    B := (Mouse.Y - SY) / Image1.Height;

    NewX := SX - Round((NewW - Image1.Width) * A);
    NewY := SY - Round((NewH - Image1.Height) * B);

  end;
  Image1.SetBounds(NewX, NewY, NewW, NewH);
end;

从上面的代码中可以看到,首先取得鼠标在图像显示客户区的坐标,然后:
鼠标在缩放前的相对位置 X =(鼠标坐标.X - 图像缩放前坐标.Left) / 图像宽度;
鼠标在缩放前的相对位置 Y =(鼠标坐标.Y - 图像缩放前坐标.Top) / 图像高度;

得到鼠标在缩放前的相对位置后,再用缩放前的坐标 - 乘以缩放后图像大小变化的差值(比如原来大小为A, 新大小为B,差值就是 B - A)。

完整demo下载: http://pan.baidu.com/s/1eQovAsa

http://www.cnblogs.com/yangyxd/articles/3984919.html

时间: 2024-10-20 17:10:29

类似地图的以鼠标为中心缩放图像的相关文章

以鼠标位置为中心缩放平移图片(图片map)

最近一个项目使用一张图片实现地图类似的效果,即图片以鼠标位置为中心缩放.平移:通过度娘搜索找到几个版本,最终下面这个版本真正实现该功能:具体代码是网上Copy的,若有版权或其他问题,请联系我予以处理,有不当之处,请原作者原谅. <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>移动缩放图片</title>

在WPF里面实现以鼠标位置为中心缩放移动图片

原文:在WPF里面实现以鼠标位置为中心缩放移动图片 在以前的文章使用WPF Resource以及Transform等技术实现鼠标控制图片缩放和移动的效果里面,介绍了如何在WPF里面移动和放大缩小图片,程序也支持使用滚轮的方式缩放图片.然而前面文章里介绍的缩放功能只能以图片中心为原点来实现,但是这种功能往往并不是客户想要的,我们看图片的时候,往往都喜欢以鼠标放在图片的焦点为原点进行图片的缩放. 咋看起来,实现这个功能也不是很难, ScaleTransform类里面定义了CenterX和Center

qt实现类似QQ伸缩窗口--鼠标事件应用

上一章节讲了qt鼠标事件实现,获取鼠标参数的方法.这一讲主要讲怎么应用上讲的鼠标事件实现一个小功能. qq好友对话框右侧 未展开时如图: 鼠标移动到 “隐藏侧边”处单击可以隐藏侧边,隐藏后效果如图: 实现的范例效果如下 1.一般情况 2.鼠标移动到中间分割线中间区域时,效果 3.单击红色按钮后,效果 4.鼠标移动到边界,效果 下面讲解实现过程:一般情况在QT中,这种伸缩窗体的实现有两种方法:一种是是直接用QSplitter分割器实现:另一种直接用布局管理器自己实现.本节用的是第二种方法实现的.布

在unity中用鼠标实现在场景中拖动物体,用鼠标滚轮实现缩放

在场景中添加一个Plan,Camera,Directional Light,Cube.添加两个脚本scrollerScirpt(挂在Camera),CubeDragScript(挂在Cube上). 1.鼠标滚轮实现缩放:将摄像机的镜头拉近或者拉远,调整摄像机的视角就可以实现,主要实现代码如下: void Update () { //鼠标滚轮的效果 //Camera.main.fieldOfView 摄像机的视野 //Camera.main.orthographicSize 摄像机的正交投影 //

百度地图3.0 隐藏比例尺和缩放按钮的方法

今天做项目的时候用到了百度地图Android SDK v3.0.0,发现用以前的办法无法去掉地图上的比例尺和按钮, 而demo里提供的设置BaiduMapOptions这个对象的方法来去掉地图上的比例尺和按钮, 但只能通过mMapView = new MapView(this, mapOptions);的方式来实例化MapView这个对象, 可是我想把自己定义的xml加进来,通过setContentView(R.layout.myview),然后用老办法mMapView = (MapView)

jQuery地图热点效果-鼠标经过弹出提示层信息

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><title>地图热点效果-鼠标经过弹出提示信息</title><meta http-equiv="Content-Type" content="

[转]缩放图像

[OpenCV入门指南]第二篇 缩放图像 标签: Canny边缘检测cvCreateImagecvResizeopenCVopencvOpenCVOpencv缩放图片 2012-12-03 09:34 原文地址:http://blog.csdn.net/morewindows/article/details/8239560 [OpenCV入门指南]第二篇 缩放图像 上一篇<[OpenCV入门指南]第一篇安装OpenCV>讲解了如何在VS2008下安装和配置OpenCV,本篇将介绍使用OpenC

【OpenCV入门指南】第二篇 缩放图像

[OpenCV入门指南]第二篇 缩放图像 上一篇<[OpenCV入门指南]第一篇安装OpenCV>讲解了如何在VS2008下安装和配置OpenCV,本篇将介绍使用OpenCV来缩放图片.首先介绍几个关键函数--cvResize和cvCreateImage <OpenCV入门指南>系列文章地址:http://blog.csdn.net/morewindows/article/category/1291764 一. 主要函数介绍 1.1 cvResize 函数功能:图像大小变换 函数原

本图片处理类功能非常之强大可以实现几乎所有WEB开发中对图像的处理功能都集成了,包括有缩放图像、切割图像、图像类型转换、彩色转黑白、文字水印、图片水印等功能

import java.awt.AlphaComposite; import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import java.awt.Graphics2D; import java.awt.Image; import java.awt.Toolkit; import java.awt.color.ColorSpace; import java.awt.geom.AffineTransform;