Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://raw.github.com/kangax/fabric.js/master/dist/all.js"></script>
 <style>
   #c {border:1px solid}
  </style>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <canvas id="c"  width="600" height="500"></canvas>
</body>
  <script>
    var UNIT = 20;
    var canvas = new fabric.Canvas('c');
    canvas.renderOnAddition = false;
    canvas.selection = false;
    
    for (var i = 0, len = 30; i < len; i++)
      for (var j = 0, len = 30; j < len; j++) {
    
      var rect = new fabric.Rect({ 
        width: UNIT, 
        height: UNIT,
        top: j * UNIT,
        left: i * UNIT,
        stroke:'black',
        fill: 'white'
      });
        
       canvas.add(rect); 
      }
    
    canvas.renderAll_ = canvas.renderAll;
    canvas.needRender = false;
    
    canvas.renderAll = function(){
      canvas.needRender = true;
    }
    
      
    var a = function(){
      if(canvas.needRender){
        canvas.renderAll_();
      }
      canvas.needRender = false;
      setTimeout(a, 20);
    }
    
    a();
    
    canvas.renderAll();
    
    canvas.forEachObject(function(object){ object.selectable = false });
    // PANE
    var startX = [], startY = [];
    var mX = 0, mY = 0;
    var mousedown = false;
    var objs = canvas.getObjects();
    var dmX, dmY, mousex, mousey;
    
    $('canvas').mousedown(function(e){
        if (e.which !== 1) {return;}
        mX = e.pageX - $(this).offset().left;
        mY = e.pageY - $(this).offset().top;
        
        mousedown = true;
        for(var i=0;i<objs.length;i++){
            startX[i] = objs[i].left;
            startY[i] = objs[i].top;
        }
​
    });
    
    $(document).mouseup(function(e){
        if (e.which !== 1) {return;}
        mousedown = false;
        
    });
    
    $('canvas').mousemove(function(e){
        if (mousedown === false) return;
        mousex = e.pageX - $(this).offset().left;
        mousey = e.pageY - $(this).offset().top;
        dmX = (mousex - mX) ;
        dmY = (mousey - mY) ;
        for(var i=0;i<objs.length;i++){
​
            objs[i].left   = dmX + startX[i];
            objs[i].top    = dmY + startY[i];
  
        }
      canvas.renderAll();
    });
  </script>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers