CODEWITHSUNDEEP
javascripthtmlhtml5-canvasfabricjs
Mullainathan
Mullainathan

Reputation: 456

Fabricjs - How to detect canvas on mouse move?

In my fabricjs application, I had created dynamic canvases(variable's also dynamic). Here, I need to detect particular canvas while mouse move on canvas. Sample code,

var i = 0, canvasArray = [];
$(this).find('canvas').each(function() {
    i++;
    var DynamicCanvas = 'canvas_'+i;
    canvasArray[DynamicCanvas] = new fabric.Canvas('canvas_'+i,{
      width : '200',
      height : '200'
    });
});

after this, I have 4 different canvases. Last added canvas has been activated. But i need to add object on any canvas. So that i have to activate canvas using mouse move event. How can i achieve it.? Please help me on this.

Upvotes: 0

Views: 1176

Answers (1)

Observer
Observer

Reputation: 3706

Mullainathan,

Here some quick solution using jQuery:

 var canvasStr = '';
 var canvasArray = [];
 var fabricCanvasArray = [];
 var htmlStr = '';
 var canvas = null;

 //generate canavases 
 for (var i = 0; i < 4; i++){
            canvasArray.push('c' + i);
            htmlStr += '<canvas id="c' + i + '" width="200" height="200"></canvas>'
 }
 //append canvasses to the body
 $('body').append(htmlStr);

 //to the fabricjs parent div elements assign id's and generate string for jQuery with div id's
 for (var i in canvasArray){
        fabricCanvasArray[i] = new fabric.Canvas(canvasArray[i], {
    isDrawingMode: true
        });

        $('#' + canvasArray[i]).parent().attr('id', ('div' + canvasArray[i]));
    canvasStr += '#div' + canvasArray[i];
    if (i < canvasArray.length - 1){
            canvasStr += ',';
    }
 }

//jQuery event for mouse over each div element of the fabric canvas
 $(canvasStr).mouseover(function(){
     for (var i in fabricCanvasArray){
        if (fabricCanvasArray[i].lowerCanvasEl.id == $(this).children(':first').attr('id')){

        canvas = fabricCanvasArray[i];
        canvas.freeDrawingBrush.width = 10;
        var r = 255 - i*50;
        var g = i * 50;
        var b = 200 - i * 40;
        canvas.freeDrawingBrush.color = 'rgb(' + r + ',' + g + ',' + b + ')';
        canvas.on('mouse:up', function() {
            //do your stuff
         //  canvas.renderAll();
        });
       break;
     }
   }
});

Also, you can run fiddle

Upvotes: 1

Related Questions