标签：
我们的图像选取技术今天终于获得了阶段性的突破！
是大家共同努力的结果，这个技术主要可以实现，在工作区内，进行图片框选，完了可以把起始点，终点坐标显示出来，并且，点的坐标可以方便的进行手动修改，改了之后，按下确定，选框也会发生对应的改变。部分代码如下：
1获取鼠标位置
function moveToMouseLoc(e) {
if (ns4 || ns6) {
curPositionX = e.pageX
curPositionY = e.pageY;
} else {
curPositionX = event.x + document.body.scrollLeft;
curPositionY = event.y + document.documentElement.scrollTop;
}
return true;
}
2鼠标按下事件
function onMouseDown(e) { if (resizing == true) return true; resizing = true; if(divsx<=curPositionX&&curPositionX<=divex){ if(divsy<=curPositionY&&curPositionY<=divey){ startPointX = curPositionX; startPointY = curPositionY; } } if(curPositionX<divsx){ startPointX = divsx; } if(curPositionX>divex){ startPointX = divex; } if(divsy>curPositionY){ startPointY = divsy; } if(curPositionY>divey){ startPointY = divey; } drawBorder(); }
3鼠标弹起事件
function onMouseUp(e) { if (resizing) { drawBorder(); resizing = false; } if(curPositionX<divsx){ endPointX = divsx; } if(curPositionX>divex){ endPointX = divex; } if(divsy>curPositionY){ endPointY = divsy; } if(curPositionY>divey){ endPointY = divey; } if(startPointX > 200 && startPointX < 400) $("#startPointX").val(startPointX); if(startPointY > 200 && startPointY < 600) $("#startPointY").val(startPointY); if(endPointX > 200 && endPointX < 400) $("#endPointX").val(endPointX); if(endPointY > 200 && endPointY < 600) $("#endPointY").val(endPointY); }
4画线框
function drawBorder() { if(divsx<=curPositionX&&curPositionX<=divex){ if(divsy<=curPositionY&&curPositionY<=divey){ endPointX = curPositionX; endPointY = curPositionY; with (border.style) { width = Math.abs(startPointX - endPointX) + "px"; height = Math.abs(startPointY - endPointY) + "px"; left = Math.min(startPointX, endPointX) + "px"; top = Math.min(startPointY, endPointY) + "px"; } } } }
以上是技术实现的部分代码。
下图是图像选取实现的现场。
标签：
原文地址：http://www.cnblogs.com/TNT5/p/5409335.html
