求助，canvas应用的扩展，悬赏100分


<!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> -->
<!DOCTYPE html>  
<html>  
<head>  
 
<title> Canvas Demo</title>  
<!--[if It IE]>  
 <script type="text/javascript" src="./excanvas.js"></script>  
<![endif]-->  
<script>  
//初始化
var canvas;
window.onload=function() {   
    canvas = document.getElementById('cvs');   
    if (canvas.getContext){   
        var ctx = canvas.getContext('2d');   
           
        ctx.fillStyle='blue';
         
    //    -----------------------------
          
        ctx.beginPath();   
        ctx.rect(10,10,50,50);   
        ctx.fill();  
          
        ctx.beginPath();   
        ctx.rect(70,10,50,50);   
        ctx.fill();  
                  
        ctx.beginPath();   
        ctx.rect(130,10,50,50);   
        ctx.fill();
          
        ctx.beginPath();   
        ctx.rect(190,10,50,50);   
        ctx.fill();
          
        ctx.beginPath();   
        ctx.rect(250,10,50,50);   
        ctx.fill();
          
        ctx.beginPath();   
        ctx.rect(310,10,50,50);   
        ctx.fill();
      
    //----------------------------------------      
  //----------------------------------------      
        //line2    
        ctx.beginPath(); 
        ctx.rect(10,70,50,50);   
        ctx.fill();  
         
        ctx.beginPath(); 
        ctx.rect(70,70,50,50);   
        ctx.fill(); 
         
        ctx.beginPath(); 
        ctx.rect(130,70,50,50);   
        ctx.fill(); 
         
        ctx.beginPath(); 
        ctx.rect(190,70,50,50);   
        ctx.fill(); 
         
        ctx.beginPath(); 
        ctx.rect(250,70,50,50);   
        ctx.fill(); 
         
        ctx.beginPath(); 
        ctx.rect(310,70,50,50);   
        ctx.fill(); 
      
            
         
        //添加事件响应   
        canvas.addEventListener('click', function(e){   
            p = getEventPosition(e);  
//            ctx.clearRect(0,0,360,120); 
            reDraw(p,ctx);  
              
        }, false);   
    }   
}   
//得到点击的坐标   
function getEventPosition(ev){   
    var x, y;   
    if (ev.layerX || ev.layerX == 0) {   
        x = ev.layerX;   
        y = ev.layerY;   
    }else if (ev.offsetX || ev.offsetX == 0) { // Opera   
        x = ev.offsetX;   
        y = ev.offsetY;   
    }   
    return {x: x, y: y};   
}   
var arr = [             
        {x:10, y:10, width:50, height:50},   
        {x:70, y:10, width:50, height:50},
        {x:130, y:10, width:50, height:50},
        {x:190, y:10, width:50, height:50},
        {x:250, y:10, width:50, height:50},
        {x:310, y:10, width:50, height:50},  
         
        {x:10, y:70, width:50, height:50},   
        {x:70, y:70, width:50, height:50},
        {x:130, y:70, width:50, height:50},
        {x:190, y:70, width:50, height:50},
        {x:250, y:70, width:50, height:50},
        {x:310, y:70, width:50, height:50}                               
    ];
//重绘   
function reDraw(p,ctx){             
    var whichObject = [];  
    var zoom = parseInt(canvas.style.zoom || 100)/100;    
    for(var i=0; i < arr.length; i++){
          if(p && (arr[i].x*zoom + arr[i].width*zoom) >= p.x && p.x >= arr[i].x
            && (arr[i].y*zoom + arr[i].height*zoom) >= p.y && p.y >= arr[i].y){               
                whichObject.push(i); 
                if(arr[i].selected){
                    ctx.fillStyle='blue';
                    arr[i].selected = false;
                } else {
                    ctx.fillStyle='red';
                    arr[i].selected = true;
                }
                ctx.beginPath();                 
                ctx.rect(arr[i].x,arr[i].y, arr[i].width,arr[i].height);
                ctx.fill();   
                break;
                 
            }                         
           }  
 
}
 
