canvas drag

by theodore itzaris

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://github.com/kangax/fabric.js/tree/master/dist/fabric.min.js"></script>
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<div class="content">
    <canvas id="c" width="600" height="700" ></canvas>    
</div>

CSS

.content{
  overflow:auto;
   width:400px;
   height:400px;
}

.closehand{
  cursor:url("https://maps.gstatic.com/intl/en_us/mapfiles/closedhand_8_8.cur"),wait;
 //background:blue; 
}

JavaScript

var canvas  = new fabric.Canvas('c');
canvas.backgroundColor = 'yellow';
	 canvas.defaultCursor = 'url(" http://maps.gstatic.com/intl/en_us/mapfiles/openhand_8_8.cur") 15 15, crosshair';
   
var shadow = {
    color: 'rgba(0,0,0,0.6)',
    blur: 20,    
    offsetX: 10,
    offsetY: 10,
    opacity: 0.6,
    fillShadow: true, 
    strokeShadow: true 
}

 var rect = new fabric.Rect({
        left: 100,
        top: 100,
        fill:  "#FF0000",
        stroke: "#000",
        width: 100,
        height: 100,
        strokeWidth: 10, 
        opacity: .8      
    });

rect.setShadow(shadow);
canvas.add(rect);
var flag=false;


canvas.on('mouse:over',function(o){
		console.log('over object'+o.target != undefined);
    if(o.target != undefined){
    	//	canvas.defaultCursor = 'default';
    };
    console.log('allaksa');
})

canvas.on('mouse:move',function(o){
	/*	if(flag){
    console.log('moving down');
     canvas.defaultCursor = 'url("http://maps.gstatic.com/intl/en_us/mapfiles/closedhand_8_8.cur") 15 15, crosshair';
     //canvas.renderAll();
      $('canvas').addClass('closehand');
    }*/
})



fabric.Canvas.prototype.__onMouseUp = function(e){
		    if(flag){
          canvas.defaultCursor = 'url(" http://maps.gstatic.com/intl/en_us/mapfiles/openhand_8_8.cur") 15 15, crosshair';
         flag=false;
    }
};

fabric.Canvas.prototype.__onMouseDown = function(e){
	    
    
    // accept only left clicks
      var isLeftClick  = 'which' in e ? e.which === 1 : e.button === 1;
      if (!isLeftClick && !fabric.isTouchSupported) {
        return;
      }

      if (this.isDrawingMode) {
        this._onMouseDownInDrawingMode(e);
        return;
      }

      // ignore if some object is being transformed at this moment
      if (this._currentTransform) {
        return;
      }

      var target = this.findTarget(e),
          pointer = this.getPointer(e, true);

      // save pointer for check in __onMouseUp event
      this._previousPointer = pointer;

     ...