81,094
社区成员
发帖
与我相关
我的任务
分享如何在JSP中实现用鼠标滚轮对图片局部区域的放大与缩小
最近想在JSP网页中对图片实现放大与缩小功能,就象ACDSEE,AUTOCAD中那样在状态栏中有放大与缩小的图标,点击图标后,用鼠标的滚轮就可以对图片的局部区域实现放大与缩小,不知各位高手有何高见
...全文
请发表友善的回复…
发表回复
Q英熊 2005-01-10
- 打赏
- 举报
好像有一篇文章介绍用Delphi可以轻松实现图片局部放大，但不知JSP中如何实现
文章如下
在Delphi中，可利用类Tcanvas的CopyRect方法实现图象的放大和缩小。其功能是将源画布上的一个指定矩形区域（简称源矩形）内的象素，拷贝到目的画布上的一个指定矩形区域（简称目的矩形）中。亦可称之为象素块复制，如图1所示。
由CopyMode属性确定拷贝的模式。在直接拷贝模式（cmSrcCopy）下，当源矩形与目的矩形相等时，图象不变；若源矩形大于目的矩形，图象则缩小；而当源矩形小于目的矩形时，图象便被放大（在目的矩形中扩展）。源矩形与目的矩形大小之比，决定图象的缩放倍数。CopyRect方法声明如下：
Procedure CopyRect(const Dest: TRect; Canvas: TCanvas; const Source: Trect);
其中参数，Dest为目的矩形，Canvas是源画布，Source为源矩形。
实现步骤
新建应用程序主目录C:\Magnifier及其子目录Images，将事先制作好的位图图象Picture.bmp存入Images目录。本例中，Picture.bmp的大小为260*310象素。
启动Delphi IDE，新建项目Magnifier.dpr，主窗体单元命名为Main.pas，存入C:\Magnifier目录。在主窗体上放置一个TPanel组件，并在其中加入两个TImage组件。两个TImage组件分别命名为ForeImage和BackImage，前者重叠于后者之上，并且都装入Picture.bmp位图。
主窗体和各组件的主要属性按表1设置：
表1 主窗体和各组件属性设置
组 件
属 性
设 置
Form1
BorderIcons.biMaximize
False
BorderStyle
bsNone
Color
clRed
Height
364
KeyPreview
True
Name
MainForm
Position
poScreenCenter
Width
294
WindowState
wsNormal
Panel1
Align
alNone
BevelInner
bvLowered
BevelOuter
bvRaised
BevelWidth
2
BorderStyle
bsNone
BorderWidth
2
Height
322
Name
FramePanel
Visible
Ture
Width
272
Image1
Align
alNone
AutoSize
True
Center
True
Height
310
Name
BackImage
Picture
Picture.bmp
Stretch
False
Visible
False
Width
260
Image2
Align
alNone
AutoSize
True
Center
True
Height
310
Name
ForeImage
Picture
Picture.bmp
Stretch
False
Visible
True
Width
260
上述各组件的许多属性，读者亦可根据个人的爱好设定。
在主单元Main.pas的implementation段声明常量和变量：
const
sSide=30;
dSide=45;
var
msHide: Boolean;
OldX, OldY, NewX, NewY: Integer;
DestRect, SourceRect : TRect;
其中，常量sSide和dSide用以控制“放大镜”的大小和放大倍数；变量msHide控制光标（鼠标）的隐藏和打开；其它变量用以确定放大部位。
建立主窗体MainForm的OnCreate事件，加入下列语句，以初始化变量及设置复制模式：
msHide:=True;
Canvas.CopyMode:=cmSrcCopy;
创建主窗体MainForm的OnKeyPress事件处理程序，在其begin与end之间输入语句“Close;”，当按任意键时结束程序运行。
定义过程ImageCopy，用于处理图象的放大和恢复，当移动鼠标时调用。这是实现图象局部放大最重要的过程，源代码如下。
procedure TMainForm.ImageCopy(BoxCenterX, BoxCenterY, BoxSide: Integer);
begin
with SourceRect do
begin
Left:=BoxCenterX-BoxSide;
Top:=BoxCenterY-BoxSide;
Right:=BoxCenterX+BoxSide;
Bottom:=BoxCenterY+BoxSide;
end;
with DestRect do
begin
Left:=BoxCenterX-dSide;
Top:=BoxCenterY-dSide;
Right:=BoxCenterX+dSide;
Bottom:=BoxCenterY+dSide;
end;
ForeImage.Canvas.CopyRect(DestRect, BackImage.Canvas, SourceRect);
end;
注意，别忘了在Main.pas的“type”中声明过程ImageCopy。
创建ForeImage的OnMouseMove事件处理程序，当鼠标在图象上移动时，获取其位置，并作为过程调用的实参。此时，光标隐藏，“放大镜”出现。随着“放大镜”的移动，图象新的部位被放大，滑过的部位又恢复原状。以下为begin与end之间的代码：
NewX:=X;
NewY:=Y;
if msHide then
begin
OldX:=NewX;
OldY:=NewY;
msHide:=False;
ShowCursor(False);
end else
begin
ImageCopy(OldX, OldY, dSide);
end;
ImageCopy(NewX, NewY, sSide);
OldX:=NewX;
OldY:=NewY;
建立主窗体MainForm的OnMouseMove事件处理程序，当鼠标移开图象时，“放大镜”隐藏，光标重新出现。源代码片段如下：
if not msHide then
begin
msHide:=True;
ShowCursor(True);
ImageCopy(OldX, OldY, dSide);
end;
编译运行
至此，已不再需要做更多的事情，立即编译运行吧。啊，美丽的照片出现在屏幕中央！试试放大效果。将鼠标徐徐移入相框，奇迹出现了，鼠标变成了“放大镜”，所到之处，图象的相应部位被放大，十分平滑，毫无闪烁。这不是同您手持放大镜，观看地图和照片的情景一样吗。好酷啊！还有什么能比这更激动人心的呢？！
技术剖析
以上介绍了利用了画布的CopyRect方法，将图象以象素块从后台隐藏的TImage组件画布上向前台TImage组件的画布上拷贝，以实现图象的放大与恢复的技术。由于这一技术的采用，在图象放大前不需要存储象素，此后直接从后台TImage组件画布上恢复图象。不仅节省了内存资源，也确保了对图象的局部进行平滑、无闪烁地放大。同时，程序源代码也简洁、明了。
“放大镜”的中心便是鼠标的位置，这样处理的好处是使得图象在“放大镜”中均匀展开，并确保图象边缘也能同样放大。
要改变“放大镜”的大小和图象的放大倍数，只需修改常量sSide和dSide的值。实际应用中，亦可灵活处置，如将它们设置成变量，由程序菜单控制。本例“放大镜”的大小为90*90个象素，放大倍数为1.5。值得一提的是，这里的“放大镜”比真正的玻璃放大镜的效果要好得多。玻璃放大镜是用凸透镜制成的，中间与边缘的放大倍数不一致，导致图象发生形变。而且，当一边移动一边观察时，很容易使人眼花缭乱。本文为您展示的“放大镜”则没有这些现象。
利用TCanvas的StretchDraw方法或其它方法，也可以实现图象的局部放大。另外，虽然本文介绍的算法已经相当令人满意，但还是可以作进一步修改的。例如在“放大镜”移动时，只放大和恢复必要的部分。有兴趣的读者不妨一试。
程序编译、运行环境为Delphi 3.0和中文Windows 98。
文章如下
在Delphi中，可利用类Tcanvas的CopyRect方法实现图象的放大和缩小。其功能是将源画布上的一个指定矩形区域（简称源矩形）内的象素，拷贝到目的画布上的一个指定矩形区域（简称目的矩形）中。亦可称之为象素块复制，如图1所示。
由CopyMode属性确定拷贝的模式。在直接拷贝模式（cmSrcCopy）下，当源矩形与目的矩形相等时，图象不变；若源矩形大于目的矩形，图象则缩小；而当源矩形小于目的矩形时，图象便被放大（在目的矩形中扩展）。源矩形与目的矩形大小之比，决定图象的缩放倍数。CopyRect方法声明如下：
Procedure CopyRect(const Dest: TRect; Canvas: TCanvas; const Source: Trect);
其中参数，Dest为目的矩形，Canvas是源画布，Source为源矩形。
实现步骤
新建应用程序主目录C:\Magnifier及其子目录Images，将事先制作好的位图图象Picture.bmp存入Images目录。本例中，Picture.bmp的大小为260*310象素。
启动Delphi IDE，新建项目Magnifier.dpr，主窗体单元命名为Main.pas，存入C:\Magnifier目录。在主窗体上放置一个TPanel组件，并在其中加入两个TImage组件。两个TImage组件分别命名为ForeImage和BackImage，前者重叠于后者之上，并且都装入Picture.bmp位图。
主窗体和各组件的主要属性按表1设置：
表1 主窗体和各组件属性设置
组 件
属 性
设 置
Form1
BorderIcons.biMaximize
False
BorderStyle
bsNone
Color
clRed
Height
364
KeyPreview
True
Name
MainForm
Position
poScreenCenter
Width
294
WindowState
wsNormal
Panel1
Align
alNone
BevelInner
bvLowered
BevelOuter
bvRaised
BevelWidth
2
BorderStyle
bsNone
BorderWidth
2
Height
322
Name
FramePanel
Visible
Ture
Width
272
Image1
Align
alNone
AutoSize
True
Center
True
Height
310
Name
BackImage
Picture
Picture.bmp
Stretch
False
Visible
False
Width
260
Image2
Align
alNone
AutoSize
True
Center
True
Height
310
Name
ForeImage
Picture
Picture.bmp
Stretch
False
Visible
True
Width
260
上述各组件的许多属性，读者亦可根据个人的爱好设定。
在主单元Main.pas的implementation段声明常量和变量：
const
sSide=30;
dSide=45;
var
msHide: Boolean;
OldX, OldY, NewX, NewY: Integer;
DestRect, SourceRect : TRect;
其中，常量sSide和dSide用以控制“放大镜”的大小和放大倍数；变量msHide控制光标（鼠标）的隐藏和打开；其它变量用以确定放大部位。
建立主窗体MainForm的OnCreate事件，加入下列语句，以初始化变量及设置复制模式：
msHide:=True;
Canvas.CopyMode:=cmSrcCopy;
创建主窗体MainForm的OnKeyPress事件处理程序，在其begin与end之间输入语句“Close;”，当按任意键时结束程序运行。
定义过程ImageCopy，用于处理图象的放大和恢复，当移动鼠标时调用。这是实现图象局部放大最重要的过程，源代码如下。
procedure TMainForm.ImageCopy(BoxCenterX, BoxCenterY, BoxSide: Integer);
begin
with SourceRect do
begin
Left:=BoxCenterX-BoxSide;
Top:=BoxCenterY-BoxSide;
Right:=BoxCenterX+BoxSide;
Bottom:=BoxCenterY+BoxSide;
end;
with DestRect do
begin
Left:=BoxCenterX-dSide;
Top:=BoxCenterY-dSide;
Right:=BoxCenterX+dSide;
Bottom:=BoxCenterY+dSide;
end;
ForeImage.Canvas.CopyRect(DestRect, BackImage.Canvas, SourceRect);
end;
注意，别忘了在Main.pas的“type”中声明过程ImageCopy。
创建ForeImage的OnMouseMove事件处理程序，当鼠标在图象上移动时，获取其位置，并作为过程调用的实参。此时，光标隐藏，“放大镜”出现。随着“放大镜”的移动，图象新的部位被放大，滑过的部位又恢复原状。以下为begin与end之间的代码：
NewX:=X;
NewY:=Y;
if msHide then
begin
OldX:=NewX;
OldY:=NewY;
msHide:=False;
ShowCursor(False);
end else
begin
ImageCopy(OldX, OldY, dSide);
end;
ImageCopy(NewX, NewY, sSide);
OldX:=NewX;
OldY:=NewY;
建立主窗体MainForm的OnMouseMove事件处理程序，当鼠标移开图象时，“放大镜”隐藏，光标重新出现。源代码片段如下：
if not msHide then
begin
msHide:=True;
ShowCursor(True);
ImageCopy(OldX, OldY, dSide);
end;
编译运行
至此，已不再需要做更多的事情，立即编译运行吧。啊，美丽的照片出现在屏幕中央！试试放大效果。将鼠标徐徐移入相框，奇迹出现了，鼠标变成了“放大镜”，所到之处，图象的相应部位被放大，十分平滑，毫无闪烁。这不是同您手持放大镜，观看地图和照片的情景一样吗。好酷啊！还有什么能比这更激动人心的呢？！
技术剖析
以上介绍了利用了画布的CopyRect方法，将图象以象素块从后台隐藏的TImage组件画布上向前台TImage组件的画布上拷贝，以实现图象的放大与恢复的技术。由于这一技术的采用，在图象放大前不需要存储象素，此后直接从后台TImage组件画布上恢复图象。不仅节省了内存资源，也确保了对图象的局部进行平滑、无闪烁地放大。同时，程序源代码也简洁、明了。
“放大镜”的中心便是鼠标的位置，这样处理的好处是使得图象在“放大镜”中均匀展开，并确保图象边缘也能同样放大。
要改变“放大镜”的大小和图象的放大倍数，只需修改常量sSide和dSide的值。实际应用中，亦可灵活处置，如将它们设置成变量，由程序菜单控制。本例“放大镜”的大小为90*90个象素，放大倍数为1.5。值得一提的是，这里的“放大镜”比真正的玻璃放大镜的效果要好得多。玻璃放大镜是用凸透镜制成的，中间与边缘的放大倍数不一致，导致图象发生形变。而且，当一边移动一边观察时，很容易使人眼花缭乱。本文为您展示的“放大镜”则没有这些现象。
利用TCanvas的StretchDraw方法或其它方法，也可以实现图象的局部放大。另外，虽然本文介绍的算法已经相当令人满意，但还是可以作进一步修改的。例如在“放大镜”移动时，只放大和恢复必要的部分。有兴趣的读者不妨一试。
程序编译、运行环境为Delphi 3.0和中文Windows 98。
虎叔 2004-12-27
- 打赏
- 举报
例子：
www.go2map.net
不过和JSP应该关系不大。
www.go2map.net
不过和JSP应该关系不大。
CNetol 2004-12-27
- 打赏
- 举报
用js可以实现，但是不是局部缩小放大
<IMG onmousewheel="return bbimg(this)" SRC="photoaddress.gif">
<script language="javascript">
function bbimg(o){
var zoom=parseInt(o.style.zoom, 10)||100;zoom+=event.wheelDelta/12;if (zoom>0) o.style.zoom=zoom+'%';
return false;
}
</script>
<IMG onmousewheel="return bbimg(this)" SRC="photoaddress.gif">
<script language="javascript">
function bbimg(o){
var zoom=parseInt(o.style.zoom, 10)||100;zoom+=event.wheelDelta/12;if (zoom>0) o.style.zoom=zoom+'%';
return false;
}
</script>
