救命！救命，十万火急，客户端如何在网页中的imagebutton按钮上画矩形框？用Javascrip
0
我在ASP.NET网页中用imagebutton控件显示了一个图片，现在当用户用鼠标在图片上画矩形框的时候，要在图片上做一个矩形框标记，这个标记在用户未关闭网页之前都要显示出来。如果画矩形标记的同时又能获得矩形4个点的坐标最好了。谢谢了.这个使用asp.net+c#做的。
所有回答(2)
0
javascript来弄弄吧。具体没弄过。
0
随便写了下，只是一个思想。下面的代码只支持向右下角拉动。也没怎么试。
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta name="description" content="" />
<script type="text/javascript">
function drawsomthing(){
var status = "up";
var orgpos = {};
function $(el){
return document.getElementById(el);
};
document.onmousedown = function(ev){
status = "down";
var el = $("overarea");
if(!el){
el = document.createElement("div");
el.id = "overarea";
el.style.position = "absolute";
el.style.background = "#000000";
el.style.display = "none";
document.getElementsByTagName("body")[0].appendChild(el);
}
el.style.width = "0";
el.style.height = "0";
var pos = pointer(ev || window.event);
orgpos = pos;
el.style.left = pos.x + "px";
el.style.top = pos.y + "px";
el.style.display = "block";
};
document.onmouseup = function(){
status = "up";
};
document.onmousemove = function(ev){
if(status!="down")return;
var el = $("overarea");
var pos = pointer(ev || window.event);
el.style.width = (pos.x - orgpos.x) + "px";
el.style.height = (pos.y - orgpos.y) + "px";
}
function pointer(event) {
var docElement = document.documentElement,
body = document.body || { scrollLeft: 0, scrollTop: 0 };
return {
x: event.pageX || (event.clientX +
(docElement.scrollLeft || body.scrollLeft) -
(docElement.clientLeft || 0)),
y: event.pageY || (event.clientY +
(docElement.scrollTop || body.scrollTop) -
(docElement.clientTop || 0))
};
}
}
window.onload = function(){
drawsomthing();
}
script>
head>
<body>
body>
html>
下班回来聊QQ之余改了下。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta name="description" content="" />
<style type="text/css">
.opacity{border:1px dashed #adcd3c;position:absolute;display:none;overflow:hidden;color:#ff0084;font-size:12px;}
.opacity div{filter:alpha(opacity=30);-moz-opacity:0.3;opacity:0.3;padding:5px;background-color:#f2fddb;height:100%;width:100%;}
</style>
<script type="text/javascript">
function drawsomthing(pel){
var status = "up";
var orgpos = {};
function $(el){
return document.getElementById(el);
};
pel.onmousedown = mousedown;
pel.onmouseup = mouseup;
pel.onmousemove = mousemove;
function mousedown(ev){
status = "down";
var el = $("overarea");
if(el)el.style.display = "none";
disableDefault(ev);
if(!el){
el = document.createElement("div");
el.id = "overarea";
el.innerHTML = "<div>博客园http://www.cnblogs.com</div>"
el.className = "opacity";
el.onmouseup = mouseup;
el.onmousedown = mousedown;
el.onselectstart=new Function ("return false")
document.getElementsByTagName("body")[0].appendChild(el);
}
el.style.width = "0";
el.style.height = "0";
var pos = pointer(ev || window.event);
orgpos = pos;
el.style.left = pos.x + "px";
el.style.top = pos.y + "px";
el.style.display = "block";
};
function mouseup(ev){
status = "up";
};
function mousemove(ev){
if(status!="down")return;
disableDefault(ev);
var el = $("overarea");
var pos = pointer(ev || window.event);
var relpos = {x:(pos.x - orgpos.x),y:(pos.y - orgpos.y)};
el.style.width = Math.abs(relpos.x) + "px";
el.style.height = Math.abs(relpos.y) + "px";
//没去仔细想了。
if(relpos.x < 0 && relpos.y< 0){//左上,left，top都变
el.style.left = pos.x + "px";
el.style.top = pos.y + "px";
}else if(relpos.x < 0 && relpos.y > 0){//左下，left变
el.style.left = pos.x + "px";
}else if (relpos.x > 0 && relpos.y > 0){//右下，left,top都不变
}else if(relpos.x > 0 && relpos.y < 0){//右上，top变
el.style.top = pos.y + "px";
}else if(relpos.x == 0 && relpos.y > 0){//向下线条 都不变
}else if(relpos.x == 0 && relpos.y < 0){//向上线条 top变
el.style.top = pos.y + "px";
}else if(relpos.x < 0 && relpos.y == 0){//向左线条 left变
el.style.left = pos.x + "px";
}else if(relpos.x > 0 && relpos.y == 0){//像右线条 都不变
}else if(relpos.x == 0 && relpos.y == 0){
el.style.left = orgpos.x + "px";
el.style.top = orgpos.y + "px";
}
};
function disableDefault(e){
e = e || window.event;
if ( e && e.preventDefault )
//阻止默认浏览器动作(W3C)
e.preventDefault();
else
//IE中阻止函数器默认动作的方式
window.event.returnValue = false;
return false;
};
function pointer(event) {
var docElement = document.documentElement,
body = document.body || { scrollLeft: 0, scrollTop: 0 };
return {
x: event.pageX || (event.clientX +
(docElement.scrollLeft || body.scrollLeft) -
(docElement.clientLeft || 0)),
y: event.pageY || (event.clientY +
(docElement.scrollTop || body.scrollTop) -
(docElement.clientTop || 0))
};
}
}
//没有处理超过图片边界的。也没去封装成组件。
window.onload = function(){
drawsomthing(document.getElementById("myimg"));
}
</script>
</head>
<body>
<img id="myimg" src="http://photocdn.sohu.com/20081111/Img260573864.jpg" alt="" title="" />
</body>
</html>