</script> 
<script>
  function ZoomImg(o)
        {
            var zoom = parseInt(o.style.zoom, 10) || 100;
            zoom += event.wheelDelta / 12;
            if(zoom > 10)
                o.style.zoom = zoom + '%';
            return false;
        }
</script> 
 
</head>  
<body>  
 
 
 
<canvas onmousewheel="return ZoomImg(this)" id="cvs" width="400" height="200" style="background:#8D8D8D" ></canvas>  
 
  
 
</body>  
</html>

解决方案 »

  1.   

    原谅小白的无知，我想问为什么我现在框不住画布了，我之前在canvas外面加了个div,限制overflow：hidden，因为不想这个页面缩放，只想画布内缩放（能够画布内拖拽），谢谢了！
      

  2.   

    原谅小白的无知，我想问为什么我现在框不住画布了，我之前在canvas外面加了个div,限制overflow：hidden，因为不想这个页面缩放，只想画布内缩放（能够画布内拖拽），谢谢了！
      

  3.   

    目测是捕捉触控点坐标，写一个判断缩放的函数，然后根据缩放的比例重新画图这个方法更合适，但是我水平太菜，大侠如果可以写个根据触控点坐标和缩放比例重绘图形的demo给我参考就好了
      

  4.   

    你的意思是坐位大小不变 就变canvas大小?
      

  5.   

    不是，座位大小也变，但是整个画布区域内缩放，就像网页中的地图插件一样，可以在那个框框内放大缩小拖拽点击<!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> -->
    <!DOCTYPE html>  
    <html>  
    <head>  
     
    <title> Canvas Demo</title>  
    <!--[if It IE]>  
     <script type="text/javascript" src="./excanvas.js"></script>  
    <![endif]-->  
    <script>  
    //初始化
    var canvas;
    var ctx;
    var zoom = 1;
    window.onload=function() {   
        canvas = document.getElementById('cvs');   
        if (canvas.getContext){   
            ctx = canvas.getContext('2d');   
               
            ctx.fillStyle='blue';
             
        //    -----------------------------
              
            ctx.beginPath();   
            ctx.rect(10,10,50,50);   
            ctx.fill();  
              
            ctx.beginPath();   
            ctx.rect(70,10,50,50);   
            ctx.fill();  
                      
            ctx.beginPath();   
            ctx.rect(130,10,50,50);   
            ctx.fill();
              
            ctx.beginPath();   
            ctx.rect(190,10,50,50);   
            ctx.fill();
              
            ctx.beginPath();   
            ctx.rect(250,10,50,50);   
            ctx.fill();
              
            ctx.beginPath();   
            ctx.rect(310,10,50,50);   
            ctx.fill();
          
        //----------------------------------------      
      //----------------------------------------      
            //line2    
            ctx.beginPath(); 
            ctx.rect(10,70,50,50);   
            ctx.fill();  
             
            ctx.beginPath(); 
            ctx.rect(70,70,50,50);   
            ctx.fill(); 
             
            ctx.beginPath(); 
            ctx.rect(130,70,50,50);   
            ctx.fill(); 
             
            ctx.beginPath(); 
            ctx.rect(190,70,50,50);   
            ctx.fill(); 
             
            ctx.beginPath(); 
            ctx.rect(250,70,50,50);   
            ctx.fill(); 
             
            ctx.beginPath(); 
            ctx.rect(310,70,50,50);   
            ctx.fill(); 
          
                
             
            //添加事件响应   
            canvas.addEventListener('click', function(e){   
                p = getEventPosition(e);  
    //            ctx.clearRect(0,0,360,120); 
                reDraw(p,ctx);  
                  
            }, false);   
        }   
    }   
    //得到点击的坐标   
    function getEventPosition(ev){   
        var x, y;   
        if (ev.layerX || ev.layerX == 0) {   
            x = ev.layerX;   
            y = ev.layerY;   
        }else if (ev.offsetX || ev.offsetX == 0) { // Opera   
            x = ev.offsetX;   
            y = ev.offsetY;   
        }   
        return {x: x, y: y};   
    }   
    var arr = [             
            {x:10, y:10, width:50, height:50},   
            {x:70, y:10, width:50, height:50},
            {x:130, y:10, width:50, height:50},
            {x:190, y:10, width:50, height:50},
            {x:250, y:10, width:50, height:50},
            {x:310, y:10, width:50, height:50},  
             
            {x:10, y:70, width:50, height:50},   
            {x:70, y:70, width:50, height:50},
            {x:130, y:70, width:50, height:50},
            {x:190, y:70, width:50, height:50},
            {x:250, y:70, width:50, height:50},
            {x:310, y:70, width:50, height:50}                               
        ];
    //重绘   
    function reDraw(p,ctx){             
        var whichObject = [];     
        for(var i=0; i < arr.length; i++){
              if(p && (arr[i].x*zoom + arr[i].width*zoom) >= p.x && p.x >= arr[i].x
                && (arr[i].y*zoom + arr[i].height*zoom) >= p.y && p.y >= arr[i].y){               
                    whichObject.push(i); 
                    if(arr[i].selected){
                        ctx.fillStyle='blue';
                        arr[i].selected = false;
                    } else {
                        ctx.fillStyle='red';
                        arr[i].selected = true;
                    }
                    ctx.beginPath();                 
                    ctx.rect(arr[i].x*zoom,arr[i].y*zoom, arr[i].width*zoom,arr[i].height*zoom);
                    ctx.fill();   
                    break;
                     
                }                         
               }  
     
    }
      function ZoomImg(o)
            {
    var _zoom = zoom;
                _zoom += (event.wheelDelta / 12)/100;
    _zoom = parseFloat(_zoom.toFixed(1));
                if(_zoom > 0.5){
    zoom = _zoom;
                    //o.style.zoom = zoom + '%';
    //o.width = o.width * zoom;
    //o.height = o.height * zoom;
    //o.style.zoom = 1;
    var p;
    ctx.clearRect(0,0,400,200);
    for(var i = 0 ; i < arr.length ; i++){
    p = arr[i];
    if(p.selected){
    ctx.fillStyle='red';
    } else {
    ctx.fillStyle='blue';
    }
    ctx.beginPath(); 
    ctx.rect(p.x * zoom,p.y * zoom,p.width * zoom,p.height * zoom);   
    ctx.fill(); 
    }
    }

                return false;
            }
    </script> 
     
    </head>  
    <body>  
     
     
     
    <canvas onmousewheel="return ZoomImg(this)" id="cvs" width="400" height="200" style="background:#8D8D8D" ></canvas>  
     
      
     
    </body>  
    </html>是这个效果吗 拖拽就不知道了
      

  6.   

    不是，座位大小也变，但是整个画布区域内缩放，就像网页中的地图插件一样，可以在那个框框内放大缩小拖拽点击<!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> -->
    <!DOCTYPE html>  
    <html>  
    <head>  
     
    <title> Canvas Demo</title>  
    <!--[if It IE]>  
     <script type="text/javascript" src="./excanvas.js"></script>  
    <![endif]-->  
    <script>  
    //初始化
    var canvas;
    var ctx;
    var zoom = 1;
    window.onload=function() {   
        canvas = document.getElementById('cvs');   
        if (canvas.getContext){   
            ctx = canvas.getContext('2d');   
               
            ctx.fillStyle='blue';
             
        //    -----------------------------
              
            ctx.beginPath();   
            ctx.rect(10,10,50,50);   
            ctx.fill();  
              
            ctx.beginPath();   
            ctx.rect(70,10,50,50);   
            ctx.fill();  
                      
            ctx.beginPath();   
            ctx.rect(130,10,50,50);   
            ctx.fill();
              
            ctx.beginPath();   
            ctx.rect(190,10,50,50);   
            ctx.fill();
              
            ctx.beginPath();   
            ctx.rect(250,10,50,50);   
            ctx.fill();
              
            ctx.beginPath();   
            ctx.rect(310,10,50,50);   
            ctx.fill();
          
        //----------------------------------------      
      //----------------------------------------      
            //line2    
            ctx.beginPath(); 
            ctx.rect(10,70,50,50);   
            ctx.fill();  
             
            ctx.beginPath(); 
            ctx.rect(70,70,50,50);   
            ctx.fill(); 
             
            ctx.beginPath(); 
            ctx.rect(130,70,50,50);   
            ctx.fill(); 
             
            ctx.beginPath(); 
            ctx.rect(190,70,50,50);   
            ctx.fill(); 
             
            ctx.beginPath(); 
            ctx.rect(250,70,50,50);   
            ctx.fill(); 
             
            ctx.beginPath(); 
            ctx.rect(310,70,50,50);   
            ctx.fill(); 
          
                
             
            //添加事件响应   
            canvas.addEventListener('click', function(e){   
                p = getEventPosition(e);  
    //            ctx.clearRect(0,0,360,120); 
                reDraw(p,ctx);  
                  
            }, false);   
        }   
    }   
    //得到点击的坐标   
    function getEventPosition(ev){   
        var x, y;   
        if (ev.layerX || ev.layerX == 0) {   
            x = ev.layerX;   
            y = ev.layerY;   
        }else if (ev.offsetX || ev.offsetX == 0) { // Opera   
            x = ev.offsetX;   
            y = ev.offsetY;   
        }   
        return {x: x, y: y};   
    }   
    var arr = [             
            {x:10, y:10, width:50, height:50},   
            {x:70, y:10, width:50, height:50},
            {x:130, y:10, width:50, height:50},
            {x:190, y:10, width:50, height:50},
            {x:250, y:10, width:50, height:50},
            {x:310, y:10, width:50, height:50},  
             
            {x:10, y:70, width:50, height:50},   
            {x:70, y:70, width:50, height:50},
            {x:130, y:70, width:50, height:50},
            {x:190, y:70, width:50, height:50},
            {x:250, y:70, width:50, height:50},
            {x:310, y:70, width:50, height:50}                               
        ];
    //重绘   
    function reDraw(p,ctx){             
        var whichObject = [];     
        for(var i=0; i < arr.length; i++){
              if(p && (arr[i].x*zoom + arr[i].width*zoom) >= p.x && p.x >= arr[i].x
                && (arr[i].y*zoom + arr[i].height*zoom) >= p.y && p.y >= arr[i].y){               
                    whichObject.push(i); 
                    if(arr[i].selected){
                        ctx.fillStyle='blue';
                        arr[i].selected = false;
                    } else {
                        ctx.fillStyle='red';
                        arr[i].selected = true;
                    }
                    ctx.beginPath();                 
                    ctx.rect(arr[i].x*zoom,arr[i].y*zoom, arr[i].width*zoom,arr[i].height*zoom);
                    ctx.fill();   
                    break;
                     
                }                         
               }  
     
    }
      function ZoomImg(o)
            {
    var _zoom = zoom;
                _zoom += (event.wheelDelta / 12)/100;
    _zoom = parseFloat(_zoom.toFixed(1));
                if(_zoom > 0.5){
    zoom = _zoom;
                    //o.style.zoom = zoom + '%';
    //o.width = o.width * zoom;
    //o.height = o.height * zoom;
    //o.style.zoom = 1;
    var p;
    ctx.clearRect(0,0,400,200);
    for(var i = 0 ; i < arr.length ; i++){
    p = arr[i];
    if(p.selected){
    ctx.fillStyle='red';
    } else {
    ctx.fillStyle='blue';
    }
    ctx.beginPath(); 
    ctx.rect(p.x * zoom,p.y * zoom,p.width * zoom,p.height * zoom);   
    ctx.fill(); 
    }
    }

                return false;
            }
    </script> 
     
    </head>  
    <body>  
     
     
     
    <canvas onmousewheel="return ZoomImg(this)" id="cvs" width="400" height="200" style="background:#8D8D8D" ></canvas>  
     
      
     
    </body>  
    </html>是这个效果吗 拖拽就不知道了
    恩恩，谢谢你，拖拽我自己再想