怎样实现图片拉框放大的功能？解决办法
日期：2014-05-16 浏览次数：20461 次
怎样实现图片拉框放大的功能？
图片是静态的图片，怎样实现像地图软件那样的拉框放大，能有源码是最好哦，谢谢了。
我用vml尝试再做，但总有些不对。
------解决方案--------------------
我觉得你至少应该要有几种不同分辨率下的图片才行,要不然图片放大之后估计是看不了的, 在程序中自己判断当前应该使用哪种分辨率的图片再显示.
------解决方案--------------------
LZ想做GIS？
那直接用GIS软件mapinfo,arcgis好了
------解决方案--------------------
貌似很难
------解决方案--------------------
得到拉框中心点，然后用vml重新画过
------解决方案--------------------
转 http://www.blogjava.net/zhyiwww
<html>
<head>
<meta http-equiv= "content-type " content= "text/html; charset=gbk ">
<title> 拉框 </title>
</head>
<body>
<div id= 'lay1 '
onmousedown= 'down(event) '
onmouseup= 'up(event) '
onmousemove= 'move(event) '
style= 'top:30px;left:30px;width:400px;height:400px;visibility:visible;border:solid 1px blue; '
>
<div id= 'rect '
style= 'position:absolute;background-color: #FF99FF '
>
</div>
</div>
<script language= "javascript ">
// 是否需要(允许)处理鼠标的移动事件,默认识不处理
var select = false;
var rect = document.getElementById( "rect ");
// 设置默认值,目的是隐藏图层
rect.style.width = 0;
rect.style.height = 0;
rect.style.visibility = 'hidden ';
//让你要画的图层位于最上层
rect.style.zIndex = 1000;
// 记录鼠标按下时的坐标
var downX = 0;
var downY = 0;
// 记录鼠标抬起时候的坐标
var mouseX2=downX;
var mouseY2=downY;
//处理鼠标按下事件
function down(event){
// 鼠标按下时才允许处理鼠标的移动事件
select = true;
//让你要画框的那个图层显示出来
//rect.style.visibility = 'visible ';
// 取得鼠标按下时的坐标位置
downX = event.clientX;
downY = event.clientY;
//设置你要画的矩形框的起点位置
rect.style.left = downX;
rect.style.top = downY;
}
//鼠标抬起事件
function up(event){
//鼠标抬起,就不允许在处理鼠标移动事件
select = false;
//隐藏图层
rect.style.visibility = 'hidden ';
}
//鼠标移动事件,最主要的事件
function move(event){
// 取得鼠标移动时的坐标位置
mouseX2 = event.clientX;
mouseY2 = event.clientY;
// 设置拉框的大小
rect.style.width = Math.abs( mouseX2 - downX );
rect.style.height = Math.abs( mouseY2 - downY );
/*
这个部分,根据你鼠标按下的位置,和你拉框时鼠标松开的位置关系,可以把区域分为四个部分,根据四个部分的不同,
我们可以分别来画框,否则的话,就只能向一个方向画框,也就是点的右下方画框.
*/
if(select){
图片是静态的图片，怎样实现像地图软件那样的拉框放大，能有源码是最好哦，谢谢了。
我用vml尝试再做，但总有些不对。
------解决方案--------------------
我觉得你至少应该要有几种不同分辨率下的图片才行,要不然图片放大之后估计是看不了的, 在程序中自己判断当前应该使用哪种分辨率的图片再显示.
------解决方案--------------------
LZ想做GIS？
那直接用GIS软件mapinfo,arcgis好了
------解决方案--------------------
貌似很难
------解决方案--------------------
得到拉框中心点，然后用vml重新画过
------解决方案--------------------
转 http://www.blogjava.net/zhyiwww
<html>
<head>
<meta http-equiv= "content-type " content= "text/html; charset=gbk ">
<title> 拉框 </title>
</head>
<body>
<div id= 'lay1 '
onmousedown= 'down(event) '
onmouseup= 'up(event) '
onmousemove= 'move(event) '
style= 'top:30px;left:30px;width:400px;height:400px;visibility:visible;border:solid 1px blue; '
>
<div id= 'rect '
style= 'position:absolute;background-color: #FF99FF '
>
</div>
</div>
<script language= "javascript ">
// 是否需要(允许)处理鼠标的移动事件,默认识不处理
var select = false;
var rect = document.getElementById( "rect ");
// 设置默认值,目的是隐藏图层
rect.style.width = 0;
rect.style.height = 0;
rect.style.visibility = 'hidden ';
//让你要画的图层位于最上层
rect.style.zIndex = 1000;
// 记录鼠标按下时的坐标
var downX = 0;
var downY = 0;
// 记录鼠标抬起时候的坐标
var mouseX2=downX;
var mouseY2=downY;
//处理鼠标按下事件
function down(event){
// 鼠标按下时才允许处理鼠标的移动事件
select = true;
//让你要画框的那个图层显示出来
//rect.style.visibility = 'visible ';
// 取得鼠标按下时的坐标位置
downX = event.clientX;
downY = event.clientY;
//设置你要画的矩形框的起点位置
rect.style.left = downX;
rect.style.top = downY;
}
//鼠标抬起事件
function up(event){
//鼠标抬起,就不允许在处理鼠标移动事件
select = false;
//隐藏图层
rect.style.visibility = 'hidden ';
}
//鼠标移动事件,最主要的事件
function move(event){
// 取得鼠标移动时的坐标位置
mouseX2 = event.clientX;
mouseY2 = event.clientY;
// 设置拉框的大小
rect.style.width = Math.abs( mouseX2 - downX );
rect.style.height = Math.abs( mouseY2 - downY );
/*
这个部分,根据你鼠标按下的位置,和你拉框时鼠标松开的位置关系,可以把区域分为四个部分,根据四个部分的不同,
我们可以分别来画框,否则的话,就只能向一个方向画框,也就是点的右下方画框.
*/
if(select){
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
