救命！救命，十万火急，客户端如何在网页中的imagebutton按钮上画矩形框？并且能保持（跪求）

悬赏园豆：50 [已关闭问题]

ASP.NET网页中用imagebutton控件显示了一个图片，现在当用户用鼠标在图片上画矩形框的时候，要在图片上做一个矩形框标记，这个标记在用户未关闭网页之前都要显示出来。如果画矩形标记的同时又能获得矩形4个点的坐标最好了。谢谢了.这个使用asp.net+c#做的。

.NET技术 C#

胡怀飞 | 初学一级 | 园豆：45
提问于：2008-11-12 08:38

< >

其他回答(1)

画矩形不需要四个点，两个坐标，和矩形的长宽就可以了，我觉得你该用js来写，函数中event.x和event.y是经纬度，再传两个参数长宽，画的时候调用这个函数。刷新应该就没有了。你没写当然不能保存了。

Geeks | 园豆：560 (小虾三级) | 2008-11-12 08:57

1、imgaebutton 只是做图片展示还是要有自己的postback事件？

如果不要postback那么为什么不直接用图片呢？如果又要postback的话，那么你可以只能做成右键做标记，左键postback了。

2、昨天提供的一个思路你说运行不了，那你有没有自己去看看为什么运行不了呢？（其实只是发布上来一些编码导致的问题，你自己稍微改改就行了。），也支持不要postback的imagebutton（最好再给他的onclick事件赋一个{return false;}）

http://space.cnblogs.com/question/3756/

再发次代码吧。

Code
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>

<!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 runat="server">
<title>无标题页</title>
<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;
    pel.onclick = function(){return false;}

    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=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 )   
        　　e.preventDefault();   
        else  
            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("ImageButton1"));
}
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="http://photocdn.sohu.com/20081111/Img260573864.jpg" /></div>
    </form>
</body>
</html>

3、请不要再去开新帖了，没点讨论的精神。只是想要个答案。。

5yplan | 园豆：1330 (小虾三级) | 2008-11-12 09:31

清除回答草稿

您需要登录以后才能回答，未注册用户请先注册。

欢迎，请先 登录 或者 注册 。

救命！救命，十万火急，客户端如何在网页中的imagebutton按钮上画矩形框？并且能保持（跪求）

欢迎，请先登录或者注册。