Fabricjs - Как обнаружить холст на движке мыши?

Question

В моем приложении fabricjs я создал динамические холсты (переменные также динамические). Здесь мне нужно определить конкретный холст, пока мышь перемещается по холсту. Пример кода,

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' 
    }); 
}); 

после этого, у меня есть 4 разных холстов. Последний добавленный холст активирован. Но мне нужно добавить объект на любой холст. Так что мне нужно активировать холст с помощью события перемещения мыши. Как я могу достичь этого? Пожалуйста помоги мне с этим.

Answer 1

Mullainathan,

Вот некоторые быстрое решение с помощью 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; 
    } 
    } 
}); 

Кроме того, вы можете запустить fiddle