如何用js 在图片上画个矩形

rt 
在图片上点击鼠标左键 然后拖动 画出个矩形框来 然后在鼠标抬起的时候弹出个页面.....感谢达人们帮帮小弟
只要实现功能就行越简单越好 太难了我怕我看不懂 呵呵

解决方案 »

  1.   

    可以在鼠标按下的时候生成一个div，将div的顶点固定，大小随着鼠标的移动而变化，设定div边框的颜色，这就是你要的矩形。
      

  2.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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="Author" content="Sheneyan" />
    <script type="text/javascript">
    var ns4 = document.layers;
    var ns6 = document.getElementById && !document.all;
    var ie4 = document.all;
    var resizing=false;//是否正在画框
    var curPositionX;//当前位置x坐标
    var curPositionY;//当前位置y坐标
    var startPointX;//起点x坐标
    var startPointY;//起点y坐标
    var endPointX;//终点x坐标
    var endPointY;//终点y坐标
    var border=null;//框，就是div
    //获取鼠标位置
    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;
    }
    function init(){
    if(ns4) document.captureEvents(Event.MOUSEMOVE);
    document.onmousemove=onResize;
    document.onmouseup=onMouseUp;
    document.onmousedown=onMouseDown;
    border=document.createElement("div");
    border.className="sizable_Sheneyan";
    document.body.appendChild(border);
    }
    function onMouseUp(e){
    if (resizing){
    drawBorder();
    resizing=false;
    }
    }
    function onResize(e){
    moveToMouseLoc(e);
    if (resizing==false)
    return true;
    drawBorder();
    }
    function onMouseDown(e){
    if (resizing==true)
    return true;
    resizing=true;
    startPointX=curPositionX;
    startPointY=curPositionY;
    drawBorder();
    }
    function drawBorder(){
    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";
    }
    }
    </script>
    <style type="text/css">
    .sizable_Sheneyan{overflow:hidden;position:absolute;border:solid 1px;width:0px;height:0px;left:-100px;top:-100px;}
    </style>
    </head>
    <body onload="init()">
    </body>
    </html>
      

  3.   

    获取鼠标启停位置 
    然后生成一个DIV，用JS控制DIV的z-index、position、filter、top、left等属性就可以了。 
    应该比较简单的，可以参考http://lzby.net/design/?p=2212
      

  4.   

    <script type="text/javascript" charset="utf-8" src="http://files.cnblogs.com/shuicaituya/mootools.js"></script>
    <body>
    <script>
         page = {
    draw:function(){
    new Element('div').setStyles({
    border:'1px solid red',
    position:'absolute',
    cursor:'nw-resize',
    width:20,
    height:20,
    'z-index':2
    }).inject(document.body).makeResizable({
    onComplete: function(){
    new Element('div').setStyles({
    border:'10px solid #000',
    background:'#fff',
    position:'absolute',
    cursor:'nw-resize',
    'z-index':3,
    width:500,
    height:500,
    margin:0
    }).inject(document.body);
    }
    });
    }
    }
    page.draw();
        </script>
    </body>
    只是抛砖引玉，这东西要写成组件化是需要时间的，自己研究吧